Home / Tutorials / Svelte / Vite

Svelte.js 3 & The Vite Build Tool Tutorial

In this tutorial we learn how to use Vite to initialize new Svelte projects.

We also cover the Vite package, installing dependencies, and the Vite development server.

Lesson Video

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

Lesson Project

This lesson doesn’t need a pre-generated project. We will scaffold one with Vite throughout the lesson.

What is Vite?

Vite is fontend build tool from Evan You, the creator of Vue.js .

Vite mainly consists of two parts.

  1. A no-bundle server that serves your source files over native ES modules .
  2. A pre-configured Rollup -based production bundler that produces highly optimized builds.

It can be used as an alternative to cloning your Svelte project from Github.

Vite provides us with a better and faster development experience because of features like instant server start, super fast HMR ( Hot Module Replacement over native ESM) and out of the box support for TypeScript.

We can use Vite with vanilla JS or the most popular Javascript frameworks.

  • Vue
  • React
  • Preact
  • Svelte
  • etc.

With the option to choose TypeScript transpiling for each.

How to initialize a new Svelte project with Vite

To create a new project, we use one of the following commands in the Terminal/Command Prompt in the directory where we want to store our project.

Command: npm
npm init vite@latest

Or if you’re using Yarn.

Command: yarn
yarn create vite

1. If it’s your first time using Vite, it will ask you to install an additional package. Without it, you won’t be able to create a new Vite project so choose y .

Example: 
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y)

2. Next, choose a name for your project. If the name has multiple words, use kebab-case.

Example: 
? Project name: » my-vite-project

3. Next, choose Svelte as the framework.

Example: 
? Select a framework: » - Use arrow-keys. Return to submit.
	vanilla
    vue
	react
	preact
	lit
>	svelte

4. And select svelte for the Javascript variant.

Example: 
? Select a variant: » - Use arrow-keys. Return to submit.
>   svelte
	svelte-ts

Once the project has been generated, we’ll need to install its dependencies and dev dependencies.

Start by navigating into the new project folder.

Command: cd
cd my-vite-project

Then run the following command to install the dependencies and dev dependencies.

Command: npm install
npm install

Or if you’re using Yarn.

Command: yarn install
yarn install

How to run Vite's development server

Once the installation has finished, we can run the dev server with the following command.

Example: dev server
npm run dev

Keep this server running while working on your projects so that it can hot-reload any changes you make.

tip If you want to quit the server, just press Ctrl + C and select y when asked for confirmation.

When we start the development server, Vite will do its thing and output a message similar to the following.

Output: 
App running at:
- Local: http://localhost:3000/

It’s just the address our dev server is running on. By default, it will be localhost:3000 .

If we take a look in the browser, we’ll see Svelte created a nice landing page for us with a click counter and links to some useful resources.

How to run Vite's development server in VS Code

If you’re using Visual Studio Code, you can run the server directly from inside the IDE’s built-in terminal.

Option 1:

If you’re inside the project’s directory, use the following command to open it up in Visual Studio Code.

Command: open in vscode
code .

Go to Terminal > New Terminal . This will open the built-in terminal in the bottom pane with the “my-vite-project” directory already selected.

From there, run the development server command.

Command: 
npm run dev

Option 2:

Open Visual Studio Code and go to File > Open Folder . Navigate to your new project, select it and choose Select Folder.

Once the project is open, go to Terminal > New Terminal . This will open the built-in terminal in the bottom pane with the “my-vite-project” directory already selected.

From there, run the development server command.

Command: 
npm run dev

Node will run the appropriate Vite commands to start the server and give us a message similar to the following.

Output: 
App running at:
- Local: http://localhost:3000/

It’s just the address our dev server is running on. By default, it will be localhost:3000 .

If we take a look in the browser, we’ll see Vite created a nice landing page for us with a click counter and links to some useful resources.

How to build & Preview a Svelte Project with Vite

When it’s time to build your Svelte application for production, it needs to be compiled from the Svelte source code, into the HTML, CSS and Javascript that the browser will understand.

Like Rollup, Vite will take care of this process for us, all we have to do is run the build command. The build command is the same as the one we used in the build lesson .

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

Example: build project
npm run build

Vite will build an application bundle that can be served over a static hosting service like Netlify or Vercel .

Once the application has finished building, we’ll see a new folder in the project called /dist/ . We want to deploy everything in this folder to our web host.

But before we do that, we can preview what it would look like by running the built-in preview command.

Example: preview project
npm run preview

If we run the command, Vite will serve the contents of the /dist/ folder on localhost:4173 .

And if we go over to the browser, we’ll see the landing page with the logo and message, as well as the click counter that still works when we click it.

Previous
Build a Svelte app for production