Deploy Sapper on Google Cloud Run

Svelte is the next cool thing for frontend if you don't believe me just try it out and feel the experience of developing web applications with minimal efforts.

So I have tried Sapper which is built on top of Svelte with SSR (which is just like nuxt or next) support for my pet project. This blog post will be about how to deploy apps built with sapper on Google Cloud Run as I have faced issues while deploying.

This post assumes you are already familiar with Sapper, Google Cloud Run, Github Actions, and Docker.

There are two ways of deploying the Sapper apps

• Exporting -: By running npm export on the root, it will generate a bunch of static files and now upload those to any web server, link domain and it will run.
• Running Server -: By running npm run buildit will generate production build and then run npm run startwhich will start serving those build files you made. So we will be doing same thing on our Cloud Run and serve them. Here are some steps we will be doing -:

1. Dockerization -: As we will deploying docker container so we need to dockerize our app so create a file called Dockerfile in root.

# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:12-slim
# Create and change to the app directory.
WORKDIR /usr/src/app
# Copy application dependency manifests to the container image.
# A wildcard is used to ensure both package.json AND package-lock.json are copied.
# Copying this separately prevents re-running npm install on every code change.
COPY / ./
# Install dependencies.
RUN npm install
# Compile to production
RUN npm run build
EXPOSE 8080
# Run the web service on container startup.
CMD [ "npm", "start" ]

It will set up an environment with node js pre-installed, set up your app, and serve with the desired port number.

2. Github Action & Cloud Run Setup -: Create a folder inside root with the name .github and inside that create workflows and then create a YML file name deploy.yml(You can use any name but you should strictly follow the directory convention) with configs and now the path and content should look like .github/workflows/deploy.yml

It will log in to your Google account, build the image, and deploy it to the cloud run. Three variables are used on Github Secrets

GCLOUD_AUTH -: This should be a 64baseEncoded string of your JSON credentials. You can use base64 path/to/jsonFile it to convert to JSON on Linux. Ref https://cloud.google.com/docs/authentication/getting-started

GCLOUD_PROJECT_ID- : Project id of your Google Account.

CLOUD_RUN_SERVICE_NAME -: Create a cloud with the same name you have added on Github Secrets.

Make sure you have added your Github repo on Cloud

On every push, it will build the image and deploy code to the Cloud Run.

Link for Github repo -: https://github.com/ujwaldhakal/sapper-on-cloud-run

Conclusion -:

In my opinion, I found out working with Svelte easy, comparing to React and Angular which I have worked with. Just give it a try for your next pet projects.

Keep Coding!