Book Image

SvelteKit Up and Running

By : Dylan Hildenbrand
Book Image

SvelteKit Up and Running

By: Dylan Hildenbrand

Overview of this book

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.
Table of Contents (19 chapters)
1
Part 1 – Getting Started with SvelteKit
5
Part 2 – Core Concepts
10
Part 3 – Supplemental Concepts

Using optional parameters

Since we teased optional parameters in the Creating Dynamic Pages section of Chapter 4, let’s start there. When creating optional parameters in a route, there are some things to keep in mind. For instance, they cannot exist alongside another route as this would cause a collision in the routing rules. When creating an optional route, it works best for instances where the final portion of the route can have a default option. Many applications will change the URL based on a language selected by the user. For our example, we’ll illustrate how to create an optional parameter by selecting a country in North America that our demonstration store operates in. We won’t actually build an entire store but rather use it to illustrate the advanced routing concepts in this chapter.

To begin, let’s create a new route in our navigation just like we have for previous examples:

src/lib/Nav.svelte

<nav>
  <ul>
 ...