Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – How to deploy SvelteKit on your own server properly without interrupting the user?

So I created this information system with Sveltekit, Ubuntu 22.04 as the server OS, PM2 as the process manager and I’m running the app in Node.Js. I’ve read the Sveltekit documentation on how to build and deploy the app for node adapter and here’s my svelte.config.js code:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';

import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter({
            // default options are shown
            out: 'build',
            precompress: false,
            envPrefix: '',
            polyfill: true
        }),
        // Disable CSRF
        csrf: {
            checkOrigin: false,
        },
        alias: {
            // these are the aliases and paths to them
            '$src': path.resolve('./src')
        }
    },
    vitePlugin: {
        inspector: false
    }
};

export default config;

After building it, all I need to do is submit the command npm run preview in order to run the app.

Since I’m using PM2, I created an ecosystem.config.cjs file so that I can run the app with PM2 command. Here’s the configuration:

module.exports = {
    apps: [
        {
            name: "app_sistamu",
            script: "npm",
            args: "run preview -- --host --port 8080",
            watch: false,
            instances: "max",
            exec_mode: "cluster"
        },
        {
            name: "app_sistamu_DEV",
            script: "npm",
            args: "run dev -- --host --port 5173",
            out_file: "/dev/null",
            watch: false
        }
    ],
};

After all the preparation, all I have to do is merging everything from development branch to master branch. Here’s what I do:

git merge -m "Merging branch development to master" development; npm install; npm run build; pm2 reload ecosystem.config.cjs --only app_sistamu

With this my application can now run on the server. There’s just one thing. The next time if I want to make a changes, I need to rebuild the app and then reload the PM2. I mean yeah it makes sense because in order to deploy the app I need to build it again. But this causes a problem where during the build process, the app returns a 502 Bad Gateway error. But after everything is done, the app is back to normal again without any error.

This raises a question, how to deploy the app properly without disrupting user’s interaction with the app?

Tags:

2

Answers


  1. 0

    To make my comment an answer:

    If you’re doing

    git merge -m "Merging branch development to master" development; npm install; npm run build; pm2 reload ecosystem.config.cjs –only app_sistamu

    and you say the app is disrupted during the build, that probably means that npm run build is clearing out or even deleting the dist directory that npm run preview is serving.

    With a deployment like that, you could probably build into another directory, then quickly swap the two to minimize the disruption:

    # build into new directory
npm run build --outDir=dist-new
# move current dist out of the way
mkdir -p old-dist
mv dist old-dist/"$(date +%s)"
# move new directory into place
mv dist-new dist

    Remember to clear out the old-dist directories, or they’ll start piling up. 🙂

    Login or Signup to reply.
  2. 0

    how to deploy the app properly without disrupting user’s interaction with the app?

    A very common solution is to

    • Use Docker containers

    A typical workflow in this case is to break the building of the application and the deployment of the application to a two different parts.

    Then on the production server.

    • Run a Docker command to update the running container to a new image. Docker will insta-swap the container to use a new image, and there are no interruptions.
    docker pull frontend  # Pulls the new image to the local server cache
docker compose up -d frontend  # Switches to the new version

    This does not only apply to SvelteKit only, but any web server and web development today.

    The downside this approach is that you need to learn how to use Docker first, and it is a lot to learn. However the Docker knowledge is reusable, and works for many different deployment workflows regardless of tools and industry.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search