File structure of Svelte apps

#svelte #javascript #tutorial

Hi again, the last time we talk about Getting Started with Svelte.
Today we dive into the file structure of Svelte apps.

Once you install the packages, the structure should look like this:

my-app
│    
└── node_modules
│   └─ bin
│   │ ...
└── public
│   └─ build
│      │  bundle.css
│      │  bundle.js
│      │  bundle.js.map
│   favicon.png
│   global.css
│   index.html
└── scripts
│   │  setupTypeScript.js
└── src
│   │  App.svelte
│   │  main.js
│   .gitignore
│   package-lock.json
│   package.json
│   README.md
│   rollup.config.js

If you are scared, don't be! You won't touch 80% of them.

Now let's discuss the use of each folder and file.

node_modules folder

In simple terms, these are just folders of all the tools(extra libraries or packages) the application needs to function. They are installed based on what is in the package.json file (will talk more on that later).

please never delete it or any folder in it. In-fact never look at it :).
Read about the-purpose-of-node-modules-folder or what is node_modules used for

public folder

Just like the name states, it's a public folder, basically can be accessed from anywhere.
But what about the files and folders in it?

build

The build folder contains all the optimized code that is sent to the browser when the app needs to run.
bundle.css for optimized CSS code
bundle.css for optimized JavaScript code
bundle.js.map I can't say what it is for but after some research, a stackoverflow response had this:

The .map files are for JS, CSS and ts(typescript) files that have been minified. They are called SourceMaps... When your app is in production, and has an error, the sourcemap will allow you to see the original version of the code...

You can read the full post here

favicon.png the default favicon provided by svelte
global.css the general styles you want all your components to have (talk more about components later.)
index.html the default page where you components will be added by JavaScript

You can change the favicon and the styles in the global.css. You would hardly mess with the index.html file, except when you want to add SEO tags or import CSS libraries.
Or in general, when you want to mess with the <head> tag

scripts folder

This folder contains setup for typescript, if you don't plan on using TypeScript then just forget about it or delete the folder.

src folder

The most important folder. It contains everything (code) the whole app will need to display (run).

By default, it only has main.js and App.svelte files inside.

In simple terms, the main.js file tells the svelte compiler on which tag to display the output. It's a bit hard to explain, but you will hardly touch this file.
Will talk more about the App.svelte file when we get to components.

.gitignore

If you have been using git, you would know this file contains folders or files you don't want to share with other developers or don't want to upload to GitHub.

Just leave it as it is for now.

package-lock.json

On the Nodejs website, they said:

The goal of package-lock.json file is to keep track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if packages are updated by their maintainers.
Read more about the package-lock.json file

package.json

In my opinion, it just contains the tools to install for the project to work.

Remember when we did npm install? It looks in this file and install all the libraries the app requires to run.
Read more on how to work with the package.json file.