Introduction to Svelte (1 of 3)

This is a three-part tutorial on using Svelte. See Part 2

From the Svelte home page, https://svelte.dev/:

“Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.”

With Svelte, we build components. Each component file contains HTML, CSS, and Javascript. In this series, I’ll cover all of this. Let’s start at the beginning.

Set Up

For this project, I’m using VS Code. Use the editor of your choice.

1. Once you have started VS Code, it is time to set up svelte.

2. You can use the integrated command line tool by pressing Ctrl+tilde or selecting View from the top menu and then selecting Terminal.

3. In the terminal window enter:

npx degit sveltejs/template my-svelte-project (my-svelte-project is just a name, use something else if you like)

4. When that command complete change directory to my-svelte-project

5. In the terminal window enter:

npm install

6. When that command completes enter

npm run dev

7. In the terminal window you will see something like:

Your application is ready~! �🚀 — Local: http://localhost:5000

..8. You may Ctrl+Click on http://localhost:5000 or enter that in your browser to see the basic application. In your browser you should see something like below to show it is working:

Back to VS Code. You can see in the File Explorer a number of items have been added. Starting at the top:

* node_modules folder
* public folder
* src folder
* .gitignore file
* package-lock.json file
* package.json file
* README.md file
* rollup.config.js file

We’ll look at these one at a time.

* node_modules — This folder contains the javascript library files the application uses. Only a babel JSON file is there now.

* public — This folder contains a build folder consisting of the compiled Javascript and CSS files along with map files for debugging. More on that later. It also includes:
* favicon.png: an image file displayed in the browser tab next to the title
* global.css: a Cascading Style Sheet file containing the styles applied to the project as a whole. More on this later.

* index.html: This is the starting file loaded for the application. It holds some meta tags, a title, some links to the icon and CSS files, and a script tag linking to the compiled javascript. We’ll cover the index.html file in detail later.

* src — this folder contains a UI folder containing some application components provided for examples of components for use in our applications. We’ll cover these in detail later. This src folder is where we will place most of the code we write for our application. In the src folder is a subfolder. UI, and two files. App.svelte, and main.js.

Inside the UI are seven svelte component files. We’ll cover those in following blog posts.
* App.svelte — This file is our main component. The one that loads all of our application components. We will cover that in detail soon.

* main.js: This is the file that loads the App.svelte file and kicks off the application.

* .gitignore: This is a listing of files that do not get included in the source code control, if you are using one.

* package-lock.json: It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

* package.json: This file holds various metadata relevant to the project.

* README.md: This is the read me file included with the project.

* rollup.config.js: This is a module bundler the describes how to compile, bundle, and deploy the code to the public directory.

This concludes the initial look at Svelte. In the next blogs we will cover the provided UI components.

Thanks for reading.

The complete App.svelte is listed below:

For a more in-depth look at Svelte, you can take a look at my book Web Development for Seniors and Juniors, https://amz.run/3O37.