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.
- Set up your local URL
- Set up SSL
- Start a local HTTPS server
- Access the site locally
- 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:
(The backslashes “
\” in the URL above are Java regex to ensure that the periods are pattern-matched properly.)
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
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.
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.,
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; PORT = int(sys.argv); 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:
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.