Initial Working Commit

README.md

@@ -1,22 +1,82 @@
-# sv
+# How to develop in Svelte using SvelteKit
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+## New and Old Concepts
 
-## Creating a project
+### CustomCode Folder
+Here we will place all of our code, to keep clean the environment
 
-If you're seeing this, you've probably already done this step. Congrats!
+#### 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
-# create a new project in the current directory
+# This is ok
-npx sv create
+Components/
+ +--Buttons/
+ |  +--MyButton1
+ |  +--MyButton2
 
-# create a new project in my-app
+# this is NOT
-npx sv create my-app
+Components/
+ +--MyButton1
+ +--MyButton2
+
+# this is NOT either (but at least better than the previous)
+Components/
+ +--MyButton1/
+ |   +--MyButton1.svelte
+ +--MyButton2/
+ |   +--MyButton2.svelte
 ```
 
-## Developing
+#### Utils
+Here we'll put some JS code as an Internal library.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+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