SSL on Local WebServer (https://localhost)

When you develop a web application, no matter what is the programming language, you need to have a server to run your application and see the results. Some IDEs make it really easy and you just need to click on a Play button to see your application running. But by default, all of these IDEs run your application on http://localhost. Yes! HTTP, and not HTTPS. You might think you don’t need HTTPS or it’s a fancy thing to have, but actually, it is a must these days. On the other hand, if you are developing a web application relying on smartphone sensors, you will need to run your local host on HTTPS to allow your phone to use device sensors. So, let’s make it short. You need to have an HTTPS://localhost to see your running application on your smartphone without any issues.

No matter what is your IDE or how you want to set up HTTPS, for anyone those you will need to have an SSL certificate. One option is to buy certificates, but it might not be a good idea for development reasons. So, it is way better to generate our own certificates for SSL. So, this article has two sections, generating a self-signed certificate, and set up IDE for HTTPS.

This is a step-by-step tutorial on how to set up a local web server for Visual Studio Code. VSCode is an open-source IDE for any programming language. It has countless extensions to extend its functionalities. So, in this article, I’m gonna show you how to add a web server to this IDE and set up its HTTPS configuration.

Generate a Self-Signed SSL Certificate

1. Install OpenSSL

We are going to use OpenSSL to generate SSL certificates. It is free and available for Windows, MAC, and Linux. If you are using Windows, you can download the installer from here. But if you are using MAC or Linux, you will need to download the source codes from OpenSSL’s official website and follow instructions related to your operating system to create an installer and install the package on your operating system. Follow the installer steps and instructions to finish the setup wizard. Make sure that the application is installed by searching for ‘OpenSSL’ on your search bar. If you can find something like ‘OpenSSL Command Prompt’, you’re good to go.

2. Create Certificates Directory

In this step, you need to create a directory for your certificates. It doesn’t matter where is this directory. So, choose a location that you can easily access.

3. Run OpenSSL

Once you installed OpenSSL, you need to open its command-line interface by searching for ‘OpenSSL command prompt’ on your search bar. Execute the application. You will have a command line that you can write our next step commands. Then navigate to the certificates directory that you created on the 2nd step.

4. Create Private Key

Now you need to create a private key. This private key should be kept private and all other certificates are being made out of this key. Use this command to create the private key:

openssl genrsa -des3 -out rootCA.key 2048

Once you run this code, you will find a rooCA.key file on your certificates directory. You will be prompted to enter a passphrase. Choose a password and don’t forget it. You will need this password every time you want to access this key.

5. Create a Root Certificate

MAC Users:

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

Windows Users:

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.crt

6. Trust the Root Certificate

In this step, you need to import the root certificate to your machine trusted certificates repository.

MAC Users:

Keychain Access > Certificates > Import > Choose the ‘rootCA.pem‘

Windows Users:

Search for ‘Manage Computer Certificates‘. Then follow these steps: Trusted Root Certificates > Certificates > Right Click on an empty space and import the ‘rootCA.crt‘

7. Create certificate request (CSR)

CSR is a request file. It means that you want to have a certificate and in your request you mention the attributes and their values. To make the file easier, and skip the wizard questions for creating a CSR, it is better to create a file in your certificates directory with this name: ‘server.csr.cnf‘. Then open this file with any text editor and put these contents into your file and save. You can make changes to values as you wish.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

Now, create another file with this name: ‘v3.ext‘ and open the file with any text editor and put the following contents to your file, and save. Pay attention to the last line. If you want to access your local computer from another device like your mobile phone, you will need to include your computer IP address in the certificate. So, you should add a new line to the end of the file like this: ‘DNS.2 = 192.168.1.10’. Use your own computer IP address.

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

8. Create Certificate Files

Now that we have the CSR file, and the private key, it’s time to create the certificate. Use these two commands:

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Ok! Nice. I hope you go through all of these steps without any issues. Once you do all of these steps, you will have a .crt (certificate) file and a .key (private key) file. It’s time to use these files on a web server to configure the HTTPS.

Setup Visual Studio Code (VSCode) Web Server HTTPS

In this step, I want to show how to use the SSL certificate to run the web server in HTTPS mode. In this article, I will cover the configuration for VSCode. But if you are using another code editor, or any web server other than the one we mention here, you can skip this part and use the certificates only.

Once you install VSCode, you can add extensions. We want an extension for running a web server. So, open the VSCode, and go to the Extensions. Search for ‘live server‘. You will find something like this:

Go ahead and install the extension. After installing the extension, you will see a gear icon and you can access the extension settings. Open the settings and scroll down to find the Https section. It is super easy to fill the items. You need to fill these properties:

• enable: true
• cert: full path to the .crt file
• key: full path to the .key file
• passphrase: the password for the key file

Nice, You made it. Now, open your file using the editor. For example you can open an index.html file. Then easily you can right click on an empty space on the editor and click on ‘Open with Live Server‘. It will show you the file under a local host secured with HTTPS.

If you want to access this page using your mobile device, remember to use IP address of your computer. Not localhost.

That’s it! You made it 🙂