sveltejs/learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte

Svelte

534

526 commits

updated Aug 14, 2024

See the code

See what people are saying

SourceMessageScoreDate

I don't quite get how this reactivity is only possible with a VDom, for example Svelte https://learn.svelte.dev/tutorial/updating-arrays-and-object... also allows you to update the UI on changes to the array.

on VanillaJSX.com

0

Aug 17, 2024

Looks great! I am working on some similar concepts but for music programming: https://glicol.org I feel that it would be great if there could be some examples on the landing page directly. When I try a lesson, I get stuck; The hint is on the right but it's not very obvious; perhaps you can…

on Show HN: New visual language for teaching kids to code

0

Nov 21, 2023

Oh! I forgot one of the best parts! CSS is automatically scoped to your component. No manual shenanigans. No weird naming rules your dev team have to agree on. No giving up and just using inline styles. No hacks. Just make a descriptive class name and write your CSS styles. That's it. You're done.…

on Things I wish I knew before moving 50K lines of code to React Server Components

0

Sep 2, 2023

https://learn.svelte.dev/

on Things I wish I knew before moving 50K lines of code to React Server Components

0

Sep 1, 2023

The SvelteKit Tutorial

1

Aug 14, 2023

try the tutorial? https://learn.svelte.dev/tutorial/introducing-sveltekit

on How to build a website without frameworks and tons of libraries

0

Jul 5, 2023

You would be hard pressed to find a functional difference between a SvelteKit project compiled with adapter-static and a "Create React App" app. If you have any concrete differences, do share them. They're functionally equivalent (except a SvelteKit project is a lot lighter in JS due to the…

on Svelte 4

0

Jun 22, 2023

Can someone point me to a concise location of getting a development environment setup for Docker. Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development. I found Svelte for…

on Svelte 4

0

Jun 22, 2023

As for routing, I guess that gets unmanageable pretty fast. Just in the sample blog tutorial here [0], you get confused with the number of files and nested folders that has same file names as level above. [0] https://learn.svelte.dev/tutorial/params

on Thoughts on Svelte(Kit), one year and 3B requests later

0

Jun 22, 2023

The docs don't seem to suggest using it for non-trivial things without hyperscript. https://htmx.org/docs/ They do suggest being able to use it without learning a lot of hyperscript, but I see the same with Svelte, where you can get by on copying and pasting a great deal. https://learn.svelte.dev/

on htmx

0

May 26, 2023

README

learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte.

Setup

This repo uses pnpm.

Developing the app

First, run node scripts/create-common-bundle. This packages up everything that's needed to run a SvelteKit app (Vite, esbuild, SvelteKit, Svelte compiler, etc.) which can subsequently be unpacked on a server to create and run an instance of a SvelteKit application (which powers the output window of the tutorial). Then, run dev:

node scripts/create-common-bundle
pnpm dev

To build for production and run locally:

pnpm build
pnpm preview

Creating new tutorials

Tutorials live inside content. Each tutorial consists of a README.md, which is the text to the left, and app-a and app-b folders, which represent the initial and solved state. Files that stay the same can be omitted from app-b. Files are marked as deleted in app-b if they start with __delete. Folders that are marked as deleted in app-b if they contain a file named __delete.

Bumping tutorial dependencies

Bump the dependency (for example Svelte) in both the root and the content/common package.json. In the root do pnpm i (to update pnpm-lock.yaml), in content/common do npm i (to update package-lock.json).

sveltejs/learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte

Svelte

534

526 commits

updated Aug 14, 2024

See the code

See what people are saying

SourceMessageScoreDate

I don't quite get how this reactivity is only possible with a VDom, for example Svelte https://learn.svelte.dev/tutorial/updating-arrays-and-object... also allows you to update the UI on changes to the array.

on VanillaJSX.com

0

Aug 17, 2024

Looks great! I am working on some similar concepts but for music programming: https://glicol.org I feel that it would be great if there could be some examples on the landing page directly. When I try a lesson, I get stuck; The hint is on the right but it's not very obvious; perhaps you can…

on Show HN: New visual language for teaching kids to code

0

Nov 21, 2023

Oh! I forgot one of the best parts! CSS is automatically scoped to your component. No manual shenanigans. No weird naming rules your dev team have to agree on. No giving up and just using inline styles. No hacks. Just make a descriptive class name and write your CSS styles. That's it. You're done.…

on Things I wish I knew before moving 50K lines of code to React Server Components

0

Sep 2, 2023

https://learn.svelte.dev/

on Things I wish I knew before moving 50K lines of code to React Server Components

0

Sep 1, 2023

The SvelteKit Tutorial

1

Aug 14, 2023

try the tutorial? https://learn.svelte.dev/tutorial/introducing-sveltekit

on How to build a website without frameworks and tons of libraries

0

Jul 5, 2023

You would be hard pressed to find a functional difference between a SvelteKit project compiled with adapter-static and a "Create React App" app. If you have any concrete differences, do share them. They're functionally equivalent (except a SvelteKit project is a lot lighter in JS due to the…

on Svelte 4

0

Jun 22, 2023

Can someone point me to a concise location of getting a development environment setup for Docker. Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development. I found Svelte for…

on Svelte 4

0

Jun 22, 2023

As for routing, I guess that gets unmanageable pretty fast. Just in the sample blog tutorial here [0], you get confused with the number of files and nested folders that has same file names as level above. [0] https://learn.svelte.dev/tutorial/params

on Thoughts on Svelte(Kit), one year and 3B requests later

0

Jun 22, 2023

The docs don't seem to suggest using it for non-trivial things without hyperscript. https://htmx.org/docs/ They do suggest being able to use it without learning a lot of hyperscript, but I see the same with Svelte, where you can get by on copying and pasting a great deal. https://learn.svelte.dev/

on htmx

0

May 26, 2023

README

learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte.

Setup

This repo uses pnpm.

Developing the app

First, run node scripts/create-common-bundle. This packages up everything that's needed to run a SvelteKit app (Vite, esbuild, SvelteKit, Svelte compiler, etc.) which can subsequently be unpacked on a server to create and run an instance of a SvelteKit application (which powers the output window of the tutorial). Then, run dev:

node scripts/create-common-bundle
pnpm dev

To build for production and run locally:

pnpm build
pnpm preview

Creating new tutorials

Tutorials live inside content. Each tutorial consists of a README.md, which is the text to the left, and app-a and app-b folders, which represent the initial and solved state. Files that stay the same can be omitted from app-b. Files are marked as deleted in app-b if they start with __delete. Folders that are marked as deleted in app-b if they contain a file named __delete.

Bumping tutorial dependencies

Bump the dependency (for example Svelte) in both the root and the content/common package.json. In the root do pnpm i (to update pnpm-lock.yaml), in content/common do npm i (to update package-lock.json).

Significant stargazers

Paolo Ricciuti

326 followers · starred Sep 2023

Tropical

280 followers · starred Jul 2022

Jeff Yang

66 followers · starred Jul 2022

Ivan Kozik

274 followers · starred Jan 2023