SvelteKit Up and Running E-Book

Dylan Hildenbrand

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 219

Veröffentlichungsjahr: 2023

Beschreibung

The JavaScript ecosystem has grown vast, complex, and daunting for newcomers. Fortunately, SvelteKit has emerged, simplifying the process of building JavaScript-based web applications. This book aims to demystify SvelteKit, making it as approachable as it makes web app development.
With SvelteKit Up and Running you’ll be introduced to the philosophy and technologies underlying SvelteKit. First, you’ll follow a standard educational programming approach, progressing to a 'Hello World' application. Next, you’ll explore the fundamental routing techniques, data loading management, and user submission, all through real-world scenarios commonly encountered in day-to-day development, before discovering various adapters employed by SvelteKit to seamlessly integrate with diverse environments. You’ll also delve into advanced concepts like dynamic route management, error handling, and leveraging SvelteKit to optimize SEO and accessibility.
By the end of this book, you’ll have mastered SvelteKit and will be well-equipped to navigate the complexities of web app development.

Leseprobe

SvelteKit Up and Running

Leverage the power of a next-generation web framework to build high-performance web apps with ease

Dylan Hildenbrand

BIRMINGHAM—MUMBAI

SvelteKit Up and Running

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Jane D’Souza

Senior Editor: Aamir Ahmed

Book Project Manager: Sonam Pandey

Technical Editor: Simran Ali

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Hemangini Bari

Production Designer: Alishon Mendonca

DevRel Marketing Coordinator: Nivedita Pandey

First published: July 2023

Production reference: 1040723

Packt Publishing Ltd

Grosvenor House

11 St Paul's Square

Birmingham

B3 1R

ISBN 978-1-80461-548-5

www.packtpub.com

To my best friend and wife, Alec, whose love and support made this book possible. You inspire me to be the best person I can be.

– Dylan Hildenbrand

Contributors

About the author

Dylan Hildenbrand is a freelance web developer and open source software enthusiast who enjoys a good challenge. The past decade of experience as a full stack developer has provided him with a broad set of skills ranging all the way from system administration to frontend development. While he enjoys working with JavaScript and Node.js, he also has years of training with PHP, WordPress, and Yii2. In his spare time, he manages his homelab, which is automated using Ansible. To read more of his ramblings about web development and why Vim is the best text editor, visit https://www.closingtags.com.

I want to thank my wife, Alec, for her unwavering support over the years. I want to thank my children, Nolan and Aubrey, whose curiosity invigorates me. I also want to thank my mother, Patty, who stands as an example that inspires me to read, write, and teach others.

About the reviewer

Jimmy Hogoboom is a software engineer with over a decade of experience building and maintaining secure web applications and, in darker times, Windows Forms applications.

In his previous experience, he has designed and implemented several complex enterprise data management systems and was responsible for modernizing several ancient financial transaction processing systems (Windows Forms), which eventually pushed him into learning the big, new component-based JavaScript library at the time, which shall not be named. Since then, he has produced and deployed web applications with several different JavaScript frameworks and libraries on clients, servers, and the cloud.

Table of Contents

Preface

What is SvelteKit?

How does Vite simplify development?

Dependencies

Source code

Who is this book for?

What does this book cover?

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Share Your Thoughts

Download a free PDF copy of this book

Part 1 – Getting Started with SvelteKit

1

Initial Setup and Project Structure

Technical requirements

Prerequisites

Installing SvelteKit

SvelteKit’s Project Structure

static/

tests/

src/

Hello World Application

Summary

Resources

2

Configurations and Options

Technical requirements

Configuring SvelteKit

alias

appDir

csp

csrf

env

prerender

Configuring Vite

plugins

server

build

preview

optimizeDeps

ssr

Summary

Further Reading

3

Compatibility with Existing Standards

Technical requirements

Fetch

FormData

URL

Summary

Resources

Part 2 – Core Concepts

4

Effective Routing Techniques

Technical requirements

Creating Dynamic Pages

Creating Server Pages

load()

Page options

Actions

API Endpoints

Creating Layouts

Summary

Resources

5

Deep Dive into Data Loading

Technical requirements

Loading in Clients

Loading in Layouts

Destructuring RequestEvent

Summary

Resources

6

Forms and Data Submission

Technical requirements

Form Setup

Analyzing Actions

Database setup

Passwords and Security

Login Action

Enhancing Forms

enhance

Snapshots

Summary

Resources

7

Advanced Routing Techniques

Technical requirements

Using optional parameters

Rest parameters

Matching, sorting, and encoding – oh, my!

Matching

Sorting

Encoding

Advanced layouts

Summary

Resources

Part 3 – Supplemental Concepts

8

Builds and Adapters

Technical requirements

Creating a Build

Adapting the app

adapter-node

adapter-cloudflare

adapter-static

Summary

Resources

9

Hooks and Error Handling

Technical requirements

Using Hooks

Server hooks

Shared hooks

Error Handling

Summary

Resources

10

Managing Static Assets

Technical requirements

Importing Assets

Additional Information

Images versus Styles

Customizing Imports

File Paths

SvelteKit Configuration Options

Vite Configuration Options

Summary

Resources

11

Modules and Secrets

Technical requirements

SvelteKit Module Summaries

$app/environment

$app/forms

$app/navigation

$app/paths

$app/stores

$service-worker

Keeping secrets safe

$env/static/private

$env/static/public

$env/dynamic/private

$env/dynamic/public

Summary

Resources

12

Enhancing Accessibility and Optimizing SEO

Technical requirements

Compile-Time Checks

Announcing routes

Accessibility enhancements

SEO Tips

Summary

Resources

Appendix: Examples and Support

Technical requirements

Integrations

More Reading and Resources

SvelteKit Documentation

SvelteKit Tutorial

Svelte and SvelteKit chat

Independent Creators

Svelte Society

SvelteKit Repository

Wrapping up

Summary

Resources

Index

Other Books You May Enjoy

Part 1 – Getting Started with SvelteKit

In this part, we’ll introduce you to SvelteKit with a quick installation, followed up with the standard Hello, World! example we’ve all come to love and appreciate. This will help familiarize you with the project structure. We’ll then go on to explore the various configuration options available to further customize a SvelteKit application. From there, we’ll look at how SvelteKit leverages existing standards to deliver a small yet powerful framework.

This part has the following chapters:

Chapter 1, Initial Setup and Project StructureChapter 2, Configurations and OptionsChapter 3, Compatibility with Existing Standards

1

Initial Setup and Project Structure

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 cemented its 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 a few 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 everything in action.

To summarize, we’ll discuss these topics in this chapter:

PrerequisitesInstalling SvelteKitSvelteKit’s Project Structure“Hello, World!”

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

Technical requirements

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

Prerequisites

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 computerA modern web browser (Firefox, Chrome, or Safari)Terminal accessNode.js 18+ LTSA package manager (npm comes installed with Node.js)A text editor/IDE (with the recommended Svelte extension)

Installing SvelteKit

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.

SvelteKit’s Project Structure

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%