Svelte: Setting Up the Project

Overview

In this article, we will walk through the process of setting up a Svelte project. By the end of this, you’ll have a working Svelte environment on your machine and will be ready to start developing applications.

Prerequisites

Node.js: Ensure you have Node.js installed. You can download the latest version from Node.js official website.
npm or Yarn: You will also need npm (comes with Node.js) or Yarn as the package manager.

Step 1: Installing Svelte Locally

To start a new Svelte project, follow these steps:

Create a New Project
Open your terminal and run the following command:
```
 npx degit sveltejs/template svelte-app
```
This command uses degit to download the official Svelte project template and sets it up as a new project in the svelte-app folder.
Navigate into the Project Directory
After creating the project, navigate into the project folder:
```
 cd svelte-app
```
Install Dependencies
Install all the dependencies required for the project using npm or Yarn:
```
 npm install
```
or, if you’re using Yarn:
```
 yarn
```

Step 2: Exploring the Project Structure

Once the installation is complete, you will notice a basic structure in your project folder. Let’s break it down:

src/: This is where all your application logic resides. Your Svelte components will live here.
public/: Contains static assets like index.html and other resources such as images and fonts.
package.json: This file lists all the dependencies for your project and includes important scripts for building and running your app.
rollup.config.js: Svelte uses Rollup as its default bundler. This config file sets up how your app will be bundled for development and production.

Step 3: Running Your First Svelte App

To check that everything is working correctly, run the development server:

npm run dev

or with Yarn:

yarn dev

This command will start a local server, and you can access your Svelte app in the browser at http://localhost:5000.

Modifying the App Component

Open the src/App.svelte file and you’ll see the default code generated by Svelte. You can modify it and see changes in real-time as the app is automatically recompiled.

<script>
  let name = 'world';
</script>

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

Try changing the name variable and see how Svelte reactivity works!