Thursday, January 16, 2020

Starting the live server of VSCode in SSL/Https Mode

Hi we all need a server many times in our development setup to host our files and work on it. For this, one way is to always add the server code and respond html files and js files without processing (if its a normal html project).

But we have a better option like live server plugin, that supports hot reloading as well, that means as soon as you change any files on your coding it will reload the browser window as well.

Live server plugin of VSCode exactly gives the support where in which, if you write some html file and you want to host it on the server you can use this plugin for starting the server for your coding folder.

Prerequisites:
  1. VScode
  2. Install Live server Plugin in VScode from: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  3. You can read the documentation, what is supports and what are its shortcuts.
The main problem is that sometimes we need to start the server in the https mode that is ssl mode, at that time we have to do certain config changes in order to start the live server in ssl mode. So here are the steps:
  1. We have to generate the key-pem file pair for starting the server in https mode.
  2. For that we first use following commands:
    1. Create a private key :
      openssl genrsa -aes256 -out localhost.key 2048
      For this we have to provide a password.
    2. Create the certificate:
      openssl req -days 3650 -new -newkey rsa:2048 -key localhost.key -x509 -out localhost.pem
      Give the details and provide password (from step 1) for generating the certificate
    3. Create a .vscode folder in root of your project and create settings.json file inside of it
    4. Add the following code in that:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "liveServer.settings.port": 5501,
  "liveServer.settings.root": "/",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.https": {
    "enable": true,
    "cert": "PATH TO FOLDER/localhost.pem",
    "key": "PATH TO FOLDER/localhost.key",
    "passphrase": "PASSWORD OF STEP 1"
  }
}

Now if you start the live server by pressing Go Live button you server will be started in SSL mode and chrome will prompt you to verify the ssl website, since you are in local, just click advanced and proceed anyway, and boom your server is in ssl mode.

Here are the references I took help from:
  1. https://gist.github.com/prof3ssorSt3v3/edb2632a362b3731274cfab84e9973f9
  2. https://www.youtube.com/watch?time_continue=144&v=v4jgr0ppw8Q&feature=emb_logo
Here is the dummy code to check for starting the server in SSL mode https://github.com/ankur20us/demo-live-server-ssl

Happy Coding
:)

No comments:

Post a Comment