How to use SSL with Vue CLI for local development?
date
Apr 25, 2021
slug
use-ssl-with-vue-cli-locally
status
Published
tags
developement
vue
summary
Learn how to use SSL with Vue CLI for local development.
type
Post
Usually in local development environment the vue app is served via
http protocol. But in production environment it is served via https. Running the local server in https might be needed if you consume API that is forced to be consumed only by the app served via HTTPS.In this guide, we will be setting up HTTPS in our development environment for our vue app with our own SSL certificate.
Vue CLI
The most common way to scaffold a vue project is via its vue-cli tooling and running following commands
The app runs locally at
http://localhost:8080
Now we want the app to be served via
https. We can do this easily by setting up our own SSL certificate in development for localhost using mkcertStep 1: Creating an SSL Certificate
To create a valid SSL certificate easily we make use of mkcert tool. Run the following commands to obtain a certificate.
Now we have successfully created Certificate Authority (CA) on our machine which enables us to generate certificates for all of our future projects.
From the root of our hello-world project, run the following commands,
Now we have a
.certs folder with key and cert files inside it.Please, make sure to add this folder to
.gitignore so that we don't accidently commit these files to version control.Step 2: Adding HTTP to vue config file
Vue CLI allows us to configure it via config file as follows
Here we are pointing to CLI where our certificate file is by simply passing an object with a key and cert to devServer's https config.
We are almost at the end of the process. Let's restart the server again. Voila, now our app is served via
https.
Happy solving!