Deploy SvelteKit with node adapter on linux server.

Deploy SvelteKit with node adapter on linux server.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Configure node-adapter in svelte.config.js 
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter()
  }
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Now we will change our directory to our project directory 
cd SvelteKitChatApp
Enter fullscreen mode Exit fullscreen mode
  • we will install all the dependencies 
npm i
Enter fullscreen mode Exit fullscreen mode
  • After that we will make our build for production 
npm run build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

That will add pm2 to our server.

  • Now we will serve our sveltekit app using pm2 
pm2 start build/index.js
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Create a new file Caddyfile 
nano Caddyfile
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

HomeBlog

© 2023 EtherCorps. All rights reserved.