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 -:
- 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.
- 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!
Top comments (4)
I like your choice of technologies ;-)!
I wrote to blog posts about the same topic if you're curious. My posts use Sapper as a static site generator, but you can easily adjust it to use it for SSR.
Let me know if you have any questions about that.
Wow that was so much in detail try writing those in medium and dev to for SEO so that users like can get reference while deploying the code with less hassles.
Keep up the good work !
When I publish a new post on my blog, it gets automatically cross-posted to dev.to. You can see the code for that at github.com/mikenikles/www-mikenikl....
FYI, my entire website is open source: github.com/mikenikles/www-mikenikl....
As for cross-posting to Medium, I no longer use Medium (mikenikles.com/blog/migrating-from...). That blog post also contains details of my own blog's architecture.
Nice one