99 lines
2.6 KiB
Markdown
99 lines
2.6 KiB
Markdown
# 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.
|