Initializing a Svelte Project

Initializing a Svelte Project

If you have used the tools Create React App or Vue CLI, then the next steps will be familiar to you. Svelte has adopted a similar approach, making it very easy to initialize a boilerplate project.

In the previous lesson, we created a parent directory called school-lunch. From the command line in that directory run the following:

Note: The above command requires Git to be installed. On Windows systems, you may want to use Git Bash for this command.

Note: Please consider upgrading NPM itself to version 8.x or higher and Node to 16.x or higher if you have older versions.

In this command, vite is a project scaffolding tool that will create a new folder called frontend and scaffold a new Svelte project inside it with some basic source files, a package.json file for dependencies and a roll-up config file for production builds.

We only need two more commands to start running the Svelte front end in a hot-loading local development environment.

Go ahead and run these:

If you are running the latest version of NPM, you may get dependency tree errors when running npm install. You can try npm install --force to force the installation and continue. Further information about NPM behavior regarding dependencies is discussed here: https://stackoverflow.com/questions/66020820/npm-when-to-use-force-and-legacy-peer-deps.

You should see a few messages as NPM installs the required dependencies from package.json, and then the following output from the local development server:

Open up your browser and navigate to http://localhost:5000. Behold, you are now running a Svelte app!

Svelte Hello World

The Hot-Loading Development Environment#

One of our favorite advancements in development tooling is the hot-loading local development environment. When working with Svelte and running the local development environment (npm run dev) it will attempt to automatically load any source code changes into your web browser.

To see this in action, open up VSCode to the school-lunch project folder. Locate the file /frontend/src/main.js and open it in the editor.

vscode-hello-world

Change the name property from world to me and save the file. Then head over to your browser which should automatically refresh the page with the new property name.

Boilerplate Clean-Up#

Let's do some clean-up and remove things that we won't need from the boilerplate project.

  1. In main.js, remove the props object:

  1. Since we removed the name prop above, open App.svelte and remove the references to name:

Also, remove the entire <style> section. We will revisit styles later.

  1. Under /frontend/public delete the file global.css:

  1. In index.html, remove the reference to global.css:

Finishing Up#

Nice job! We have initialized a Svelte project and done a little clean-up of the boilerplate example code. In the next lesson, we'll install and configure some tools to help keep our code formatted and clean.

Start a new discussion. All notification go to the author.