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:

• Prerequisites
• Installing SvelteKit
• SvelteKit’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.