How to set up a Svelte development environment Tutorial

Lesson Video

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

How to set up a Development Environment for Svelte applications

We’ll need at least two things to be able to start developing applications with Svelte.

• The Node.js Javascript runtime.
• A text editor or Integrated Development Environment (IDE). We’ll be using the free Visual Studio Code IDE throughout this course.

How to install Node.js

Node is a Javascript runtime that allows us to use Javascript outside of the browser. We won’t need to learn Node or how to write server-side code, but the Vue CLI uses it behind the scenes so we need to install it.

To install Node.js, follow the steps below.

1. Go to the official Node.js Download page and download the installer for your operating system.

   tip We recommend installing the LTS (Long Term Support) version for the best support with Svelte. If you already have the Current version installed, please uninstall it and install the LTS version.

2. Run the downloaded installer and follow the prompts in the Installation Wizard. The default settings are fine, but the installer may give you the option on Windows to install the Chocolatey package manager. It’s not required for Vue but if it’s something you want, you can check the checkbox to include it in the installation.

   note The Chocolatey installation will use Windows Powershell and install the latest stable release of Python , as well as Visual Studio Build Tools by default. Your anti-virus may also give you a warning, but it is safe to create an exception.

Next, let’s quickly test if Node was installed. To do this, open a Terminal (Linux/macOS) or Command Prompt (Windows).

Windows:

1. Tap the Windows button on your keyboard or click on the Windows icon.
2. Type ‘cmd’ and press Enter to launch a Command Prompt window.

MacOS:

1. Open Applications > Utilities and double-click on Terminal.

Linux:

1. Press Ctrl + Alt + T on your keyboard to open the terminal.

Then type in the following command and press Enter .

node -v

If you see a version number, Node.js was installed successfully. Any version above 8.9 is fine, but v12+ is recommended.

v16.14.0

How to install Visual Studio Code IDE

For this course, we strongly recommend using Visual Studio Code as your code editor.

VSCode is free, available for all platforms and come with optional extensions that will make development easier. To install VSCode, follow the steps below.

1. Download the VS Code installer from the official website.
2. Once the download has finished, Run the downloaded installer and follow the prompts.

tip Installation is straight forward but if you get stuck, the official documentation provides installation guides for Windows , macOS and several Linux variants.

Although it’s not required, we also recommend installing at least the first of the following two extensions for VS Code.

• Svelte for VS Code provides syntax highlighting and rich intellisense for Svelte components in VS Code. Documentation for the extension can be found on Github
• Svelte 3 Snippets for VS Code adds code snppets that are based on and follow the official Svelte Documentation. Documentation for the extension can be found on Github

How to create (clone) a Svelte project with degit

To keep things organized, we’ll create a folder to store all the example projects for this course. It can be anywhere on your system, like the desktop.

We’re using Windows so we chose a folder called “SvelteProjects” on the main drive: C:\SvelteProjects\ .

Now open your Terminal/Command Prompt and navigate into the directory you chose (or made). Our command looks as follows.

cd C:\SvelteProjects\

Keep your terminal open, we’ll use it again in a minute.

We can create a new Svelte project in one of two ways.

• Clone the official project Github repo with degit .
• Scaffold a new Svelte project with Vite .

For now, we’ll clone the repository from Github but we do cover Vite for Svelte later on in the course.

To clone the repo, we follow a simple 3 step process.

1. Clone the project from the Github repo without its history:

npx degit sveltejs/template <project-name>

Where <project-name> is the name you want for your project (without the angle brackets).

We’ll call our project “first-app” so the command would be as follows.

npx degit sveltejs/template first-app

The terminal may ask you to install degit if it’s not on your system already. It’s safe to install it so choose y.

Need to install the following packages:
  degit
Ok to proceed? (y)

Once the project has been cloned, it should show a message similar to the following.

cloned sveltejs/template#HEAD to first-app

2. Change into the new project directory:

cd first-app

3. Install any dependencies listed in the package.json file:

npm install

Once all the dependencies have been installed, it should show a message similar to the following.

added 97 packages, and audited 98 packages in 23s

found 0 vulnerabilities

That’s it, we’re set up and ready to start learning Svelte.

tip If you’re using VS Code, you can run the command code . to open the project in the IDE.

Exploring our new Svelte project

Let’s take a quick look at what was generated with our new project so open it in your IDE.

tip If you’re using VS Code and the project isn’t already open, you can go to File > Open Folder . Navigate to your new project, select it and choose Select Folder .

In the Explorer pane of the IDE we can see all the files and folders that were generated.

my-app/
|
├── node_modules/
├── public/
├── scripts/
├── src/
|
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
└── rollup.config.js

We’ll start from the top and quickly explain each.

1. The /node_modules/ directory.

This directory is where npm stores all the packages that are required for the project to function, like Rollup etc.

tip If we share the project, or commit it to source control, we can exclude this folder.

All the packages and their dependencies are listed in the package.json file. If the node_modules folder isn’t present in our project, we can simply run the following command and NPM will reinstall everything listed in the package.json file.

npm install

2. The /public/ folder and its files.

This is where we place files that shouldn’t be processed by Svelte (or more specifically the bundler it uses).

Some examples would be:

• favicon
• PWA icons
• robots.txt
• images
• etc.

The only file that does get processed in this folder is the index.html file. Svelte injects the necessary files where the app is mounted before it copies the file over to the /public/build/ folder.

3. The /public/build/ folder and its files.

This folder doesn’t currently exist. It’s only generated when the project is run for development or built for production and contains all the files that we deploy to a server.

4. The /scripts/ folder.

The setupTypeScript.js file inside this folder helps us setup the project to be used with TypeScript . In this course, we’ll learn Svelte by using Javascript so we don’t need to worry about it for now.

5. The /src/ folder and its files.

This folder contains all our scripts, components etc. that we use to create the application. These files are compiled when we build the project to produce the files in the /public/build/ folder.

We will discuss these files and folders more throughout the following lessons.

6. The .gitignore file.

We use this file to tell GIT which files and folders should not be committed to source control. Git is out of the scope of this tutorial so we won’t be using source control in this course.

7. The package-lock.json or yarn.lock file.

Depending on which package manager we’re using, we’ll see one of these files. They ensure consistent installation of the project’s dependencies and we don’t have to worry about them at all.

8. The package.json file.

This file stores all kinds of information about the project such as the dependencies and devDependencies we mentioned earlier.

• The “dependencies” are the npm packages required for the application to work. They are included in the final build.
• The “devDependencies” are the npm packages required for the development environment to work, like the Rollup bundler. They are not included in the final build.

In here we can also see an option called “scripts”. These are the scripts we run to start the development server, perform linting operations, or build the final product.

In these key:value pairs, the key is the keyword we need to use when running the npm run command, and the value is the script that gets executed.

9. The README.md file.

This is a simple readme file in markdown and is used by Git repository hosting services like GitHub as a description for the project.

10. The rollup.config.js file.

This is the configuration for the Rollup bundler and is used when we run the development server or build the app for production.

How to run the Svelte development server

Because we cloned an existing Svelte project from Github, it already has some starter content. This means we can start up the development server right away and see the app live in the browser.

Open a new Terminal/Command Prompt and navigate to your project. Our project is at C:\SvelteProjects\first-app so the command would look as follows.

cd C:\SvelteProjects\first-app

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

From there, run the following command to start the development server.

npm run dev

If you’re using yarn as your package manager, you can run the following command instead.

yarn dev

When you start the dev server, you should see a message similar to the following.

- Local:      http://localhost:8080
- Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

[15:20:26] 200 ─ 5.57ms ─ /
[15:20:26] 200 ─ 3.57ms ─ /global.css
[15:20:26] 200 ─ 6.01ms ─ /build/bundle.css
[15:20:26] 200 ─ 2.06ms ─ /build/bundle.js
[15:20:27] 200 ─ 1.21ms ─ /favicon.png

The URL at the top is the address and port number that the dev server is running on. Go to http://locahost:8080 in your browser to see the application.

tip If you’re using VS Code, you can Ctrl + Click on the address in the terminal to open it up in your default browser.

You should see the text “Hello World”.

Your first Svelte application

If you expand the /src/ directory in the IDE’s Explorer pane, you’ll see a file called App.svelte . Double-click the file to open it in the Code Editor.

It should look something like the following.

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
main {
  text-align: center;
  padding: 1em;
  max-width: 240px;
  margin: 0 auto;
}

h1 {
  color: #ff3e00;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 100;
}

@media (min-width: 640px) {
  main {
    max-width: none;
  }
}
</style>

Don’t worry about the contents for now. Remove everything in the file, then add the following code.

<h1>Hello, Svelte!</h1>

If you save the file and take a look in the browser, you should see a big heading with the words “Hello, Svelte!”.

Next, we’ll make the text dynamic. That’s to say, we’ll make it depend on data that’s not hardcoded in the HTML.

Overwrite the previous content with the following.

<script>
  const name = 'John'
</script>

<h1>Hello, {name}</h1>

If you save the file and take a look in the browser, you should see the heading update with the words “Hello, John”.

You can add your own name between the quotes and it will update in the browser when you save the file.

Now you have a working app with dynamic data.

Finally, we’ll add some styling to the heading. Overwrite the previous content with the following.

<script>
  const name = 'John'
</script>

<h1>Hello, {name}</h1>

<style>
  h1 {
    text-align: center;
    color: #ff3e00
  }
</style>

If you save the file and take a look in the browser, the heading should now be centered and orange.

What you just made is a so-called component.

Components

Components are reusable units that each perform a single task, like a header with links around the site or form that registers a user.

We then combine these units into views (pages) that later forms a fully functional Svelte application.

A component uses the .svelte file extension and is made up of three language blocks.

• The script block contains the data and functionality for the component.
• The markup block contains the HTML markup.
• The style block contains the styling for the markup.

In Svelte, we only need to define the script and style blocks with tags. The markup block is anything outside of the other two and doesn’t have to be surrounded by any tags.

<script>
  // component functionality here
</script>

<!-- HTML markup here -->

<style>
  /* markup styling here */
</style>

You don’t have to worry about components right now, we cover them in-depth later on in the course. For now, we’ll use the App.svelte file (the root component) to learn the fundamental concepts of Svelte.