Tutorial: How to build a Svelte.js 3 app for production

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples in this lesson, you’ll need a Svelte app that was cloned with degit or scaffolded with Vite

If you already have an app from previous lessons, you can use that instead.

How to build your Svelte application

Before an application can be deployed to a web server, it needs to be compiled from Svelte code into HTML, CSS and Javascript that the browser can understand.

Svelte takes care of this process for us, all we have to do is run the build command.

tip If you’re using Visual Studio Code, go to Terminal > New Terminal to open a new CMD with your project path already selected.

npm run build

Depending on the size of your application, this may take some time. Once the compilation has finished, we’ll see the following output.

> svelte-app@1.0.0 build
> rollup -c

src/main.js → public/build/bundle.js...
created public/build/bundle.js in 963ms

The CLI generates the compiled application in the /public/ directory of the project’s folder. Everything inside this folder can be deployed to a web server like Netlify or Vercel .

How to preview your Svelte application

It’s good practice to preview an app after it was built, to see if there are any issues.

The /build/ directory is meant to be served by an HTTP server so it won’t work if we try to open the file directly in the browser.

We have several methods to preview the app, the easiest of which is to use the built-in preview command from Rollup.

npm run start

If we run the command, Svelte will serve the contents of the /build/ folder on the same address as the dev server, localhost:8080 .

And if we go over to the browser, we’ll see the default landing page with the greeting message. So everything works as expected.

Preview your Svelte build with VS Code's Live Server extension

If you’re working with VSCode as your editor, you can install the Live Server extension.

To use it, simply right-click on the index.html file in the Explorer pane and select Open with Live Server .

Preview your Svelte build with Vercel's Serve package

If you’re using another editor that doesn’t have a Live Server type extension, you can use an npm package like Vercel’s serve .

To install the package, execute the following command.

npm install -g serve

tip The -g flag means the package will be installed globally and be available to any project. You can omit the flag if you want to install the package for the current project only.

To run the app, open the /build/ folder in your editor and execute the following command.

serve -s

tip The -s flag will serve in Single-Page Application mode to prevent potential 404 errors.

If you’re not in the /build/ folder but still in your main project, you can add the folder you want to serve to the command.

serve -s build