Made withSvelteClip

Svelte Tutorial - 3 - Project Structure

C

Codevolution

Creator on the Svelte channel

Watch on YouTube ↗

21K viewsMay 4, 20218:38 runtime

Gain a comprehensive understanding of the Svelte project structure generated by the degit template. This tutorial walks through the essential files and folders, explaining the roles of `package.json` for managing dependencies like Svelte and Rollup, the `rollup.config.js` file…

Chapters

#svelte#clip#frontend

Project Files

package.json: Defines project metadata, scripts, and dependencies.
- dependencies: Contains packages needed for the running application (e.g., sirv-cli for serving files).
- devDependencies: Contains packages for development and build steps (e.g., svelte, rollup). Svelte itself is a dev dependency because it compiles away and isn't bundled in the final production code.
- scripts: Defines command-line shortcuts like dev, build, and start.
rollup.config.js: The configuration file for the Rollup module bundler, which compiles your Svelte code into standard JavaScript that browsers can understand.
yarn.lock / package-lock.json: Auto-generated files that lock down the exact versions of your dependencies to ensure consistent installations across different environments.

Project Folders

node_modules/: Contains all the installed dependency packages.
public/: Holds all the static assets that will be served directly to the browser.
- index.html: The single HTML page for your Single Page Application (SPA). Its <body> tag is initially empty and is the target for Svelte to render the application's UI.
- global.css: A stylesheet for global styles that apply to the entire application.
- build/: This subfolder contains the compiled and bundled output from Rollup (bundle.js and bundle.css).
scripts/: Contains setup scripts, in this case, a file for optional TypeScript integration.
src/: The main folder for your application's source code.
- main.js: The entry point of the Svelte application. It imports the root component (App.svelte) and mounts it to the <body> of index.html.
- App.svelte: The root component file. A .svelte file encapsulates the HTML, CSS, and JavaScript for a specific UI component.

Application Control Flow

The sequence of events when you run yarn dev:

The dev script in package.json is executed, which starts Rollup in watch mode.
Rollup compiles the code from src/ (including main.js and App.svelte) into public/build/bundle.js.
A local server (sirv) serves the public/ directory.
The browser loads index.html.
index.html loads <script src='/build/bundle.js'></script>.
The JavaScript in bundle.js (originating from main.js) executes, creating a new instance of the App component and rendering it inside the <body> tag of the page.

Important
Svelte controls the DOM inside the <body> tag. main.js acts as the bridge, telling Svelte where to inject the application. The index.html file is just a host for the compiled JavaScript bundle.

Introduction to Svelte Project Structure

In the last video, we saw how simple it is to create and run a basic Svelte application. Now, it's also really important that you understand the files and folders present in the generated project and how the control flows when you run the application. Let's take a look at that in this video.

Exploring package.json

I have opened the Hello World project in VS Code, and you can see that at the root level, we have four folders and five files to begin with.

Let's start with the important bits in package.json. This file contains the dependencies and the scripts required for the project. You can see that we are using Svelte version 3, and that is listed as a dev dependency. Svelte is only used during the compilation phase and never bundled into the code that is sent to the browser.

We then have Rollup, which is a module bundler, and a whole load of Rollup plugins listed as dev dependencies. Rollup is responsible for transforming the Svelte code we write into JavaScript code that the browsers can understand. There is one dependency, which is the sirv-cli. It allows us to run a static file server. We also have three scripts: dev for development, build to create a production-ready version of the application, and start for the sirv-cli to serve the built application. A straightforward package.json file, as you can see.

Configuration and Lock Files

Next, we have the configuration file for Rollup: rollup.config.js. This is the config file that is used when we run the command yarn dev or yarn build. If you're interested in the various configurations, I recommend you take a look at Rollup documentation.

Next, we have the yarn.lock file. Based on whether you prefer npm or yarn as a package manager, you're going to see yarn.lock or package-lock.json files. They simply ensure consistent installation of your dependencies, and you don't really have to worry about them. We also have a .gitignore and a README file.

The node_modules and public Folders

Alright, next, let's talk about the folders. The first one is node_modules. This is the folder in which all the dependencies are installed. It is generated when you run the yarn command or npm install command.

The next folder is the public folder. This folder contains static assets that are published when you want to go live with your application. It contains three files. We have a favicon which you see in the browser tab and is nothing Svelte-specific. We also have a global.css file which includes styles that are applied to our entire application. And finally, we have an index.html file, which is the only HTML file you're going to have in your application. We are building single page applications, and this is it. The view might dynamically change in the browser, but it is this HTML file that gets served up. Typically, you are not going to add any code in this file, maybe some changes in the head tag, but definitely not in the body tag. You want Svelte to control the UI.

And for that purpose, we have a CSS and JS file: /build/bundle.css, /build/bundle.js. These files are from the build folder, which get generated when you run or build your application. Now, please make a note of this empty body tag, as we will come back to it shortly.

The scripts and src Folders

The next folder is the scripts folder, which contains a file pertaining to TypeScript setup. Since we are going to learn Svelte with just JavaScript, we don't have to worry about this for now.

The final folder is the src folder, which is the folder we will be working with the most during development. The starting point for our Svelte application is main.js. In main.js, we import the root component, which is App component, and invoke it as a function, specifying the document body as the target element. And if you can recollect, we have an empty body element in our index.html file. So everything inside this body tag will be managed by Svelte. For the Hello World application, the App component is rendered inside the body element.

That brings us to the App component, which is present in App.svelte. Now, the .svelte file extension, I bet, is something new to you if you are learning about Svelte for the first time. We will talk about the .svelte files in the next video, but for now, let me tell you that it is a file where you specify the HTML, CSS, and JavaScript corresponding to a portion of the UI you see in the browser. You can see here we have a script block with a variable called name. For the HTML, we have the main HTML tag with an h1 tag and a paragraph tag. This is the text we see in the browser. Below the HTML, we also have some styles specified within a style block. The App.svelte file pretty much represents the UI you see in the browser.

Application Control Flow Explained

So that is the folder structure of a Svelte application created using the degit command.

Next, let's understand the control flow when you run this application in the terminal. When you run the command yarn dev, the index.html file is served in the browser. index.html contains a reference to bundle.js. The bundle.js file is your main.js file compiled to a JavaScript format that the browser can understand. The Svelte code renders itself within the body tag. So if I inspect the heading element, you can see the main tag as a child of the body tag. This is nothing but our App component. The name, of course, is the name from main.js, which gets replaced in the HTML because of the Svelte compiler. So Hello {name}... replace name with world, which is Hello world. And that is what you see in the browser.

We will, of course, learn more about this Svelte magic in the videos to come, but this is pretty much the control flow from package.json dev script to index.html, bundle.js script, to main.js, and finally App.svelte.

Now, I'm pretty sure this file extension, which is .svelte, is new to you. So let's discuss more about that in the next video. Thank you guys for watching. Make sure to subscribe to the channel. I'll see you guys in the next one.