Skip to content

Commit ce72d50

Browse files
BigABBigAB
committed
Add base SvelteKit setup to main branch
1 parent 831c80b commit ce72d50

18 files changed

+3267
-0
lines changed

‎.eslintignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.eslintrc.cjs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
parser: '@typescript-eslint/parser',
4+
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
5+
plugins: ['svelte3', '@typescript-eslint'],
6+
ignorePatterns: ['*.cjs'],
7+
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
8+
settings: {
9+
'svelte3/typescript': () => require('typescript')
10+
},
11+
parserOptions: {
12+
sourceType: 'module',
13+
ecmaVersion: 2020
14+
},
15+
env: {
16+
browser: true,
17+
es2017: true,
18+
node: true
19+
}
20+
};

‎.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
.vercel
10+
.output
11+
vite.config.js.timestamp-*
12+
vite.config.ts.timestamp-*

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎.prettierignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"pluginSearchDirs": ["."],
8+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9+
}

‎README.md

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Delightful Web Development with SvelteKit
2+
3+
### SvelteKit Workshop by [This Dot Labs](https://thisdot.co)
4+
5+
Clone this repository to get started with the workshop.
6+
7+
## Recommended IDE Setup
8+
9+
[VS Code](https://code.visualstudio.com/) + [Svelte Extension Pack](https://marketplace.visualstudio.com/items?itemName=1YiB.svelte-bundle).
10+
11+
## Module Branches
12+
13+
There are different branches for each module and sub-module in the workshop. You can checkout the branch for the module you are working on by running the following command:
14+
15+
```bash
16+
git checkout module-1
17+
18+
git checkout module-2.2
19+
```
20+
21+
If you get stuck, you can checkout the branch with the appended `-solution` to the name. Solution branches are provided for each module and submodule.
22+
23+
Branches:
24+
`module-1`
25+
`module-1-solution`
26+
`module-2.1`
27+
`module-2.1-solution`
28+
`module-2.1.1-parallel-loading` (no solution branch)
29+
`module-2.2`
30+
`module-2.2-solution`
31+
`module-2.3`
32+
`module-2.3-solution`
33+
34+
## Workshop Outline
35+
36+
### Module 1: Svelte and SvelteKit
37+
38+
Learn about the relationship between Svelte and SvelteKit, what SvelteKit brings to the table.
39+
40+
In this module we will cover:
41+
42+
- Svelte and SvelteKit
43+
- Setting up a new SvelteKit application for development
44+
45+
### Module 2: Routing
46+
47+
SvelteKit provides robust filesystem-based routing for your application.
48+
49+
In this module we’ll learn about:
50+
51+
- SvelteKit’s directory driven filesystem-based router
52+
- Loading data for SvelteKit pages
53+
- SvelteKit’s Layouts and Error Pages
54+
55+
### Module 3: Even more Routing
56+
57+
To be as flexible as possible, SvelteKit provides many routing features so you can create the URL structure you need
58+
59+
- Rest params, optional params and breaking out of layouts
60+
- Routing Matchers
61+
- Route Priority
62+
63+
### Module 4: Server Side Svelte
64+
65+
SvelteKit allows you to restrict and isolate code to only ever be run on the server, never exposing it to the client. With that understanding we will learn about:
66+
67+
- Using Secrets and Environment Variables
68+
- Creating API endpoints
69+
- SvelteKit Hooks
70+
71+
### Module 5: Forms
72+
73+
SvelteKit’s approach to forms and data mutation is simple: use the platform, then progressively enhance the experience. To facilitate that we will explore:
74+
75+
- Handling for submissions with SvelteKit Actions
76+
- Enhancing forms with JavaScript on the client
77+
78+
### Module 6: Deployment
79+
80+
SvelteKit offers many options for how to build your site for production all the way down to the page level. In this module we’ll discuss:
81+
82+
- SvelteKits Page Options
83+
- Adapters
84+
85+
### [Course Prerequisites]
86+
87+
- Computer with internet access
88+
- A microphone and a webcam
89+
- An IDE of choice (we will be using Visual Studio Code)
90+
- Version 16+ or newer of Node installed on your computer
91+
- Basic understanding of HTML and CSS
92+
- Good understanding of JavaScript / TypeScript (all the examples will be in Typescript)
93+
- Previous Knowledge of Svelte - the component framework SvelteKit is built on top of - is recommended

0 commit comments

Comments
 (0)