Svelte Typescript Workshop
Svelte Typescript workshop
This project is a self contained workshop to get started with Svelte using Typescript. Get from zero to having a grasp of what Svelte offers by following the steps in this repository.
This workshop is an overview based on the Svelte tutorial, and it's intended as a quick dive into Svelte, to get a developer quickly up to speed with Svelte and creating the first components right away.
What you will build?
Beatiful transitions, captioning effects, all making sure the user feels in control of the application. Too much trouble to build? Just go through this workshop to see for yourself.
How to use this repository
This workshop is divided in steps, each with its own branch. Start with the main branch, then step-1, step-2, ... Each branch has a README.md which proposes:
- Problem to solve
- Instructions to achieve the solution
- Expected outcome
For starter, this is the proposition for the first step:
Problem to solve
How to start a new Svelte project?
Instructions to achieve the solution
To generate a project, we're going to use a Svelte template, to speed things up and get you right to coding. I've created a typescript template that works with the official typescript plugin for VS Code
npx degit ladraum/svelte-typescript-vscode-template svelte-typescript-workshop
cd svelte-typescript-workshop
npm install
npm run dev
Expected outcome
Having a Svelte ready project to start coding with. It should look like this:
Now check out the step-1 branch for the next step.
TLDR
For an even quicker overview, check the differences for each step:
