Initializing a Svelte Project

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.

In this command, degit 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:

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.

Please select a discussion on the left.