How can I run a Svelte/Sapper app over HTTPS/SSL?

Question

I can't seem to find anything about running Svelte apps over https. I would like to run on https for both dev and prod. I am able to change the port with --port argument in the scripts in package.json, but obviously that doesn't change the protocol from http to https.

Answer 1

You need to create SSL certificates from somewhere(like ZeroSSL). If you already have got certificate.crt & private.key files, then edit your server.js file.

The original source codes of <sapper project directory>/src/server.js are:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

You can add & change some codes of this file(server.js) like this:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const { createServer } = require('https');
const { readFileSync } = require('fs');
const ssl_port = 443;

const options = {
  // The path & file names could be different.
  key: readFileSync('/home/ubuntu/ssl/private.key'),
  cert: readFileSync('/home/ubuntu/ssl/certificate.crt')
};

const { handler } = polka()
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .get('*', (req, res) => {
        res.end(`POLKA: Hello from ${req.pathname}`);
    });

// Mount Polka to HTTPS server
createServer(options, handler).listen(ssl_port, _ => {
    console.log(`> Running on https://localhost:${ssl_port}`);
});

The added codes are:

const { createServer } = require('https');
const { readFileSync } = require('fs');
const ssl_port = 443;

const options = {
  // The path & file names could be different.
  key: readFileSync('/home/ubuntu/ssl/private.key'),
  cert: readFileSync('/home/ubuntu/ssl/certificate.crt')
};

The changed codes are:

const { handler } = polka()
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .get('*', (req, res) => {
        res.end(`POLKA: Hello from ${req.pathname}`);
    });

// Mount Polka to HTTPS server
createServer(options, handler).listen(ssl_port, _ => {
    console.log(`> Running on https://localhost:${ssl_port}`);
});

And then you have to run your Svelte/Sapper apps with sudo because of the permission of port 443. (like this: sudo npm run dev or sudo npm run start)

After you run sudo npm run dev, you may see the messages:

$ sudo npm run dev

> [email protected] dev /home/ubuntu/ensayar-sapper
> sapper dev

✔ server (2.1s)
✔ client (2.1s)
> Running on https://localhost:443
✔ service worker (42ms)
> Server is not listening on port 3000

You can ignore the message Server is not listening on port 3000.