How to setup SSL for your Web App - Step By Step Instructions

May 02, 2017

What’s the first thing you see in e-commerce site before shopping ?

Pricing ? Products ? Reviews & Recommendations ?

Most of the time the answer would be no. The first thing we would see is that site’s authenticity

Does that site looks spammy ?

Can I actually trust that website ?

And lot of things ?

HTTPS protocol happens to be an important key factor in our decision.

Lets see how to set up HTTPS connection using SSL certificates for our web app.

Step 0 - Generate CSR

openssl req -new -newkey rsa:2048 -nodes -keyout vookmark.key -out vookmark-CertificateChainFile.csr

Step 1 - Get SSL Certificate

You need to get the SSL certificate from providers like NameCheap

Want free SSL certificate which doesn’t throw some random error in browsers ?

Well… You can get it from Let’s Encrypt

But there is catch, It expires in 90 days and you need to renew it.

You can use some tools like Certbot to automate it :)

Step 2 - Generate Intermediate CA

Before doing server configuration you need to follow your SSL provider email and generate/create am intermediate ca file.

Lets see how to configure it for apache web servers. With little tweaks you can set up in ngix server.

Step 3 - Upload files to your server

Just upload the files to your server.

I would usually create a directory (/var/ssl) and upload all the ssl related files to it.

Step 4 - Pre-requirements

Make sure you’ve enabled SSL module

sudo a2enmod ssl

Step 5 - Configuring Apache for SSL

You just need to include all the certificate in the apache config.

SSLEngine on
SSLCertificateFile /var/ssl/vookmark.crt
SSLCertificateKeyFile /var/ssl/vookmark.key
SSLCertificateChainFile /var/ssl/intermediate_ca.crt

Now you need to have a symlink for your apache configuration (if you don’t already have it)

ln -s /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-enabled/default-ssl.conf

Step 6 - Redirect your HTTP to HTTPS

RewriteEngine On RewriteRule ^(.*)$ https://%{HTTP_HOST}$1[R=301,L]


Just incase if you want to know more about it

CSR - Certificate Signing Request

CRT - verify a secure website’s authenticity. Provided by certificate authority (CA) company

👋 I'm Ashik Nesin • Sr. Frontend Engineer @Chargebee 👨‍💻• I write about modern Javascript & building web apps

© 2021 Nesin Technologies LLP