Learn.svelte

pinch24

Svelte.js Learning Project

Download

learn.svelte.js

Svelte.js Learning Project

Tutorial https://svelte.dev/tutorial/basics

Documentation https://svelte.dev/docs

Examples https://svelte.dev/examples

REPL https://svelte.dev/repl

Start Svelte.js

Install Home-brew

Install Node.js

Create Svelte App Directory

~/learn.svelte.js/ $ mkdir svelte-app
~/learn.svelte.js/ $ cd svelte-app

Clone Svelte.js Template

~/svelte-app/ $ npx degit sveltejs/template           
Need to install the following packages:
  degit
Ok to proceed? (y) 
> cloned sveltejs/template#HEAD
~/svelte-app/ $

NPM Install

~/svelte-app/ $ npm install

added 97 packages, and audited 98 packages in 13s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/svelte-app/ $

NPM Run

~/svelte-app/ $ npm run dev

> [email protected] dev
> rollup -c -w

rollup v2.62.0
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 106ms

[2021-12-26 13:35:45] waiting for changes...

> [email protected] start
> sirv public --no-clear "--dev"


  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Test

~/svelte-app/ $ curl localhost:5000
~/svelte-app/ $                                 <- Error 403

~/svelte-app/ $ curl 127.0.0.1:5000
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>
~/svelte-app/ $

Top categories