This chapter covers

• Deploying to any HTTP server
• Using Netlify
• Using Vercel (formerly ZEIT)
• Using Docker

Writing a Svelte app is lots of fun, and they are easy to run locally. But eventually you’ll want to deploy apps to a server that enables others to use them. There are many more deployment options than we will cover here, but we will discuss some popular choices.

Some services, such as Netlify and Vercel, support registering a source repository (such as GitHub, GitLab, or Bitbucket). After you do this, they watch the repository for changes. Every time changes are pushed, they rebuild the web app and serve the resulting files.

13.1 Deploying to any HTTP server

It is easy to deploy a Svelte application to any HTTP server. To demonstrate this, we will use the Node-based Express server. Here are the steps:

1. cd to the top project directory.

2. Enter npm run build to create files in the public/build directory.

3. Create a server directory in the top project directory.

4. cd to the server directory.

5. Enter npm init and answer the questions it asks in order to create a package .json file. Alternatively enter npm init --yes to use the default values instead of having to answer questions.

6. Install Express by entering npm install express.

7. Create a server.js file containing the following:

   const express = require('express');
   const path = require('path');
    
   const app = express();
    
   app.use(express.static(path.resolve(__dirname + '/..', 'public')));  ❶
    
   const PORT = 1234;                                                   ❷
   app.listen(PORT, () => console.log('listening on port', PORT));

   ❶ This specifies that files will be served from the public directory, which is a sibling of the server directory.

   ❷ Other port numbers can be used.

8. Add the following script in package.json:

   "start": "node server.js"

9. Start the server by entering npm start, still in the server directory.

10. Browse to localhost:1234 (or whatever port you chose) to run the app.

When using a cloud-based server, upload the public directory to its recommended location.

13.2 Using Netlify

Netlify (www.netlify.com) bills itself as an “all-in-one platform for automating modern web projects.”

To get started using Netlify, browse to https://www.netlify.com/, click the Get Started in Seconds button, and sign up. Netlify sites are automatically secured with HTTPS using a “Let’s Encrypt” certificate.

There are two ways to create and deploy sites in Netlify: using the website and working from the command line.

13.2.1 Netlify from the website

When you use Netlify from the website, code for your site must be in a GitHub, GitLab, or Bitbucket repository. Once the repository is associated with your site, pushing changes to it will trigger a new build and deploy.

To create a site and build and deploy it, follow these steps:

1. Browse to https://www.netlify.com/.

2. Log in and enter your email address and password.

3. Click the New Site From Git button in the upper right.

4. Click a button for one of the supported repository services. A dialog will open.

5. Click the Authorize button to grant Netlify access to repositories.

6. Select the account where Netlify should be installed to allow it to host applications in repositories found there.

7. Choose between allowing Netlify to access all repositories or only selected repositories (preferred). If the latter is selected, choose a specific repository.

8. Click the Install button.

9. Enter your password for the repository service.

10. Click a repository name to configure its Netlify options. These include the branch to deploy, the build command to run, and the directory to publish that contains build artifacts. In the case of Svelte and Sapper, the build command should be npm install; npm run build. The directory to publish should be public for Svelte and _ _sapper_ _/build for Sapper.

11. If your build process requires environment variables to be set, click the Show Advanced button. For each environment variable needed, click the New Variable button and enter a name and value.

12. Click the Deploy Site button. The message “Site deploy in progress” will appear for a few seconds, and then the URL of the newly deployed application will be displayed. If the build fails, a red link that says “Site deploy failed” will be displayed. Click this to see the error messages.

13. The provided URL is fine for testing, but you will want a better URL for users. To change the URL, click the Site Settings button and the Change Site Name button. Enter a new site name. It must be unique among all domains that end in .netlify.com. For example, you can try changing the site name to “travel-packing”.

14. To add a custom domain, click the Domain Settings and Add Custom Domain buttons. Of course, you need to own a domain to do this.

15. To run the app, click its URL link or enter the URL in a browser.

When changes are pushed to the repository, Netlify will automatically rebuild and redeploy the site. This can be seen by browsing the Netlify site and clicking the Deploys tab. There will be a row at the top of the list of deploys that says “Building.” If you are already viewing this page, refresh the browser to get an updated list of deploys. To monitor the build progress, click the “Building” row that displays the “Deploy log.”

To manually trigger a new deploy, click Deploys near the top of the page, click the Trigger Deploy drop-down, and select Deploy Site. This is useful after making changes to the deploy settings, such as changing the build command.

13.2.2 Netlify from the command line

To install the Netlify CLI for operating on Netlify sites from the command line, follow these steps:

1. Enter npm install -g netlify-cli.

2. Enter netlify login, which launches a website.

3. Click the Authorize button. This stores an access token in your home directory in the file .netlify/config.json. The access token is automatically used by the Netlify CLI commands.

For help on the netlify command, enter netlify help or just netlify.

To create a Netlify site from code in the current directory, enter netlify init and answer a few questions. If the current directory is a local source repository, this will associate the site with it, so that pushes will trigger deploys. However, the current directory is not required to be a local source repository.

If the current directory becomes a source repository later, it can be linked to the Netlify site by entering netlify link. This is an optional step that causes pushes to automatically trigger a deploy.

To deploy the current directory site using the latest code changes when it is unlinked (not associated with a remote repository), follow these steps:

1. If the dependencies of the site have not yet been installed, enter npm install.

2. Build the site locally by entering npm run build.

3. Enter netlify init to create a Netlify site for this app.

4. Select Yes, Create and Deploy Site Manually.

5. Select a team, likely your own.

6. Optionally enter a site name with no spaces.

7. Enter netlify deploy --dir build.

8. Select Create & Configure a New Site.

9. Select a team name, which is typically the one associated with your account.

10. Optionally enter a site name.

This will output a “live draft URL” at which the site can be tested.

You can deploy the site to its production URL by entering netlify deploy --prod --dir build. This will output a “live URL” at which users can visit the site.

The same steps can be used to deploy a site that was created through the Netlify website.

To open the web-based Netlify admin UI for the current directory site, enter netlify open:admin. To open the current directory site, enter netlify open:site.

To delete the Netlify site for the current directory, follow these steps:

1. Enter netlify open.

2. Click the Site Settings button.

3. Scroll to the bottom and click the red Delete This Site button.

4. Enter the site name in the input.

5. Click the red Delete button.

For more details on Netlify, see the documentation: https://docs.netlify.com/cli/get-started/.

13.2.3 Netlify plans

At the time of this writing, Netlify has three plans. For details on pricing, see www.netlify .com/pricing/.

• Starter --This plan is free. It only supports a single team member. Only one build can run at a time. This plan is great for enabling individual web developers to show their applications to others during development and for hosting applications that do not require advanced features or large amounts of bandwidth. It provides up to 100 GB of bandwidth per month for free, and it charges beyond that.

• Pro --This plan adds support for three team members, three concurrent builds, and password-protected sites. Additional team members incur added costs.

• Business --This plan adds support for five team members and five concurrent builds. Additional team members incur added costs. It also adds support for single sign-on (SSO), role-based access control (RBAC), full audit logs, 24/7/365 support options, a CDN, and a 99.99% uptime SLA. Pricing is also based on bandwidth usage and total monthly build times.

In addition to hosting web apps, Netlify also hosts serverless functions and FaunaDB, but no other databases.

13.3 Using Vercel

Vercel (https://vercel.com/) bills itself as “the optimal workflow for frontend teams.” To get started using Vercel, browse to https://vercel.com/ and click the Start Deploying button. Click the appropriate button to continue with GitHub, GitLab, or Bitbucket. Follow the instructions to finish creating an account.

By default, Vercel projects that are associated with a source repository build and deploy the default branch, which defaults to “master.” This can be changed by modifying the default branch in the source repository. Deploying a non-default branch requires custom CI/CD tooling such as GitHub Actions (https://github.com/features/ actions).

There are two ways to create and deploy projects in Vercel: using the website and working from the command line.

13.3.1 Vercel from the website

Code for a new site can be created from a template. There are templates for many kinds of projects, including Create React App, Next.js, Gatsby, Vue.js, Nuxt.js, Svelte, Sapper, and more.

Alternatively, code for a new site can be obtained from a GitHub, GitLab, or BitBucket repository. Pushing changes to the repository will trigger a new build and deploy.

To create a project and build and deploy it, follow these steps:

1. Browse to https://vercel.com.

2. Click Login in the upper right and log in to your account.

3. Click the Import Project button.

4. The first time a given repository service is used, Now integration must be installed. For example, for GitHub, click the Install Now for GitHub button.

5. Select a repository account, and enable it for All Repositories or Only Select Repositories (preferred).

6. Click the Install button.

7. Enter your password for the repository service.

8. To use an existing repository, select it and click the Import button.

9. Wait for the initial project build to complete.

10. To run the project, browse to the provided URL, which will have the format project-name.username.now.sh. Alternatively, just click the Visit button.

Now when changes are pushed to the repository, Vercel will automatically build and deploy the project. To customize the build process, modify the npm build script in the package.json file in the top project directory.

13.3.2 Vercel from the command line

To install the vercel command for operating on Vercel projects from the command line, follow these steps:

1. Enter npm install -g vercel.

2. Enter vercel login.

3. After being prompted, enter your email address.

4. Click the Verify button in the email you receive.

For help on using the vercel command, enter vercel help.

To create and deploy a Vercel project from the current directory, enter vercel. The project does not need to be in a source repository. This is by far the easiest way to deploy a web application.

To list all your deployments, enter vercel ls.

To delete a deployment from the command line, cd to the top project directory and enter vercel projects rm project-name.

13.3.3 Vercel tiers

At the time of this writing, Vercel has three tiers. For details on pricing, see https:// vercel.com/pricing.

• Free --This tier only supports a single user. It also supports use of serverless functions. Only one build can run at a time.

• Pro --This tier adds support for 10 team members and concurrent builds. Additional team members incur added costs.

• Enterprise --This tier adds an SLA for 99.99% uptime, enterprise support, audit logs, and more.

13.4 Using Docker

Svelte applications can be deployed as Docker images. To create and run a Docker image for a Svelte application locally, follow these steps:

1. Install Docker from https://docs.docker.com/get-docker/.

2. Create a Dockerfile file containing the following:

   FROM node:12-alpine
   WORKDIR /usr/src/app
   COPY package*.json ./
   RUN npm install
   COPY . .
   EXPOSE 5000
   ENV HOST=0.0.0.0
   CMD ["npm", "start"]

3. Add the following scripts in package.json:

   "docker:build": "docker build -t svelte/app-name .",
   "docker:run": "docker run -p 5000:5000 svelte/app-name",

4. Enter npm run docker:build.

5. Enter npm run docker:run.

Details on deploying a Docker image to the cloud are provider-specific. Examples include Amazon Web Services (AWS), Google Cloud Platform (GCP), and Microsoft Azure.

In the next chapter we will explore some advanced features of Svelte.

Summary

• Deploying Svelte apps is easy.

• Using a service like Netlify or Vercel makes it even easier.

• Vercel provides the easiest command-line option, only requiring you to enter the single command vercel to create and deploy a new project.