Tutorial: How to build a Svelte.js 3 app for production
In this tutorial we learn how to build our Svelte application for production.
We also cover how to preview the application in the browser before deploying it to a web server.
If you prefer to learn visually, you can watch this lesson in video format.
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
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.
> email@example.com 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.
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