https://github.com/crispengari/svelte-startup
📁 This repository is a svelte startup for cybernatically enhanced web apps.
https://github.com/crispengari/svelte-startup
css html javascript nodejs scss ssr sveltejs typescript webapplications
Last synced: 3 months ago
JSON representation
📁 This repository is a svelte startup for cybernatically enhanced web apps.
- Host: GitHub
- URL: https://github.com/crispengari/svelte-startup
- Owner: CrispenGari
- License: mit
- Created: 2022-07-12T13:29:41.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T08:43:40.000Z (almost 4 years ago)
- Last Synced: 2025-04-03T18:52:02.992Z (over 1 year ago)
- Topics: css, html, javascript, nodejs, scss, ssr, sveltejs, typescript, webapplications
- Language: Svelte
- Homepage:
- Size: 164 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Svelte Startup
This repository contains some Svelte applications for cybernatically enhanced web applications.
### Getting Started
First you have to make sure that you have node.js installed on your computer together with the package manager. In my case i will use `yarn` but feel free to use the package manager that you want like `npm`. For the code editor i will be using VSCode so first thing that i will do is to download the `Svelte` extenstion for VSCode and install i. I will download an extenstion called `"Svelte for VS Code"` After installing it go to the settings and edit the `settings.json` and add the following to the `.json` file:
```json
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
```
> After you have done that you need to reload the window.
To create a new svelte application you wll run the following command:
```shell
yarn create svelte 01_GETTING_STARTED
# npm
npm create svelte 01_GETTING_STARTED
```
Then you need to answer some couple of questions then next you need to run the following commands:
```shell
cd 01_GETTING_STARTED
# yarn
yarn
yarn run dev
# npm
npm install
npm run dev
```
Then a svelte application will be running on port `3000` and can be accessed at http://localhost:3000/.
We will be working mostly in the `src` folder where there's a `routes` folder by default. Like in next.js a file name is a page router in this folder. So for a home page `/` a file name is `index.svelte`
In a `svelte` file we will have the following structure
```svelte
console.log("Hello world")
Hello world
```
### Layout
In svelte we can create a file called `__layout.svelte` in the routes folder. This is where our common layout components will stay. This is also a good place to import our `global.css` file. The `__layout.svelte` file may look as follows in svelte.
```svelte
import "../styles/global.css";
import Footer from "../components/Footer.svelte";
import Nav from "../components/Nav.svelte";
My app
```
So the rest of the code from the pages will leave in the ``.
### Refs
1. [svelte.dev](https://svelte.dev/)
2. [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
3. [kit.svelte.dev](https://kit.svelte.dev/docs/introduction)