With React, Vue, and Angular at center stage of Javascript front-end frameworks, many believed we had reached Javascript framework equilibrium. Then came Svelte to once again disrupt the framework space by solving the same problems other fron-tend frameworks solve but in a unique way. Unlike other frameworks, Svelte does not do its DOM-updating work in the browser using the Virtual DOM. Instead, it compiles efficient Javascript code in its build step that efficiently updates your DOM when a state change occurs. In this tutorial, we will create an automated continuous deployment (CD) pipeline that deploys our Svelte app to Heroku.
Prerequisites
To follow along with this tutorial, a few things are required:
- Basic knowledge of Javascript
- Node.js installed on your system
- A Heroku account
- A CircleCI account
- A GitHub account
With all these installed and set up, let’s begin the tutorial.
Creating a Svelte project
To begin, we need to create our Svelte project. Choose an appropriate location within your system and run the following command to create a new project:
npx degit sveltejs/template svelte-heroku-app
The svelte-heroku-app part of this command is the folder name that I want to hold the project’s scaffolding. You can use any name that you prefer.
This command will immediately begin scaffolding a new Svelte project. Once the scaffolding process is done, go into the root of your project (cd svelte-heroku-app) and run npm install to install the required packages. Once the installation is complete, run the following command to boot up a server to serve the application in development mode:
npm run dev
This will serve the application at the http://localhost:5000/ address (5000 is the default port except when it’s in use, then another port will be used instead).
We now have a functional Svelte app up and running.
Setting up Heroku for deploying Svelte apps
To set up a Heroku application, we need to sign into our account and create a new application.
Next, we need to get the name of our application (this will be svelte-heroku-app for the application created above) and the API key for our account. The API key can be found in the Heroku Account Settings section. We will need these two values (the app name and API key) later on to create environment variables on CircleCI for deployment to Heroku.
The final thing that we need to do while we have our Heroku account open is install the necessary buildpacks. Buildpacks are scripts that run when your application is deployed. We need two buildpacks for this tutorial:
heroku/nodejs: Required for all Node.js applicationsheroku/heroku-buildpack-static: The Heroku buildpack static package.
Note: heroku/heroku-buildpack-static is needed because a Svelte app is served via a public folder made up entirely of static files, this will help us serve the static files on the Heroku platform.
Go to your Heroku application Settings page and scroll down to the Buildpacks section (you might already see the heroku/nodejs buildpack already added). Click Add Buildpack.
For each buildpack (heroku/nodejs and heroku/heroku-buildpack-static) enter the identifier/URL into the text field and click Save changes.
Note: If the heroku/nodejs buildpack has already been added, only add the heroku/heroku-buildpack-static buildpack.
After doing this for both buildpacks, you will see the two listed in the buildpacks section.
Now we are done with all the set up required on Heroku.
Setting up the Svelte project on CircleCI
Our next task is to get our Svelte project set up on CircleCI. Begin by pushing your project to GitHub.
Next, go to the Add Projects page on the CircleCI dashboard.
Click Set Up Project to begin.
Next, click Add Manually. You get a prompt to either download a configuration file for the pipeline or start building.
Click Start Building. This build will fail because we have not set up our configuration file yet. We will do this later.
The final thing we need to do on the CircleCI console is to set up environment variables for the project we just added. This will enable it to have authenticated access to our Heroku application for deployments.
Go to your project’s settings by clicking Project Settings (top right) on the Pipelines page (make sure your project is the currently selected project).
On this page, click Environment Variables on the side menu.
On the Environment Variables page, click Add Environment Variable.
Add the following environment variables:
HEROKU_APP_NAME: This is the name of your Heroku application (in this casesvelte-heroku-app)HEROKU_API_KEY: Your Heroku account API key.
Note: As stated before, this can be found under the Account tab of your Heroku account under Account Settings.
Once added, you now have everything set up on your CircleCI console for deployment to Heroku.
Deploying the Svelte app using CircleCI Heroku orb
CircleCI orbs are reusable packages of YAML configuration that condense repeated pieces of config into a single line of code. They enable developers to easily use powerful pipeline functionalities with all the boilerplate abstracted.
In this exercise, we will be using CircleCI’s orb for Heroku to write a pipeline configuration to deploy our Svelte site to Heroku.
But before that, we need to create a file to instruct our Heroku Buildpack Static package how to deploy and serve our application. At the root of your project, create a new file named static.json and enter the following code:
{
"root": "public/",
"https_only": true
}
The most important configuration parameter here is the root property. A Svelte application is served via a public folder. Therefore, the root property is used to point to this folder so that the host serves the appropriate code. https_only is specified to ensure that our application is always served via a secure protocol.
Now we can write our deployment script. At the root of your Svelte project, create a folder named .circleci and a file within it named config.yml. Inside the config.yml file, enter the following code:
version: 2.1
orbs:
heroku: circleci/heroku@0.0.10
workflows:
heroku_deploy:
jobs:
- heroku/deploy-via-git
In the configuration above, we pull in the Heroku orb (circleci/heroku@0.0.10) which automatically gives us access to a powerful set of Heroku jobs and commands. One of those jobs is heroku/deploy-via-git, which deploys the application straight from your GitHub repo to your Heroku account. This job already takes care of installing the Heroku CLI, installing project dependencies, running the build script, and deploying the application. It also picks up our environment variables to facilitate a smooth deployment to our Heroku application.
Now, it’s the time we have all been waiting for: deploy o’clock. Let’s commit all the changes we made to our Svelte project and push to our repo to trigger the deployment.
To see behind-the-scenes of the deployment, you can click on heroku/deploy-via-git to see the build.
For the official confirmation that the deployment of our Svelte application has been successful, visit the default Heroku address for the site https://[APP_NAME].herokuapp.com. For this exercise, it will be https://svelte-heroku-app.herokuapp.com/.
Awesome!
We now have our Svelte application live on Heroku.
Conclusion
We have been able to deploy a Svelte application to Heroku successfully using CircleCI orbs to build an automated continuous deployment pipeline. Now, all we need to do to deploy updates to our application is push our code and all changes will deploy automatically. This exercise also demonstrates how CircleCI orbs make setting up deployment easy.
Check out the CircleCI orbs registry for orbs that suit your programming language and deployment of choice.
Happy coding!
Fikayo Adepoju is a LinkedIn Learning (Lynda.com) Author, Full-stack developer, technical writer, and tech content creator proficient in Web and Mobile technologies and DevOps with over 10 years experience developing scalable distributed applications. With over 40 articles written for CircleCI, Twilio, Auth0, and The New Stack blogs, and also on his personal Medium page, he loves to share his knowledge to as many developers as would benefit from it. You can also check out his video courses on Udemy.
