Have you tried Svelte yet? Svelte is a web framework that stands out from the crowd. It shifts a lot of the heavy lifting away from the browser at runtime to the build phase. Svelte’s pre-processing approach translates into smaller, faster, and simpler JavaScript code. On top of Svelte, you can use the SvelteKit meta-framework for routing, server side rendering, Node.js support, and more.
Google Cloud’s developer tooling and serverless runtimes fit seamlessly with the SvelteKit workflow. Let’s see what it takes to get an app up and running! We’ll use the RealWorld example app scenario. It’s a full-stack specification for a demo app, with over 100 implementations in different frontend and backend frameworks.
Working with Svelte code in Cloud Shell
The first thing we’ll do is launch Google Cloud Shell. It’s as simple as navigating to ide.cloud.google.com. You don’t need a Google Cloud account — it’s accessible to anyone with a Google account. It’s a feature-rich IDE with a code editor, terminal, extensions, and much more.
Let’s now select “Clone Git Repository…”, then provide the URL https://github.com/sveltejs/realworld, and select Clone from URL.
Now that you’ve cloned the repo, you should see the sample application code in the explorer view. Before we dive too deep, let’s install the Svelte extension for syntax highlighting and other helpful features.
Script, styles, and markup can be packaged into building blocks, or components. Let’s take a quick look at. In src/lib/ArticleList/index.svelte, you can see how the ArticleList component displays HTML markup for each article, embedding the ArticlePreview component.
Previewing the app
Now that we’ve looked a bit at the code, let’s preview the application. Let’s open the Terminal window, using the prompt icon in the upper-right of the IDE. If needed, change directory into the realworld directory you cloned the repo into. Then, run npm install to install the required packages, and then npm run dev to run in preview mode.
You can even directly “command-click” the link to use the proxy service to access it. Let’s take a look!
How easy was that? Let’s now get ready to deploy the app to production in Cloud Run.Â
Preparing for deployment
There are a couple minor modifications to the out-of-the-box demo application we need to make for a smooth experience.
First, let’s update the SvelteKit adapter used from Vercel to Node.js. From the Terminal, run:
npm uninstall @sveltejs/adapter-vercel
npm install -D @sveltejs/adapter-node
Next, update svelte-config.js to use the new adapter:
<ListValue: [StructValue([(‘code’, “import adapter from ‘@sveltejs/adapter-node’;rnrnrnexport default {rn kit: {rn adapter: adapter()rn }rn};”), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3dfdaa9f2b50>)])]>
Finally, let’s create a Dockerfile to build and run the app. Let’s include a .dockerignore file to include only the necessary files in the container.
Dockerfile
<ListValue: [StructValue([(‘code’, ‘FROM node:20-alpine AS builderrnWORKDIR /apprnCOPY package*.json ./rnRUN npm cirnCOPY . .rnRUN npm run buildrnRUN npm prune –productionrnrnFROM node:20-alpinernWORKDIR /apprnCOPY –from=builder /app/build build/rnCOPY –from=builder /app/node_modules node_modules/rnCOPY package.json .rnEXPOSE 3000rnENV NODE_ENV=productionrnCMD [ “node”, “build” ]’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3dfdaa9f25b0>)])]>
.dockerignore
<ListValue: [StructValue([(‘code’, ‘Dockerfilern.dockerignorern.gitrn.gitignorern.gitattributesrnREADME.mdrn.npmrcrn.prettierrcrn.eslintrc.cjsrn.graphqlrcrn.editorconfigrn.svelte-kitrn.vscodernnode_modulesrnbuildrnpackagern**/.env’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3dfdaa9f2700>)])]>
Deploying the app
With automatic scaling, high availability, no idle costs, and CI/CD integration, Cloud Run has everything we need. All we need to do is package our source code into a container image, and then deploy the image.
For our CLI fans out there, there’s a really easy next step: gcloud run deploy. But I’d like to show you some great UI tooling to walk you through the process. With the Cloud Code extension (the bottom left of the screen shot), you can perform common deployment steps directly in the UI. You can navigate to Cloud Run and then select the deploy icon on your project.
The default settings should be just fine. Just select a name for your service, and ensure you’re deploying with the Dockerfile you just created.
After a couple minutes, all of the packaging steps should be completed. Your app is now live on Cloud Run. You can view more details in the console:
Wrapping up
In this blog post, we saw how easy it is to get started developing and deploying production Svelte apps on Google Cloud. You can learn more about Svelte using the online tutorial, or try out a hands-on lab using Svelte and Vertex AI. Good luck with the next app you build!
Cloud BlogRead More
