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/_/nodeFROM 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 productionRUN npm run buildEXPOSE 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!

--

--

--

Software Development Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Is it being able to take vacations often at places like the Maldives? (Where even are the Maldives

Myth #3 — My homebrewed admin panel works fine, thanks!

Firewall Policy Automation to Keep Moving Faster

PHP Debugging with XDebug, Atom, and XAMPP

Retrieve an SSM parameter inside an AWS Lambda function the easy way

How I Built Doppel, my First Mobile App: Part 3

ASP.NET Core 2.0 Razor Page Handlers

SVT’s Innovative Tech Sprints

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ujwal dhakal

ujwal dhakal

Software Development Enthusiast

More from Medium

Create and deploy AWS Step Function with Serverless framework

Argo Workflows on Google Kubernetes Engine (GKE)

Choosing Between GKE and Cloud Run

Cloud Run vs. GKE decision tree

Google Cloud Alerting to Webex Teams using GCP Pub/Sub and Cloud Functions