# How to develop in Svelte using SvelteKit

## New and Old Concepts

### CustomCode Folder
Here we will place all of our code, to keep clean the environment

#### Components
This is the folder where we'll make our components. 

Each file will have its component, so don't make more than 1
component in the same file


Beware of not 
make them all in the same folder, but to create subfolder to keep 
code that logically is similar in the same folder: 

```bash
# This is ok
Components/
 +--Buttons/
 |  +--MyButton1
 |  +--MyButton2

# this is NOT
Components/
 +--MyButton1
 +--MyButton2

# this is NOT either (but at least better than the previous)
Components/
 +--MyButton1/
 |   +--MyButton1.svelte
 +--MyButton2/
 |   +--MyButton2.svelte
```

#### Utils
Here we'll put some JS code as an Internal library.

This folder will have pure code, so no components here.
As always, make folders according to a concept.

Here it is **ENCOURAGED** to group code with similar meaning, 
to avoid **Ravioli** code. However, if too long, consider splitting 
the file is some smaller ones, to avoid **Spaghetti** code

## Making new components
Follow guide on [Svelte Components](https://svelte.dev/tutorial/svelte/your-first-component)

However, we basically have 3 main components following this order:
- `<script>`: Where the Component code resides 
- HTML tags: Where we define our html
- `<style>`: Where the Component style resides

In svelte CSS for the single component is written inside the `<style>` tags and do 
not influence other components

## Making new Pages
Pages are basically special `Components` and **MUST** be done according to this Tutorial: [Svelte Pages](https://svelte.dev/tutorial/kit/pages)

But to make it simple, folders represent routes and `+page.svelte` is the main view.
These are case sensitive
```bash

routes/
 +--+page.svelte #http://mydomain.com/
 +--about/
 |   +--+page.svelte #http://mydomain.com/about
```
## Developing
Once you start the container, it will install all the dependencies on a Volume
called `UserFrontend-NodeModules-Cache` to have all of your modules here and not
share it with your **host amchine** as binaries for libraries are different

Wait for `npm install` to finish before pressing `F5`

or run:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.