Setting up SSL and HTTPS for local development

Posted on Sunday, December 11th, 2016 by Ash Ryan
Category: Web

http in a web browser

The Creative SDK for Web was recently updated with a number of new components, including User Auth UI, Asset Browser UI, and Creative Cloud Files API.

The new components all require that any website integrating the SDK utilizes SSL. Given the increasing emphasis on SSL, many production sites already serve content via HTTPS.

However, setting up an SSL certificate and HTTPS server for local development is a process that many developers might not be familiar with.

Since SSL is also required locally for the Creative SDK, our team has created a guide to help you get set up quickly with a self-signed SSL certificate and a simple local HTTPS server.

Contents

  1. Set up your local URL
  2. Set up SSL
  3. Start a local HTTPS server
  4. Access the site locally
  5. Try the Creative SDK for Web

1. Set up your local URL

The Adobe I/O Console

All Creative SDK integrations require registration on the Adobe I/O Console. Part of setting up a Web integration on the Adobe I/O Console is registering your redirect URLs.

In addition to any live production URLs you register, be sure to also register any local URL that you intend to use. (localhost and IP addresses are not allowed.)

For this example, let’s assume you register:

https://local\.mysite\.com

(The backslashes “\” in the URL above are Java regex to ensure that the periods are pattern-matched properly.)

Your hosts file

The hostname of the local URL you registered with the Adobe I/O Console above will need to be registered in your local hosts file in order to direct that hostname to your localhost IP address.

If you are on a Mac, your hosts file is likely at /etc/hosts. If you are on Windows, you can likely find this file at C:\Windows\System32\Drivers\etc\hosts.

Open your hosts file up in your text editor of choice:

$ nano /etc/hosts

Then, in your hosts file, add a line with your localhost IP address, followed by the local hostname that you registered on the Adobe I/O Console.

For example:

127.0.0.1   local.mysite.com

Save the changes and your local hostname is ready to go.

2. Set up SSL

If you do not already have an SSL certificate, you will need to create one. One way to create one is by installing the OpenSSL CLI.

After installation, you can generate your own SSL certificate like this:

$ openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes

Note: when you enter this command, you will be asked a number of questions. For this use case, the only crucial question here is the “Common Name”. Be sure the Common Name is the same as the local hostname you added to your hosts file in the step above (e.g., local.mysite.com).

This will add a server.pem file to your current directory.

Since this is a self-signed certificate, browsers will not trust it, but it will be fine for our local development needs.

3. Start a local HTTPS server

There are many ways to accomplish this.

If you have Python installed (all Macs do by default), you can create a simple HTTPS server in just a few lines of code with Python.

For example, create a file called https-server.py, then add the following code:

import BaseHTTPServer, SimpleHTTPServer
import ssl

import sys

DOMAIN = sys.argv[1];
PORT = int(sys.argv[2]);

httpd = BaseHTTPServer.HTTPServer((DOMAIN, PORT), SimpleHTTPServer.SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket (httpd.socket, certfile='server.pem', server_side=True)
httpd.serve_forever()

You can run this HTTPS server from the command line like this:

$ python https-server.py [domain] [port]

(Hat tip to piware.de for the code the server above is based on.)

Note that using Python is just one example. You could also make an HTTPS server with NodeJS or your language of choice.

4. Access the site locally

Using our examples from above, if you started the HTTPS server with domain local.mysite.com on port 8080, you will be able to access the site locally by going to this URL:

https://local.mysite.com:8080

Note that your browser will likely warn you that the site is insecure because the SSL certificate is self-signed. This warning is expected, and you can ignore it for local development.

5. Try the Creative SDK for Web

Now that you are set up with a local HTTPS server and self-signed SSL certificate, you’re ready to try out our latest Creative SDK components for Web, like User Auth UI, Asset Browser UI, Creative Cloud Files API, and more.

Have a look at our developer guides or check out our Getting Started for Web repos on GitHub.