Learn SvelteKit - Pre-Requisite Skills & Environment Setup

#Introduction

Welcome to the Learn SvelteKit series! This series will take you from mastering SvelteKit — the full-stack framework for Svelte — from foundational concepts all the way to production readiness. There are 24 episodes in total, organized into six phases.

But before you touch npm create svelte, there are a few core skills and software you must have. Why do these pre-requisites matter? Because SvelteKit stands on three things at once: the markup and styling language, namely HTML and CSS; the programming language, namely JavaScript; and the concept of component-based reactive UI. If even one of them is shaky, everything else will feel like it's floating.

Episode 0 is your roadmap: we will confirm your core skills, set up Node.js and an editor, get to know SvelteKit's tooling, and then run a first verification. Once this episode is done, you'll be able to follow the entire series comfortably.

Throughout this series, every episode is designed to build on the previous one: each concept builds on the concepts before it. If a part ever feels like it jumps ahead, go back to the preceding episode — everything is deliberately staged step by step.

#Core Skills You Must Master

#HTML, CSS, and Modern JavaScript

SvelteKit produces HTML and CSS written with Svelte's component syntax. You should feel comfortable reading HTML tag structures, understand the box model as well as flexbox and grid in CSS, and master JavaScript ES6+ such as arrow functions, destructuring, spread operator, async/await, and module import and export.

const format = (nama, versi) => `SvelteKit ${versi} untuk ${nama}`;
export default format;

If the pattern above still feels foreign, take a moment to deepen your modern JavaScript before moving on to the next episode.

#Reactive Programming and Component-Based UI

Svelte uses a compiler-based reactivity model: not a virtual DOM, but code that gets compiled into lightweight imperative JavaScript. The concepts you must understand before getting into SvelteKit:

• State and re-render: data changes must be reflected in the UI automatically.
• Props and events: components communicate through inputs and outputs.
• Lifecycle: when components are created, mounted, and destroyed.

#Command Line, Git, and Package Manager

Every episode will run commands in the terminal. You must be able to cd and mkdir, and be comfortable reading error output. Git is used for versioning, and a package manager like npm for managing dependencies. If you're already familiar with Bun or pnpm, the concepts are the same.

#Software You Need to Prepare

#The Latest Node.js LTS

SvelteKit 2 requires Node.js version 18.13 or 20 and above. The recommendation at the time this series was written is the latest stable LTS version. Download it from the official nodejs.org website or manage it with Node Version Manager so you can easily switch versions without disrupting other projects.

node --version
npm --version

The output of node --version should show version 20 or newer. If it doesn't, install it via Node Version Manager so you can easily switch versions. The process is simple: install nvm, then run nvm install --lts and nvm use --lts in your terminal.

#IDE: VS Code with the Svelte Extension

VS Code is the most comfortable choice for Svelte. Install the Svelte for VS Code extension, which provides syntax highlighting, auto-completion, and diagnostics for .svelte files. For projects that also touch Vue, the Volar extension can be installed as a complement, though it isn't required for SvelteKit. Make sure the Svelte extension is connected to the right workspace so autocomplete works at its best.

#Modern Browser and the SvelteKit CLI

Use a modern browser like Firefox or Chrome with full-featured devtools. Project creation uses npm's built-in CLI:

npm create svelte@latest nama-aplikasi

The command npm create svelte@latest nama-aplikasi will show an interactive wizard that we'll dissect in detail in episode 3.

The same CLI scaffolder will be used again in episode 3, so for now it's enough to understand its purpose: asking SvelteKit to scaffold a project structure for you.

#Verifying Your Environment

Before moving on, make sure everything is ready with a quick verification:

node -v
npm -v
git --version

If all three commands above print a version without errors, your basic environment is ready. Additionally, make sure you have at least 8GB of RAM so the dev server, browser, and editor run comfortably at the same time. Re-verify after switching Node versions so there are no PATH conflicts between old and new versions.

If your environment isn't ready yet, don't hesitate to repeat the steps above. Fixing your setup early is far cheaper than chasing errors whose root cause is the wrong Node version.

#Summary of Skills to Master

Here's a recap of the pre-requisites you've prepared in episode 0:

• JavaScript ES6+ with the habit of using modern patterns.
• Reactivity concepts and component-based UI.
• Node.js LTS version 20 or newer, complete with npm.
• VS Code with the Svelte extension as your primary editor.
• A modern browser (Firefox or Chrome) for devtools and daily testing.
• Git installed for versioning throughout the series.
• A terminal you're comfortable with for running daily commands.

If anything is still missing, stop and complete it before continuing. A strong foundation will make the next 23 episodes feel much lighter.

#Closing

Key takeaways:

• SvelteKit is a full-stack framework built on top of Svelte, so master JavaScript basics and components first.
• Reactivity in Svelte is compiler-based, not a virtual DOM.
• Prepare Node.js LTS at version 20 or newer, VS Code with the Svelte extension, and Git.
• The primary package manager in this series is npm, with Bun or pnpm as alternatives.
• Verify your environment with node -v, npm -v, and git --version.
• At least 8GB of RAM lets the dev server and browser run comfortably.

In the next episode we'll discuss the history, background, and why you need SvelteKit — from the birth of Svelte as a compiler that throws away the virtual DOM, the birth of SvelteKit as a full-stack meta-framework, to its comparison with other frameworks. Make sure your environment is ready, because the Learn SvelteKit journey has only just begun!