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:

# 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

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

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

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:

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:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.