The complete code for this chapter is available on GitHub at: 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 the aforementioned 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 your operating 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 the latest Long-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 the Node 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 utilize npm as it is available with a standard Node.js installation. It is possible to use yarn in place of npm, but it is probably easier to just use npm. If you’re worried about performance, pnpm will also work.

The final tool required will be a text editor or Integrated Development Environment (IDE). The Svelte community supports many editors, but the official SvelteKit documentation recommends using Visual Studio Code (VS Code) along with 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 with Ctrl + P, type ext install svelte.svelte-vscode, and hit Enter.

In summary, you will need the following:

• A macOS, Windows, or Linux-based computer
• A modern web browser (Firefox, Chrome, or Safari)
• Terminal access
• Node.js 18+ LTS
• A package manager (npm comes installed with Node.js)
• A text editor/IDE (with the recommended Svelte extension)

To begin, open your 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 our development server:

npm create svelte@latest
npm install
npm run dev

When running the first command, you’ll be presented with several prompts. The first of these will ask you to install create@svelte to which your response should be y 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 option Skeleton project but feel free to come back and give the SvelteKit demo app a try in another directory at your convenience.

The next prompt pertains to TypeScript (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 select No. If you feel comfortable enough with TS, then by all means, select Yes. Be sure to select Yes 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 covering testing strategies.

After installing the project dependencies with npm install, we run npm run dev, which starts our development server. The output from the command should look similar to that shown in Figure 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 to http://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 appropriate npm script found in the package.json project file. Under the scripts entry, the new command would look like "dev": "vite dev –-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 the create@svelte package allow you to customize the project to your liking. Now, let’s take a look at how a typical SvelteKit project is structured.

Once you have installed a new SvelteKit project, open the project directory in your preferred editor. Within that folder, you’ll notice files that are commonly found in the root project folder of JavaScript applications such as package.json, .gitignore, and README.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/, and src/. Let’s look at them in detail in the following sections.

static/

This folder is where you may place static assets such as robots.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 here are included.

tests/

Logically, tests from the Playwright package (included in the various prompts we said yes to) are located here. To run the Playwright browser test, use the npm script npm run test. Unit tests from Vitest will be included alongside your source code. For example, if you included a file called utilities.js, unit tests for it would live alongside it as utilities.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 of this book.

src/

You will be 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 at this time:

• routes/
• lib/
• app.html

routes/

The first subfolder to take note of is src/routes/. This directory will contain most files necessary for managing SvelteKit’s file-based routing mechanism. Its sibling folder src/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 creating src/routes/about/+page.svelte containing the appropriate markup and text.

lib/

Svelte components and various other utilities can be placed in the src/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 in import statements later on as the $lib/ alias will be available throughout the application.

app.html

There are more files to cover that we will address later on, but for now, the final mention is app.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 for the application.

To recap, the static/ directory contains files that don’t frequently change, tests/ contains tests from the Playwright package, and src/ contains the source code of your project. Most Svelte components and other utilities you create can be placed at src/lib/ so as to be easily accessed via the $lib/ alias in import 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 at src/routes/. And finally, your application will need a base to build off. That’s where app.html comes in. I’m sure you’re eager to finally build something, so let’s do it.