From Zero to Hero: Self-Hosting Your Sapper Application

Getting Started with a Virtual Server

Choosing the right hosting plan can be daunting, but don’t worry, we’ve got you covered. For a small application like ours, a basic $5/month plan is more than sufficient. We’ll opt for Ubuntu as our platform, and set up our server with SSH access.

Setting Up Your Server

Before we dive into the fun stuff, let’s get our server configured. We’ll set up a user account, enable SSH, and configure our firewall. This will ensure that our server is secure and ready for action.

sudo useradd -m -s /bin/bash username
sudo passwd username
sudo ufw allow ssh
sudo ufw enable

Node and Nginx: The Dynamic Duo

Next, we’ll install Node.js and Nginx, the perfect pair for serving our Sapper application. We’ll add the necessary repositories, install Node, and configure Nginx to act as a reverse proxy. This will allow us to serve our app on port 80, while Node handles the heavy lifting.

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install nginx

server {
    listen 80;
    server_name example.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;
    }
}

Deploying Your App with Git

Gone are the days of FTP; we’ll use Git to deploy our app with ease. We’ll create a bare Git repository, set up a post-receive hook, and configure our local machine to push changes to our server. This will automate the deployment process, ensuring that our app is always up-to-date.

mkdir ~/repo && cd ~/repo
git init --bare
cd hooks
touch post-receive
chmod +x post-receive

#!/bin/bash
cd ~/repo || exit
unset GIT_DIR
npm install
npm run build
pm2 restart app

Running Your App with PM2

To ensure our app remains running smoothly, we’ll use PM2 to manage our application. This will allow us to restart our app automatically in case of a crash, and even set up a startup script to run our app when our server restarts.

sudo npm install -g pm2
pm2 start app
pm2 startup ubuntu

Caching and Nginx Server Blocks

Now that our app is running, let’s optimize it with caching. We’ll set up Nginx to cache our app’s responses, reducing the load on our server and improving performance. We’ll also create a server block to configure Nginx to serve our app on port 80.

server {
    listen 80;
    server_name example.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;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 1M;
    }
}

Adding a Domain Name and HTTPS

The final touches: we’ll add a domain name and enable HTTPS using a flexible SSL service. This will give our app a professional touch and ensure that our users’ data remains secure.

Create a CloudFlare account and follow their instructions to set up a flexible SSL certificate.

Testing and Troubleshooting

We’ve made it! Now it’s time to test our app and troubleshoot any issues that may arise. Here are some common pitfalls to watch out for:

• Check your server logs: `sudo journalctl -u nginx` or `sudo journalctl -u pm2-app`
• Verify your Git deployment: `cd ~/repo && git log`
• Test your app: `curl http://example.com`

If you encounter any issues, try restarting your server, checking your firewall rules, or searching online for solutions.