Getting Started with Svelte and Vite: A Practical Guide

1. Outline

• What is Svelte?
• What is Vite?
• Svelte and Vite
• Takeaways

2. What is Svelte?

Svelte is a JavaScript framework that helps us create user interfaces. It compiles our components into efficient, lightweight JavaScript during the build process, making it a practical choice for building web applications.

If you want to find out more about Svelte you can check my intro article here.

3. What is Vite?

3.1 Bundles

Before going any further and understanding what Vite is, we need to talk about bundles. What are bundles? Well, a bundle is a tool used in web development to combine separate files and dependencies, typically written in languages like JavaScript, CSS, or others, into a single or a smaller number of files. Bundles often perform optimization tasks like:

• minification: removing unnecessary characters to reduce file size,
• transpilation: converting modern code to older versions for wider browser compatibility, and
• tree shaking: eliminating unused code

Examples of bundles: Webpack (one of the most popular in the JavaScript ecosystem), Rollup etc.

Developers often relies on these bundles for their front-end projects. While these tools are powerful and versatile, they might introduce longer build times, especially as the project grows in size. This can slow down the development process, particularly during iterations where developers need quick feedback.

3.2 Vite

Good, now let’s see what Vite is. Firstly, Vite is a no-bundle build tool. It contains a development server and this is the one who makes all the magic behind. When we are making a website, Vite serves our code to our browser almost instantly.

3.3 Bundle’s Approach vs Vite’s Approach

Traditional bundles (like Webpack or Rollup) take all our code files (JavaScript, CSS, etc.) and combine them into a single large file, often called a “bundle.” This process involves analyzing our code, resolving dependencies, and merging everything together into this single file (e.g., bundle.js). When we make changes, the bundle rebuilds the entire bundle, which can take time.

Vite does things differently, especially during development. Instead of immediately combining everything into one bundle, Vite serves your code as individual modules directly to the browser. These modules, written in ES Modules (ESM), are the native way modern browsers understand and load JavaScript modules. When you change something in your code, Vite quickly updates just that part and sends it directly to the browser — no need to rebuild the entire project.

3.4 Install Vite

As prerequisites, Vite requires Node.js installed (version ≥ 18+). If this is fulfilled, then we can install Vite via command line.

npm install create-vite

4. Svelte and Vite

4.1 Create a project

The next step is to create a brand new Svelte project using Vite. For this we need to run the next command:

npm create vite

After running this command, we need to provide some details regarding the project such as: the project name, the package name, the framework we want to use (in our case, we select Svelte), the variant (in our case, we select JavaScript) and that’s all. At the end, we’ll be informed that the project was created and we need to run the following commands:

 cd sampleProject # sampleProject is the name I chose to give to my project
 npm install
 npm run dev

After, we run the last command, we can go to http://localhost:5173/. Here, we’ll see something like below:

4.2 The Project Structure

Let’s take a look at the project structure.

The top-level component of our application is App.svelte.The entry point to our application is main.ts. It just instantiates the App component and binds it to the body of our HTML page. index.htmlis the main page of our application (usually, it’s just a simple HTML page). In other words, index.html contains main.ts which contains App.svelte.

5. Takeaways

• Svelte is a JavaScript framework for creating user interfaces
• Bundles are powerful, but could introduce longer build times
• Vite is a non-bundle build tool
• Due to the way it’s designed Vite gives quick feedback
• Svelte and Vite do a great job together