Preface
Svelte is a modern JavaScript framework used to build static web apps that are fast, lean, and are fun for developers to use. This book is a concise and practical introduction for those who are new to the Svelte framework. It will get you up to speed with building apps quickly, and teach you how to use Svelte 3 to build apps that offer a great user experience (UX).
The book starts with an introduction to Svelte 3, before showing you how to set up your first complete application with the framework. Filled with code samples, each chapter will show you how to write components using the Svelte template syntax and the Application Programming Interfaces (APIs) of the Svelte framework. As you advance, you'll go from scaffolding your project and tool setup, all the way to production with DevOps principles such as automated testing, Continuous Integration, and Continuous Delivery (CI/CD). Finally, you'll deploy your application in the cloud with object storage services and a Content Delivery Network (CDN) for best-in-class performance for your users.
By the end of this book, you'll learn how to build and deploy apps using Svelte 3 to solve real-world problems and deliver impressive results.
Who this book is for
This book is for front-end or full-stack developers who are looking to build modern web apps with Svelte 3. This book assumes a solid understanding of JavaScript and core HTML5 technologies. Basic understanding of modern front-end frameworks (for example Angular, React, Vue) will be beneficial, but not necessary.
What this book covers
Chapter 1, Meet Svelte, After covering what modern web development looks like, with concepts such as JAMstack and Single-Page Apps (SPAs), we introduce the Svelte 3 framework and explain how it differs from other popular frameworks like Angular and React: how it can lead to smaller bundles and faster apps. We will also introduce the goal of the book, which is to create a sample app for creating your own journal.
Chapter 2, Scaffolding Your Svelte Project, Before we dive into building the app, we will go through the steps to install all the required tools, such as Node.js and Visual Studio Code (optional). We will then scaffold the project, create the folder structure, and setup Webpack. Lastly, we will create a "hello world" app with Svelte 3 and run it locally with a development server, to verify that our setup is complete and correct.
Chapter 3, Building Reactive Svelte Components, In this chapter, we'll start building the Svelte components that our journaling app uses. In the process, we will learn about the syntax used by Svelte templates, and concepts such as binding and events.
Chapter 4, Putting Your App Together, As we create the last components that our app depends on, we will learn about Svelte stores and transitions. We will then look into other features of the Svelte 3 language and runtime, including a more advanced one.
Chapter 5, Single-Page Applications with Svelte, In the first part of this chapter, we'll focus on building Single-Page Apps (SPAs) with Svelte 3, including implementing client-side routing (and we'll look at the two main options for doing that, and when to use which). In the second part, we'll briefly look into creating automated tests for our apps using Nightwatch.js. Lastly, we'll add ESLint to the project and configure it to enforce styling conventions.
Chapter 6, Going to Production, We'll end our journey by bringing the app to production. We'll cover how to serve the app from object storage (Azure Blob Storage) with a CDN in front. We'll also look at pushing our code to GitHub and adding Continuous Integration and Continuous Delivery using GitHub Actions, to automatically build, test, and deploy our app.
Chapter 7, Looking Forward, This chapter looks at what's next for readers, and how they can progress in their knowledge of developing JAMstack apps with Svelte 3.
To get the most out of this book
To build the app described in this book using Svelte 3, you will need a PC or laptop running Windows (7 or higher), a recent version of macOS, or Linux (any commonly used distribution).
In Chapter 2, Scaffolding Your Svelte Project as we set up our tooling, we'll guide you through the installation of Node.js and optional tools such as Visual Studio Code.
While Svelte 3 officially requires Node.js 8 or higher, my recommendation is to use the latest Long-Term Support (LTS) version; at the time of writing, this is version 12.
If you're on Windows, whenever possible we recommend using Windows 10 and leverage the Windows Subsystem for Linux; we'll cover this in the book as well.
If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packt.com.
- Select the Support tab.
- Click on Code Downloads.
- Enter the name of the book in the Search box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR/7-Zip for Windows
- Zipeg/iZip/UnRarX for Mac
- 7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Svelte-3-Up-and-Running – shortened to https://bit.ly/sveltebook In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "After importing all the requisite modules, we define the prod variable, which is true if we're building the application for production, as determined from the NODE_ENV environmental variable."
A block of code is set as follows:
const mode = process.env.NODE_ENV || 'development'
const prod = mode === 'production'
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
AUTH_CLIENT_ID=00000000-0000-0000-0000-000000000000
API_URL=http://localhost:4343
AUTH_JWKS_URL=http://localhost:4343/jwks
AUTH_URL=http://localhost:4343/authorize?client_id={clientId}&response_type=id_token&redirect_uri={appUrl}&scope=openid%20profile&nonce={nonce}&response_mode=fragment
AUTH_ISSUER=http://svelte-poc-server
KEY_STORAGE_PREFIX=svelte-demo
Any command-line input or output is written as follows:
$ NODE_VERSION="v12.18.3"
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "From that page, fetch the Windows Installer (.msi) for the LTS version, selecting the correct architecture of your operating system."
Tips or important notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at customercare@packtpub.com.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.