I’ve been developing web applications for almost a decade now and the landscape has changed drastically since I began. To put that in reference, I’ve been building websites since JavaScript was so poorly supported by mainstream browsers that jQuery became the de facto standard for building interactive frontend experiences. But over time, we’ve seen more browsers willing to support ECMAScript standards and the ones that didn’t have died off (good riddance, Internet Explorer). JavaScript then re-emerged as a viable language. And with the rise of Node.js, developers could finally build an entire application, both frontend and backend, in a single programming language. JavaScript had taken over the web development world and firmly cementedits foothold.

As the technologies have matured, so too have development experiences. With the arrival of SvelteKit 1.0, we developers are given an intuitive experience allowing us to couple frontend and backend logic together in a way that leaves us wondering, “How did we do this before?” Before we dive into that experience, we’ll need to cover afew things.

Firstly, we’ll cover the prerequisites for developing applications with SvelteKit. We’ll then move on to how SvelteKit is installed and discuss how projects are typically structured. From there, we’ll build a “Hello, World!” application so we can see everythingin action.

To summarize, we’ll discuss these topics inthis chapter:

• Prerequisites
• Installing SvelteKit
• SvelteKit’sProject Structure
• “Hello, World!”

After covering all of this material, you should be reasonably comfortable setting up a new SvelteKit application for yournext project.

The complete code for this chapter is available on GitHubat:https://github.com/PacktPublishing/SvelteKit-Up-and-Running/tree/main/chapters/chapter01

To get the most out of this book and ensure you retain the information provided, it is recommended to work alongside the material as you read it. Type the commands and code shown into your project, but also feel free to experiment. To do this effectively, you will need a computer running Windows, macOS, or a Linux-based operating system as well as access to a terminal or command-line interface. Most modern computer hardware capable of running the latest versions of theaforementioned operating systems should be sufficient for your needs. Specifically, you’ll need a system with a minimum of 1 GB of RAM and at least a 1.6 GHz processor. This should work just fine for developing with SvelteKit, though performance may vary for youroperating system.

Like many other web development projects, you’ll also need a web browser. The latest version of Firefox, Chrome, or Safari is recommended. You will also need to install Node.js. It is recommended to use thelatestLong-Term Support (LTS) version, which, at the time of writing this book, is version 18. An alternative and often easier method of managing Node.js installation is theNode Version Manager (NVM) project. It allows users to easily install and change versions of Node.js. See the end of this chapter for resources related to both Node.js and NVM. Alongside that, you will also need a package manager. This book will utilizenpm as it is available with a standard Node.js installation. It is possible to useyarn in place ofnpm, but it is probably easier to just usenpm. If you’re worried about performance,pnpm willalso work.

The final tool required will be a text editor orIntegrated Development Environment (IDE). The Svelte community supports many editors, but the official SvelteKit documentation recommends usingVisual Studio Code (VS Code) alongwith the Svelte extension. While it is not required, it can certainly ease the pain of dealing with the different syntaxes found in Svelte components. To install Svelte for VS Code, launch VS Code Quick Open withCtrl +P, typeext install svelte.svelte-vscode, andhitEnter.

In summary, you will needthe following:

• A macOS, Windows, orLinux-based computer
• A modern web browser (Firefox, Chrome,or Safari)
• Terminal access
• Node.js18+ LTS
• A package manager (npm comes installedwith Node.js)
• A text editor/IDE (with the recommendedSvelte extension)

To begin, openyour terminal or command-line interface and navigate to a directory where you are comfortable starting a new project. From there, we’ll run three simple commands. The first will create a new SvelteKit project with various prompts to initialize the application, the second will install dependencies, and the third will start ourdevelopment server:

npm create svelte@latestnpm installnpm run dev

When running the first command, you’ll be presented with several prompts. The first of these will ask you to installcreate@svelte to which your response should bey for yes. When prompted to select a directory to install the project in, leave the option blank to use the current directory (or specify the directory if you’d prefer to). You’ll then be asked which template to use. We’ll be working primarily with the optionSkeleton project but feel free to come back and give theSvelteKit demo app a try in another directory atyour convenience.

The next prompt pertains toTypeScript (TS) usage, for which SvelteKit has excellent support. However, to keep the focus of this book on SvelteKit itself and to appeal to developers that may not yet be familiar with TS, we will be using plain JavaScript. As such, to properly follow along with this text, you should selectNo. If you feel comfortable enough with TS, then by all means, selectYes. Be sure to selectYes for ESLint and Prettier support as they will very likely save you headaches and further improve your development experience. It is also recommended to include supported testing packages, but this book will not be coveringtesting strategies.

After installing the project dependencies withnpm install, we runnpm run dev, which starts our development server. The output from the command should look similar to that shown inFigure 1.1.

Figure 1.1 – Showing the output from the Vite development server

Notice how quickly Vite starts our development server. Even though this is a bare-bones application, other bundling tools would have taken multiple seconds whereas Vite was ready in under one second. As shown in the output displayed in the terminal, the site can be viewed by navigating tohttp://localhost:5173/ in your browser. If you would like to access the site from a device other than your development machine, for instance, on a mobile device, then you may append–-host to the appropriatenpm script found in thepackage.json project file. Under thescripts entry, the new command would look like"dev": "vitedev –-host".

We’ve just covered the installation process for SvelteKit. At this point, it should be trivial for you to install your own SvelteKit-based project. We’ve covered how the various prompts from thecreate@svelte package allow you to customize the project to your liking. Now, let’s take a look at how a typical SvelteKit projectis structured.

Onceyou have installed a new SvelteKit project, open the projectdirectory in your preferred editor. Within that folder, you’ll notice files that are commonly found in the root project folder of JavaScript applications such aspackage.json,.gitignore, andREADME.md, as well as configuration files pertaining to SvelteKit (svelte.config.js) and Vite (vite.config.js). You’ll also notice three subfolders:static/,tests/, andsrc/. Let’s look at them in detail in thefollowing sections.

static/

This folder is where you may place static assets such asrobots.txt (your guidelines for search engine site crawlers), static images such as favicons, or even a global CSS style sheet. These files should be able to be served “as is.” Files located in this folder will be available to your application logic as if they existed in the root folder of your project, that is,/robots.txt. You can also access them by prefixing the file path with%sveltekit.assets%. Note that if files here are changed, you may need to manually refresh the page to see changes. In some cases, you may even need to restart your development server as Vite has strong opinions about caching. You should not attempt to access files included in this directory programmatically. Rather, the paths should be “hardcoded” wherever the assets hereare included.

tests/

Logically, tests from the Playwright package (included in the various prompts we saidyes to) are located here. To run the Playwright browser test, use the npm scriptnpm run test. Unit tests from Vitest will be included alongside your source code. For example, if you included a file calledutilities.js, unit tests for it would live alongside it asutilities.test.js. Vitest is a package from the developers of Vite that enables simple testing for Vite-based applications.Test-Driven Development (TDD) is an excellent practice to follow to ensure code performs as it is expected to. However, it is beyond the scope ofthis book.

src/

You willbe spending most of your time working in this folder as this is where the core logic for a SvelteKit application lives. There are a few files and directories that should be taken note of atthis time:

• routes/
• lib/
• app.html

routes/

The firstsubfolder to take note of issrc/routes/. This directory will contain most files necessary for managing SvelteKit’s file-based routing mechanism. Its sibling foldersrc/params/ will be covered later on, but for now, assume most logic related to managing the routes of your application is located here. As a brief example, if you’d like to add a static “about” page, then you would do so by creatingsrc/routes/about/+page.svelte containing the appropriate markupand text.

lib/

Svelte components and various other utilities can be placed in thesrc/lib/ subfolder. This folder may not be present in the skeleton project template so you’ll have to add it on your own. It will be shown in the SvelteKit demo app. By placing your components here, you can easily reference them inimport statements later on as the$lib/ alias will be available throughoutthe application.

app.html

There aremore files to cover that we will address later on, but for now, the final mention isapp.html. This file serves as the base for the rest of your application to build off of. When opened, you’ll notice it contains references to%sveltekit.head%, which SvelteKit uses for injecting various script and link tags, and%sveltekit.body%, which is used for injecting the markup generated forthe application.

To recap, thestatic/ directory contains files that don’t frequently change,tests/ contains tests from the Playwright package, andsrc/ contains the source code of your project. Most Svelte components and other utilities you create can be placed atsrc/lib/ so as to be easily accessed via the$lib/ alias inimport statements. If you’d like to add a new route to your application URL, you can do so by creating a+page.svelte file inside a directory with the corresponding name atsrc/routes/. And finally, your application will need a base to build off. That’s whereapp.html comes in. I’m sure you’re eager to finally build something, so let’sdo it.

Now that weknow a bit about what we’re looking at in a freshly initialized SvelteKit project, it seems appropriate to build a “Hello, World!” application. We’ll begin by openingsrc/routes/+page.svelte in our editor. At this point, it should only contain basicHTML code:

<h1>Welcome to SvelteKit</h1><p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

Since this file lives directly inside thesrc/routes/ directory and not a sub-directory, it is available in the browser as the URL's root route (i.e.,/). If we were to create a new folder within the routes directory (i.e.,src/routes/hello/) and place another+page.svelte file inside of that (i.e.,src/routes/hello/+page.svelte), then we would make the/hello route available as a valid URL for our app. We’ll cover more advanced routing techniques in later chapters, but for now, just know that to add a new route, you’ll need to create a folder using the desired route name in theroutes directory as well as a+page.svelte file.

Svelte Components

Readers familiar with Svelte will have noticed that the+page.svelte file extension is that of a Svelte component. That’s becauseit is a Svelte component! As such, we can adjust the HTML in it, customize the look with CSS in<style> tags, write JS inside of<script> tags, and import other Svelte components. If you’re unfamiliar with Svelte components, it’s recommended to learn at least the basics before continuing further. Check outSvelte 3 Up and Running byAllessandro Segala or visit the official Svelte website (https://svelte.dev) formore information.

Let’s make some changes tosrc/routes/+page.svelte to see what’s happening. Change the inner text of the<h1> tag to readHello, World!,like so:

<h1>Hello, World!</h1>

Thanks to Vite, the page in our browser is updated immediately after saving. If your setup has dual monitors available with code shown on one and your browser on the other, you’ll quickly see how valuableHot Module Replacement (HMR) can be. The change we’ve made is all well and good, but it isn’t really a “Hello, World!” application if users can’t change the text. For a true “Hello, World!” example, we need to show some text that has been provided by the user. The following code is an implementation showingjust that:

<script>  let name = 'World';</script><form>  <label for="name" >What is your name?</label>  <input type="text" name="name" bind:value={name} /></form><h1>Hello, {name}!</h1>

This simple Svelte component creates a variable namedname with the default value of “World.” From there, the HTML gives us a basic form binding the text input value to our variable and outputting the text inside an HTML<h1> tag. Thanks to Svelte’s reactivity and the binding of the text input value to thename variable, the text provided is shown immediately, even as itis typed.

Figure 1.2 – The output from our “Hello, World!” component

In this chapter, we discussed some of the prerequisite knowledge and tools needed for getting started with SvelteKit. You likely already had a computer running a capable operating system with a browser installed. You may even have had the latest LTS version of Node.js installed with thenpm package manager. We also briefly touched on getting your editor prepared by installingSvelte-specific extensions.

We continued by covering the installation process of SvelteKit. The prompts provided during the installation make setting up a new SvelteKit project simple and easily customized to adeveloper’s liking.

After the project installation, we took a high-level look at SvelteKit’s project structure. While thetests/ andstatic/ directories are fairly straightforward, some nuances lie within thesrc/ folder. For instance, keeping various Svelte components and other utilities in thesrc/lib/ folder can help keep a project from becoming difficult to navigate. Components located there are also easily accessed across application code via the$lib/ alias.

We also created a rudimentary “Hello, World!” application. It showcased how simple SvelteKit makes it to start building an applicationfrom scratch.

In the next chapter, we’ll go over some of the various configuration options you may need to tweak in both SvelteKit and Vite to customize them to suityour needs.

• Node.js:https://nodejs.org
• NVM:https://github.com/nvm-sh/nvm
• SvelteKit:https://kit.svelte.dev
• VSCode:https://code.visualstudio.com/