September 5, 2024

HTTPS localhost on a SvelteKit, Vue, React, or other Vite Project with mkcert

Justin Golden

Here’s how you can get your localhost to be HTTPS with any Vite project (SvelteKit, Vue, React, SolidJS, Preact, Astro, etc.)

We will be using the mkcert-cli package to generate a self-signed certificate.

No need to install this package, since we will run it with npx for one-time use.

Update your package.json

Add the following command to your package.json file:

"cert": "npx -y mkcert-cli"

This will run the mkcert-cli package and generate a self-signed certificate.

For custom output dir and/or file names, use the following command:

"cert": "npx -y mkcert-cli --outDir app/ssl --cert server.crt --key server.key"

You should only have to run this once. Run your newly added command with npm run cert and click ok to trust if a window pops up.

Update your vite.config.js

Update your vite.config.js file to include the following:

import fs from 'fs';

server: {
  https: {
    key: fs.readFileSync('./app/ssl/server.key'),
    cert: fs.readFileSync('./app/ssl/server.crt')
  }
}

Use the location and name of your certificate files instead of app/ssl/server.key and app/ssl/server.crt.

Update your .gitignore

Remember, do NOT commit your certificate files to your repo. Update the .gitignore file to ensure they are not committed:

app/ssl/

Remember to update your README.md

Remember to update your readme:

First Time Setup: Run `npm install` and then `npm run cert`.