Skip to content

Deploy a Svelte App

How to Deploy a Svelte App on a VPS, cloud or dedicated server: A Comprehensive Guide

Svelte has quickly gained popularity as a modern frontend framework that compiles components to highly efficient vanilla JavaScript. Unlike other JavaScript frameworks like React or Vue, Svelte shifts the work from the browser to the build step, making the final applications lightweight and fast. When combined with the flexibility and control of a Virtual Private Server (VPS), deploying a Svelte app allows you to create a powerful web application with high performance and fine-tuned control over your server environment.

In this guide, we will walk through the steps required to deploy a Svelte application on a VPS, from setting up the VPS to configuring the environment, deploying the app, and enabling SSL security. Let’s get started!

Prerequisites

Before we jump into the steps, you will need the following:

  • A VPS: You can use a provider like DigitalOcean, Linode, Vultr, or AWS. We’ll use Ubuntu 22.04 for this guide, but the steps should work with other Linux distributions.
  • Domain Name: You need a domain name registered and available to use.
  • A Svelte App: You should have your Svelte project ready for deployment.
  • Basic Knowledge of SSH and Linux Commands: Familiarity with the terminal is required to access and configure your VPS.

Step 1: Choose and Set Up a VPS

There are many VPS providers to choose from, and for the sake of this guide, we will assume you are using DigitalOcean. You’ll need to create an account with your VPS provider, choose a server location close to your audience, and configure a new droplet (server instance).

Here’s a general outline for setting up your VPS:

  • Create a Droplet/Instance: After signing in, create a droplet (or instance) with Ubuntu 22.04 (or later).
  • Choose a Plan: Select a pricing plan that meets the needs of your project. The smallest VPS with 1GB RAM is usually sufficient for most small-to-medium Svelte projects.
  • Set Up SSH Key (Optional): You can set up SSH keys for secure login without using passwords. This improves security significantly.
  • Launch the Droplet: Once configured, you will get the IP address of your VPS. This will be used to access your server.

Step 2: Access Your VPS via SSH

Once the VPS is created, you can connect to it using SSH. Open your terminal and use the following command to connect, replacing your_server_ip with your actual server IP address:

ssh root@your_server_ip

If it’s your first time connecting to the server, you will need to confirm the connection. After that, you will be prompted to enter your password or passphrase (if you set up an SSH key).

Once logged in, it’s always a good idea to update the system’s package list and install the latest updates:

sudo apt update
sudo apt upgrade

Step 3: Create a Non-Root User

For security reasons, it’s not recommended to run your web server as the root user. You should create a new user with sudo privileges for managing your server.

adduser yourusername
usermod -aG sudo yourusername

Switch to the new user:

su - yourusername

From now on, you’ll operate as this user instead of root.

Step 4: Install Node.js and Nginx

To deploy a Svelte app, we need Node.js for running the Svelte build process and Nginx as a reverse proxy to serve the application. Here’s how to install both:

  • Install Node.js: First, add the NodeSource repository, which will provide us with the latest stable version of Node.js.
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install nodejs

Verify that Node.js and npm (Node package manager) were installed successfully:

node -v
npm -v
  • Install Nginx: Nginx will be used as a reverse proxy to handle traffic and forward it to your Svelte app running on a different port.
sudo apt install nginx

Start and enable Nginx to start on boot:

sudo systemctl start nginx
sudo systemctl enable nginx

Step 5: Upload Your Svelte Project to the VPS

With the server environment ready, the next step is to upload your Svelte project files to the VPS. You can use a tool like SCP (Secure Copy Protocol) to transfer the files from your local machine to the server.

  • Build the Svelte App: In your local machine, navigate to the root directory of your Svelte project and run the following command to create the production build:
npm run build

This command will create an optimized version of your Svelte app in the build or public directory.

  • Transfer Files to the VPS: Use SCP to copy the files from your local machine to the server. In your terminal, run:
scp -r /path/to/your/svelte-project yourusername@your_server_ip:/home/yourusername/

This will upload your project folder to the home directory of the VPS.

Step 6: Set Up Your Svelte App on the VPS

Once the files are on your server, navigate to the project directory:

cd /home/yourusername/your-svelte-project

Install the project dependencies:

npm install

After that, build the production version of the app again on the server:

npm run build

You can then start the Svelte application using npm, or use a process manager like PM2 to keep it running even if you close your terminal session.

  • Install PM2 globally:
sudo npm install -g pm2
  • Start the app:
pm2 start npm -- start

This will start the Svelte app and keep it running in the background. PM2 is useful because it allows you to manage and monitor processes easily, and ensures that your app will restart automatically if the server reboots.

Step 7: Configure Nginx as a Reverse Proxy

Now that your Svelte app is running on a local port (usually localhost:3000), we need to configure Nginx to act as a reverse proxy, allowing your app to be accessible via your domain name.

  • Create a New Nginx Configuration File:
sudo nano /etc/nginx/sites-available/svelteapp
  • Add the Following Configuration:
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

Replace yourdomain.com with your actual domain name.

  • Enable the Configuration:
sudo ln -s /etc/nginx/sites-available/svelteapp /etc/nginx/sites-enabled/
  • Test the Configuration for Errors:
sudo nginx -t

If there are no errors, restart Nginx:

sudo systemctl restart nginx

Now, Nginx will forward requests to your Svelte app running on port 3000.

Step 8: Set Up Your Domain’s DNS

To make your Svelte app accessible via your domain name, you need to point your domain’s DNS records to your VPS. Log in to your domain registrar (e.g., Namecheap, GoDaddy) and set up an "A" record that points to the IP address of your VPS.

Here’s an example of what your DNS record might look like:

  • Type: A
  • Name: @ (or yourdomain.com)
  • Value: Your VPS IP address

It may take a few minutes to a few hours for the DNS changes to propagate across the internet.

Step 9: Secure the App with SSL (Let’s Encrypt)

To secure your website with HTTPS, you can use Let’s Encrypt, a free service that provides SSL certificates.

  • Install Certbot:
sudo apt install certbot python3-certbot-nginx
  • Generate and Install the SSL Certificate:
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

This command will automatically configure SSL for your Nginx server. Certbot will also handle automatic certificate renewals, so your site will remain secure over time.

Once the SSL certificate is installed, Nginx will automatically redirect HTTP traffic to HTTPS.

Step 10: Test Your Deployment

Open a browser and navigate to https://yourdomain.com. If everything was set up correctly, you should see your Svelte app live and secured with SSL!

You can also check the app’s performance, ensure all routes are working, and that assets are loaded correctly. PM2 will manage the Svelte app in the background, and Nginx will handle web traffic efficiently.

Conclusion

Deploying a Svelte app on a VPS gives you full control over your project and provides a flexible, powerful hosting solution. In this guide, we covered the complete deployment process from setting up the VPS, installing Node.js and Nginx, uploading your Svelte project, configuring Nginx as a reverse proxy, securing the app with SSL, and finally, launching the app live.

By mastering these steps, you’ll gain valuable skills not only in deploying Svelte apps but also in VPS management, which will benefit any future projects you work on.