Tips for effectively deploying SvelteKit on a server without causing any disruptions to the user experience

Question

Tips for effectively deploying SvelteKit on a server without causing any disruptions to the user experience

After developing my information system using Sveltekit and setting up the server with Ubuntu 22.04 OS, PM2 as the process manager, and running the app on Node.js, I followed the Sveltekit documentation to deploy the app for a node adapter. Below is 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 = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            out: 'build',
            precompress: false,
            envPrefix: '',
            polyfill: true
        }),
        csrf: {
            checkOrigin: false,
        },
        alias: {
            '$src': path.resolve('./src')
        }
    },
    vitePlugin: {
        inspector: false
    }
};

export default config;

Once built, I simply run the command npm run preview to start the app. To integrate with PM2, I created an ecosystem.config.cjs file for easy management. 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
        }
    ],
};

To finalize deployment, I merge changes from development to master branch with subsequent commands:

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

Although this process works well, rebuilding the app and reloading PM2 may briefly disrupt user interaction due to a 502 Bad Gateway error during the build phase. However, once completed, the app functions normally again.

This leads me to question how to streamline the deployment process without affecting user experience?

javascript typescript sveltekit pm2

Answer 1

Answer №1

In order to transform my response into a solution:

When executing

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

If the application experiences disruptions during the building process, it is likely that npm run build is either clearing or deleting the dist directory that is being served by npm run preview.

To mitigate this issue, consider building into a separate directory and swiftly swapping them to minimize 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

Be sure to periodically clean up the old-dist directories to avoid clutter accumulation. :)

Answer 2

In order to transform my response into a solution:

When executing

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

If the application experiences disruptions during the building process, it is likely that npm run build is either clearing or deleting the dist directory that is being served by npm run preview.

To mitigate this issue, consider building into a separate directory and swiftly swapping them to minimize 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

Be sure to periodically clean up the old-dist directories to avoid clutter accumulation. :)

Answer 3

Answer №2

What is the best way to deploy an app without causing disruption to user interaction?

One common solution is:

Utilize Docker containers

In this scenario, a typical workflow involves separating the building and deployment of the application into two distinct parts.

Encapsulate your SvelteKit frontend application with node adapter (example) and execute the node.js web server within a Docker container
Create your Docker image using a Github Actions workflow (example)

Subsequently, on the production server:

Execute a Docker command to update the running container with a new image. Docker will seamlessly switch the container to use the new image, resulting in 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 method is not exclusive to SvelteKit; it can be applied to any web server or web development project today.

The drawback of this approach is that one must acquire familiarity with Docker first, which can be overwhelming. Nonetheless, the knowledge of Docker is transferrable and beneficial for various deployment workflows across different tools and industries.

Answer 4

What is the best way to deploy an app without causing disruption to user interaction?

One common solution is:

Utilize Docker containers

In this scenario, a typical workflow involves separating the building and deployment of the application into two distinct parts.

Encapsulate your SvelteKit frontend application with node adapter (example) and execute the node.js web server within a Docker container
Create your Docker image using a Github Actions workflow (example)

Subsequently, on the production server:

Execute a Docker command to update the running container with a new image. Docker will seamlessly switch the container to use the new image, resulting in 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 method is not exclusive to SvelteKit; it can be applied to any web server or web development project today.

The drawback of this approach is that one must acquire familiarity with Docker first, which can be overwhelming. Nonetheless, the knowledge of Docker is transferrable and beneficial for various deployment workflows across different tools and industries.

Answer 5

Answer №3

After multiple attempts, I believe I have finally cracked the code on solving this particular issue. Special thanks to auqust for sharing a helpful YouTube video that guided me through the process:

Prior to starting the app development, ensure adapter-node is installed according to the documentation provided for your SvelteKit project. Once done, execute the build command to create the app - for instance, use npm run build in this scenario;
Upon completion of building the app, you should see a directory named "build". I proceeded by moving all the files within this folder to a designated directory known as /var/www/production/. To transfer these files, simply initiate the command
```
cp -a build/. /var/www/production/
```
;
Access the specific directory. Initialize npm and include
```
"type"="module"
```
into the package.json file. Afterwards, install the express.js package by entering npm install -D express;
Generate a new file titled server.js which will serve the application later on:

import express from "express";
import { handler } from "./handler.js";

const app  = express();
const port = 8080;

app.use(handler);

app.listen(port, () => {
    console.log(`The application is running on port ${port}`);
});

Having opted to utilize PM2 for app execution, I designed an ecosystem.config.cjs file to operate PM2:

module.exports = {
    apps: [
        {
            name     : "app_sistamu",
            script   : "server.js",
            watch    : false,
            instances: "max",
            exec_mode: "cluster"
        }
    ],
};

To launch PM2, I utilized the command

pm2 start ecosystem.config.cjs --only app_sistamu

.

By following this procedure, future updates can be seamlessly applied by executing the build command, transferring the build files to the targeted directory, and reloading the PM2 instances. This method ensures zero downtime, resulting in no disruption for end users.

I trust this solution will be beneficial to others down the line. If there are any mistakes made or alternate solutions available, please share your thoughts below.

Answer 6

After multiple attempts, I believe I have finally cracked the code on solving this particular issue. Special thanks to auqust for sharing a helpful YouTube video that guided me through the process:

Prior to starting the app development, ensure adapter-node is installed according to the documentation provided for your SvelteKit project. Once done, execute the build command to create the app - for instance, use npm run build in this scenario;
Upon completion of building the app, you should see a directory named "build". I proceeded by moving all the files within this folder to a designated directory known as /var/www/production/. To transfer these files, simply initiate the command
```
cp -a build/. /var/www/production/
```
;
Access the specific directory. Initialize npm and include
```
"type"="module"
```
into the package.json file. Afterwards, install the express.js package by entering npm install -D express;
Generate a new file titled server.js which will serve the application later on:

import express from "express";
import { handler } from "./handler.js";

const app  = express();
const port = 8080;

app.use(handler);

app.listen(port, () => {
    console.log(`The application is running on port ${port}`);
});

Having opted to utilize PM2 for app execution, I designed an ecosystem.config.cjs file to operate PM2:

module.exports = {
    apps: [
        {
            name     : "app_sistamu",
            script   : "server.js",
            watch    : false,
            instances: "max",
            exec_mode: "cluster"
        }
    ],
};

To launch PM2, I utilized the command

pm2 start ecosystem.config.cjs --only app_sistamu

.

By following this procedure, future updates can be seamlessly applied by executing the build command, transferring the build files to the targeted directory, and reloading the PM2 instances. This method ensures zero downtime, resulting in no disruption for end users.

I trust this solution will be beneficial to others down the line. If there are any mistakes made or alternate solutions available, please share your thoughts below.

Tips for effectively deploying SvelteKit on a server without causing any disruptions to the user experience

Answer №1

Answer №2

Answer №3

Similar questions

Display toolbar title on small screens in separate lines

Steps to store a string with all characters in a JavaScript variable

Locating the body tag within an AJAX HTML response

Using React.JS: Display Object Map in rendering

What is the best way to append characters to the end of a value if it is already present?

Performing an AJAX request to validate a username when it loses

Tips for eliminating the backslash introduced by JQuery

Is it possible to simultaneously execute an animate and a fade out effect?

Jquery ajax failing to fetch data

I'm puzzled as to why my Vuex modules are not functioning properly. I keep receiving the error message: "[vuex]

Losing focus after typing just one letter

In React, ensure a component's state is preserved when the browser history changes

Struggling to get the Ant design button to launch an external link in a new tab using React and NextJS

The attribute 'loaded' is not found in the 'HttpSentEvent' data type

What is the best way to include a swf video in a list of hyperlinks?

Struggling with making the Angular directive compatible with ng-container

What is the process for including additional properties with the JS spread operator?

Include an extra "array" in the complete AJAX POST data when submitting through x-editable

Angular 4 and the process of HTML encoding

Add a class to a button in an Angular btn-group if a specific string is found within an