Deploying SvelteKit application to Digital Ocean droplet

Environment variables

SvelteKit automatically loads environment variables in development, but not in production. If environment variables are used in the application, install dotenv with npm install dotenv from the project directory then use import 'dotenv/config' wherever environment variables are necessary.

Install adapter-node

Install adapter-node with npm install @sveltejs/adapter-node. Update svelte.config.js in the root directory of your project so that it imports the adapter from adapter-node. The file should look like this:

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

SSH into server

From the terminal, connect to droplet with SSH:

$ ssh -i ~/.ssh/id_rsa <username>@<ip_address>

Clone repo from Github or copy project code from local machine

To clone repo, use git clone followed by the url to clone found in your Github repository.

To do a secure copy of the code directory from your local machine, disconnect from your server and type the following from the terminal:

$ scp project/ <remoteuser>@<ip_address>:/home/<remoteuser>/

Reconnect to your server with ssh.

Build application

From the root of the project directory, install your dependencies with npm install . Once installation is complete, build the application out with npm run build . If you see a ✔ done , the build has completed successfully. Run the build with node build and take note of the port number. Use CTRL+C to stop the process.

Manage process with PM2

Install PM2 on the server with npm install pm2 -g . Once installation is complete, from the root of your project directory use the following command to start your application build with PM2.

$ pm2 start build/index.js --name "<application_name>"

Replace <application_name> with either the name of your application, or whatever you want to call the process that runs your application. If successful, you should see a list of your processes (or just the one process) with a status of "online".

Configure NGINX

First, install NGINX with npm install nginx .

Initialize a new server block in the sites-available directory with the following command. Replace <application_name> with the name of your application.

$ sudo vim /etc/nginx/sites-available/<application_name>

In the VIM editor, press i to insert data into the file.

Add the following configuration. Replace YOUR_APP_PORT with the port you noted earlier from node build .

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:YOUR_APP_PORT;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

To save the configuration in the VIM editor, press ESC to leave insert mode, then type :wq to save and exit the editor.

Enable the file by by creating a link to the sites-enabled directory with the following command:

$ sudo ln -s /etc/nginx/sites-available/<application_name> /etc/nginx/sites-enabled/

Test the configuration to make sure there are no errors:

$ sudo nginx -t

Restart NGINX to apply the changes.

$ sudo systemctl restart nginx

Configure firewall

If there is a firewall set up with ufw , configure the firewall to allow for HTTP and HTTPS traffic.

$ sudo ufw allow 'Nginx Full'
$ sudo ufw reload

If all was successful, the application should be up and running on your domain.