How to deploy Sveltekit app in node server with HTTPS?

Question

I'm want to deploy my Sveltekit app on HTTPS server. I have key files also. This is my svelte.config.js file

import preprocess from 'svelte-preprocess';
import node from '@sveltejs/adapter-node';
import fs from 'fs';
import https from 'https';
/** @type {import('@sveltejs/kit').Config} **/
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: node(),
        files: { assets: "static" },
        vite: {
          server: {
            https: {
              key: fs.readFileSync("path\\privkey.pem"),
              cert: fs.readFileSync("path\\cert.pem"),
            },
          },
        }
    }
};

export default config;

where should I keep my key files for reading from the config file? I tried a few and got some errors screenshot is attached.

Someone please guide me. Thanks in advance.

Answer 1

I solved it by using a custom server

The adapter creates two files in your build directory — index.js and handler.js. Running index.js — e.g. node build, if you use the default build directory — will start a server on the configured port.

Alternatively, you can import the handler.js file, which exports a handler suitable for use with Express, Connect or Polka (or even just the built-in http.createServer) and set up your own server

The svelte.config.js can be left unchanged. Run npm run build to generate the build folder, create a server.js in the project root like the example below, then run node server.js.

import {handler} from './build/handler.js';
import express from 'express';
import fs from 'fs';
import http from 'http';
import https from 'https';

const privateKey = fs.readFileSync('./config/ssl/xx.site.key', 'utf8');
const certificate = fs.readFileSync('./config/ssl/xx.site.crt', 'utf8');
const credentials = {key: privateKey, cert: certificate};

const app = express();

const httpServer = http.createServer(app);
const httpsServer = https.createServer(credentials, app);

const PORT = 80;
const SSLPORT = 443;

httpServer.listen(PORT, function () {
    console.log('HTTP Server is running on: http://localhost:%s', PORT);
});

httpsServer.listen(SSLPORT, function () {
    console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});

// add a route that lives separately from the SvelteKit app
app.get('/healthcheck', (req, res) => {
    res.end('ok');
});

// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);

Answer 2

I'm going to explain a solution to my somewhat related problem here, all according to my best understanding, which is limited.

My solution to set up a trusted Sveltekit dev server (running in a private subnet without DNS) was to configure a Nginx reverse proxy that acts as a trusted HTTPS middle man between the Vite server (running in plain HTTP mode) that is bundled in Sveltekit, and the clients (like my Android phone).

I found the most useful guidance from the following resources:

• How to use Nginx as a Reverse proxy for HTTPS and WSS - Self Signed Certificates and Trusted Certificates
• HMR clientPort option ignored in normal mode
• A: Getting Chrome to accept self-signed localhost certificate
• How to generate a self-signed SSL certificate for an IP address

The main steps to the solution were:

• Become a local certificate authority and register the authority in your clients (like in the Chrome browser on the desktop, or in the Credential storage of an Android phone).
• Being a certificate authority, sign a x509 certificate for the IP-address (subjectAltName) of the dev server in the local network.
• Setup a Nginx HTTPS reverse proxy (proxy_pass etc.) to forward traffic to the Vite server (typically running in the port 3000). Assign the created certificate and the key for its use. Also add Websocket support as explained in the setup guide linked above.
• Declare kit.vite.server.hmr.port = <port of the Nginx proxy> in svelte.config.js. This is important so that the Sveltekit middleware (?) does not try to bypass the proxy.

Relevant snippets from my configuration:

openssl genrsa -out myCA.key 2048
openssl req -x509 -new -nodes -key myCA.key -sha256 -days 10000 -out myCA.pem
openssl genrsa -out 192.168.22.88.key 2048
openssl req -new -key 192.168.22.88.key -out 192.168.22.88.csr

>192.168.22.88.ext cat <<-EOF
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
IP.1 = 192.168.22.88
IP.2 = 127.0.0.1
DNS.1 = localhost
DNS.2 = localhost.local
EOF

openssl x509 -req -in 192.168.22.88.csr -CA myCA.pem -CAkey myCA.key -CAcreateserial -out 192.168.22.88.crt -days 10000 -sha256 -extfile 192.168.22.88.ext
openssl dhparam -out dhparam.pem 2048

server {
        listen 2200 http2 ssl default_server;
        listen [::]:2200 http2 ssl default_server;
        ssl_certificate     /etc/nginx/ssl/192.168.22.88.crt;
        ssl_certificate_key /etc/nginx/ssl/192.168.22.88.key;
        ssl_dhparam /etc/nginx/ssl/dhparam.pem;
        index index.html;
        server_name 192.168.22.88;

        ssl on;
        ssl_session_cache  builtin:1000  shared:SSL:10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
        ssl_prefer_server_ciphers on;

        location / {

            proxy_set_header        Host $host;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        X-Forwarded-Proto $scheme;

            proxy_pass          http://127.0.0.1:3000;
            proxy_read_timeout  90;

            proxy_redirect      http://127.0.0.1:3000 https://192.168.22.88:2200;

            # WebSocket support
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
 
       }

}

kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter(),
    vite: {
        server: {
            hmr: {
                port: 2200,
            }
        }
    }
}

pnpm run dev

Answer 3

Build the product and then serve it using nginx or lighttpd. don't use the hmr it really slow down the web performance because the module keep checking the file change. then apply https to lighttpd or your nginx.

if it too much. use npm run preview.