Shivam Meena

Posted on Aug 5, 2022 • Edited on Nov 16, 2022

Deploy SvelteKit with node adapter on linux server.

#javascript #svelte #sveltekit #linux

Read If:

You wanna learn about sveltekit node adapter.
You wanna deploy a sveltekit app on linux server.
you wanna learn more about sveltekit.

Resources:
Here I'm going to use Digital Ocean for my deployment server. So, create your ubuntu droplet and get started.

I'm going to tell you about sveltekit deployment so please read resources to setup ubuntu server on Digital Ocean or any other service provider e.g AWS, Vultr and Linode .

Introduction

So we gonna start after you logged in to your server with new user.

Here I have created a user by the name theether0.

First we going to setup NodeJs on our linux server using NVM.
Second we will clone are code from github. I have my chat-app repo from my prevoius post.
Setting up and running sveltekit app with pm2.
Adding caddy as server to serve our app with ssl.

NodeJs Setup

Here we going to use Node Version Manager(NVM). It's basically a node version manager which allows us to manage multiple node version on our system. It is easy to use and have a very good cli.
Installing NVM on our server

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Above we are using curl you can use wget as well. Above command will install nvm on server.

Checking for NVM installation

nvm list-remote

This will return a output like this

. . .
       v14.16.0   (LTS: Fermium)
       v14.16.1   (LTS: Fermium)
       v14.17.0   (LTS: Fermium)
       v14.17.1   (LTS: Fermium)
       v14.17.2   (LTS: Fermium)
       v14.17.3   (LTS: Fermium)
       v14.17.4   (Latest LTS: Fermium)
        v15.0.0
        v15.0.1
        v15.1.0
        v15.2.0
        v15.2.1
        v15.3.0
        v15.4.0
        v15.5.0
        v15.5.1
        v15.6.0
        v15.7.0
        v15.8.0
        v15.9.0
       v15.10.0
       v15.11.0
       v15.12.0
       v15.13.0
       v15.14.0
        v16.0.0
        v16.1.0
        v16.2.0

Which simply means all the available versions of node.

Installing our required version which is Node 16.9 (New minimum version required for sveltekit).

nvm install v16.9

This command will install NodeJs v16.9 on our server.

There is one very useful command when you have installed multiple versions of node which is nvm list. This command list all the available version of node on your machine.

Now comes to second step

Setting up our Code

So first requirement for this is using node-adapter in our project because default auto-adapter won't work for nodeJs deploy on server.
Installing node-adapter for sveltekit

npm i -D @sveltejs/adapter-node

Configure node-adapter in svelte.config.js

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

export default {
  kit: {
    adapter: adapter()
  }
};

Now. we have done are node configuration we will commit our code to github.

Now we will clone our repo to server using git clone

git clone https://github.com/theetherGit/SvelteKitChatApp.git

Now we will change our directory to our project directory

cd SvelteKitChatApp

we will install all the dependencies

npm i

After that we will make our build for production

npm run build

This will generate a build directory with all the code to be served on client and needed on server for api's.

After that we will setup our pm2.

Adding PM2 for running node server

Installing pm2 on our server

npm i -g pm2

That will add pm2 to our server.

Now we will serve our sveltekit app using pm2

pm2 start build/index.js

Make sure you are in root of the project directory.

This will serve our app to public. You can now browse app on http://ipaddress:3000. If you are able to browse it is probably because of Firewall.

We can't serve our app without https and a domain for seo. Now we will setup our Caddy sever on Linux.

Adding Caddy and Setup our SvelteKit project for SSL

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https &&
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg &&
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list &&
sudo apt update &&
sudo apt install caddy

By running above command we will be able to install caddy on
our server.

Now, I'm assuming that you have domain name and configured for use. I have mine chat.theether.live. I'm gonna use this for writing our Caddyfile configuration.
Change directory to home by

cd /home

Create a new file Caddyfile

nano Caddyfile

This will open cli based text editor where we have to paste these lines

chat.theether.live {
  root * /home/theether0/build
  reverse_proxy * localhost:3000
}

Make sure file name is Caddyfile.

This will be our source of Caddy to server our app with SSL on chat.theether.live domain.

Now we have added our config file we will start our caddy server (make sure you are in /home directory)

caddy start

If you get a warning about input not being formatted correctly, it’s nothing to be worried about you might have made a format mistake which can be easily sorted with: caddy fmt --overwrite then caddy reload.

You should now be able to see your app running at (in our example), https://chat.theether.live. Notice that not only did it auto-install our SSL certs, it even automatically redirects from http to https routes.

This is all we need to do for serving our sveltekit app from a linux server.