Giter VIP home page Giter VIP logo

learn.svelte.dev's Introduction

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).

learn.svelte.dev's People

Contributors

rich-harris avatar dummdidumm avatar tomoam avatar zerotask avatar ghostdevv avatar geoffrich avatar puruvj avatar mateusabelli avatar ivanbtrujillo avatar 7hemech avatar kshyun28 avatar baderj avatar jpaquim avatar morinokami avatar gtm-nayan avatar rdickert avatar rubenf07 avatar seangates avatar shahar-cohen avatar smgestupa avatar monooso avatar samal-rasmussen avatar futantan avatar tillschander avatar timnikolsky avatar pedroldk avatar brokenthorn avatar giacomo-folli avatar nicholas-wilcox avatar mouise1111 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.