File structure of Svelte apps
Tags: svelte, javascript, tutorial
Published: 2021-08-02 21:33:55

Hi again, the last time we talk about [Getting Started with Svelte](https://dev.to/benjithorpe/getting-started-with-svelte-406k).
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](https://stackoverflow.com/questions/63294260/what-is-the-purpose-of-node-modules-folder) or [what is node_modules used for](https://www.reddit.com/r/node/comments/9o5fzk/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](https://stackoverflow.com/questions/21719562/how-to-use-javascript-source-maps-map-files)

* `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](https://www.typescriptlang.org/) 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](https://nodejs.dev) 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](https://nodejs.dev/learn/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](https://nodejs.dev/learn/the-package-json-guide).


### README.md
Just a file for documentation purpose or showing other devs how to contribute to your project or how to run it.


### rollup.config.js
It's a file that contains the configuration scripts so that your files can be optimized(bundled) for runtime.

> [Rollup](https://rollupjs.org/guide/en/) is a module bundler.
Read more about module bundler [here](https://javascript.plainenglish.io/intro-to-module-bundlers-fd3df36925e5) or [how module bundlers work](https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2) or you can [learn how  to create a module bundler](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/) 


### Conclusion
Thanks for reading, I hope this article helped you.

#### Bonus resources
- [Top 5 JavaScript module bundlers](https://betterprogramming.pub/top-5-javascript-module-bundlers-for-2021-e6fe17657fb)
- [Readme.so](https://readme.so/) to create easy README.md files