Development environment: Node.js, Vite, SvelteKit and Git¶

Exercise dev-environment-annex.pdf · PDF

Open the Figma prototype of your app and press play. Type in a text field. You cannot: it is a picture of a text field. Can your prototype save anything? Can it count? Can it fail?

A prototype is a drawing that pretends. From now on you build the real thing: same design, now with a brain. Your first goal is small and non-negotiable: an app of yours, running in the browser and saved in Git.

The kitchen¶

You wrote the menu in Figma. To cook it you need a kitchen, and a kitchen is several machines. We keep this kitchen all page.

And if you burn the dish? Git (Linus Torvalds, 2005) keeps a photo of the project at every commit, so you can always go back. It is the kitchen camera.

flowchart LR
    F["<b>.svelte files</b><br>what you write<br>(the recipes)"] -->|"compiled by"| S["<b>Svelte</b><br>(recipe language)"]
    S -->|"served by"| V["<b>Vite</b><br>(kitchen line)"]
    V -->|"plain HTML, CSS, JavaScript"| B["<b>Browser</b><br>(the customer)"]
    N["<b>Node.js</b><br>(the stove)"] -.->|"runs"| S
    N -.->|"runs"| V
    M["<b>npm</b><br>(the supplier)"] -.->|"downloads"| S
    M -.->|"downloads"| V

Two more mix-ups to clear now. Node.js is not a language: the language is JavaScript, and Node.js is the program that runs it outside the browser. And SvelteKit does not replace Svelte: it uses it. Svelte is for components; SvelteKit is for pages, navigation and data.

Connect to your kitchen¶

Your kitchen is not in your house. You work on a virtual machine (VM): a computer of your own, in a data centre, that you reach over the network. Every tool on this page runs there, not on the classroom PC, so wherever this page says "your PC" or "your machine", read "your VM". You only need VS Code, and it talks to the VM through SSH, a secure way of working on a remote computer.

1. Go to vms.iessonferrer.com and press Start on your VM, name-di with your name. It takes a few minutes. When it is ready, the page shows your password.
2. In VS Code, install the extension Remote - SSH (ms-vscode-remote.remote-ssh).

3. Press F1, choose Remote-SSH: Connect to Host... and type your machine, with your name in both places:

   name-di@name-di.iessonferrer.com
   

4. If it asks for the platform, choose Linux. The first time it asks Are you sure you want to continue connecting: accept.

5. Type the password from that page. It may ask more than once.
6. Open a terminal (Terminal → New Terminal) and type hostname. It answers with your VM's name.

The bottom-left corner of VS Code now says SSH: name-di.iessonferrer.com, with your name. If the connection times out, your VM is off: start it again. VMs stop by themselves at 22:00, and your work is kept. They only answer from Spain, so turn any VPN off.

Check the stove¶

In that terminal, ask each tool for its version:

node -v     # v22.17 or higher
npm -v
git --version

SvelteKit 3 needs Node.js 22.17 or newer. If you install Node.js at home, take the LTS (Long Term Support, the version that gets fixes for years). Node.js 26 has been the LTS since 28 October 2026; 24 is an older LTS and works just as well for this course.

Create the project¶

Go to your work folder and run one command:

cd ~/dam2
npx sv create notebox --template minimal --no-types --no-add-ons --install npm

npx downloads a tool and runs it without installing it. sv is the official Svelte command-line tool. The rest of the line answers the questions sv would otherwise ask you:

The first time, npm asks for permission. The version number you see may be newer:

Need to install the following packages:
sv@1.2.0
Ok to proceed? (y)

Press Enter. No other question follows. sv installs the packages and finishes with a What's next? box that shows the two commands of the next step.

Now start it:

cd notebox
npm run dev -- --open

npm run dev starts Vite. The -- passes --open on to Vite, which asks for your browser to open at localhost:5173. You see "Welcome to SvelteKit". If nothing opens, type the address yourself.

Where is this page coming from? The internet? Not the public one. localhost always means this computer, and Vite is running on your VM, not on the PC in front of you. So VS Code does port forwarding: it listens on port 5173 of your PC and carries each request through its SSH connection to the VM.

flowchart LR
    B["<b>Browser</b><br>asks localhost:5173<br>(the customer)"] -->|"on your PC"| C["<b>VS Code</b><br>forwards port 5173<br>(the delivery rider)"]
    C -->|"SSH, over the network"| V["<b>Vite on your VM</b><br>serves the page<br>(the kitchen line)"]

Close VS Code or lose the network and the page goes.

Now press Ctrl+C in the terminal and reload the browser: the page is gone. Run npm run dev again: it is back. The server lives only while that terminal runs it. Open a second terminal tab for everything else.

The project map¶

In the VS Code terminal, type code . to open the folder and accept the recommended extension, Svelte for VS Code. Then look around. Most of what you see is the kitchen's wiring.

You will also see package-lock.json (the exact version of every package, written by npm) and a hidden .svelte-kit/ (generated by SvelteKit). You edit neither.

Nearly all your work this term happens inside src/.

First edit¶

Replace everything in the home page with this, using your own name:

<h1>NoteBox</h1>
<p>Your notes, in one box.</p>
<p>Made by Ada Lovelace · DAM2</p>

Save with Ctrl+S and look at the browser, not at the editor. It changed by itself, with no reload.

Hot module replacement (HMR): Vite notices the saved file, Svelte recompiles only that file, and the browser swaps it in while the page stays open.

Remember Nielsen's first heuristic from usability heuristics? Visibility of system status. Here the tool gives you, the developer, instant feedback.

Now break it on purpose. Delete the > of </h1> and save. A red overlay appears in the browser with the file, the line and the message Expected token >. Fix it and the overlay goes. Would you rather have this error or a white page?

First commit¶

In the second terminal tab, inside notebox/:

git init
git add -A
git commit -m "Create NoteBox with SvelteKit"

If Git answers "Please tell me who you are", it needs a name to sign the photos. Run these once and commit again:

git config --global user.name "Ada Lovelace"
git config --global user.email "ada@iessonferrer.net"

Now check what went in. git status says there is nothing to commit (nothing to commit, working tree clean, or the same in Spanish if your PC is set that way). git log --oneline shows one line.

Here is a puzzle. Your project folder weighs about 55 MB. Your commit holds 14 files, and the whole history takes under 350 KB. Where is the rest?

Open .gitignore. Its first line is node_modules. The packages are not stored, because they do not need to be: package.json says what to download, and npm install downloads it again.

Now build the habit. Change your name line, save, and run:

git status
git add -A
git commit -m "Update author line"

git status shows one modified file, and git log --oneline now shows two lines. Make one commit per finished step, with a message that says what changed.

To put your project on GitHub, create an empty repository there and copy its URL. Then:

git branch -M main
git remote add origin <url>
git push -u origin main

The commands so far¶

If something fails¶

Your turn¶

The handout at the top of this page takes you through all of this step by step. Then do it once more, for yourself: create your own app's project the same way, make its home page show the app's name and one sentence, and commit. You will fill that project in during this unit.

Key takeaways¶

• Node.js runs JavaScript on your PC, npm brings the packages, Vite serves and builds, Svelte compiles, SvelteKit organises, Git remembers.
• You work on a VM through VS Code and SSH. npx sv create makes the project and npm run dev runs it.
• localhost always means this computer. Port forwarding carries localhost:5173 from your PC to your VM, only while you are connected and the server runs.
• Nearly all your work happens in src/, starting with src/routes/+page.svelte. You never edit node_modules/.
• HMR swaps in your saved change without a reload, and a red overlay points at your mistakes.
• A commit is a photo of the project: git add -A, then git commit -m "...". One commit per finished step.
• node_modules/ stays out of Git, because package.json and npm install rebuild it.

Quick check¶

Your app runs, but it is three sad lines. Next you write your first component and it starts to look like NoteBox: Component syntax.