Table of Contents

Preface

Chapter 1: Meet Svelte

Modern web app development  12

How the web became static…again  12

Building apps with the JAMstack  14

Why Svelte?  21

Svelte versus the other frameworks  21

The Svelte project  22

Building a journaling app  24

App features  24

The back-end service  25

Summary  26

Chapter 2: Scaffolding Your Svelte Project

Setting up your environment  28

Installing Node.js  28

Setting up Visual Studio Code  31

Launching the back-end service  33

Scaffolding our project  34

Using a bundler  36

Scaffolding your project with Webpack  36

Installing dependencies from NPM  36

Configuring NPM scripts  37

Configuring Webpack  37

"Hello, Svelte!"  39

Creating the App component  39

The application's entrypoint  40

Compiling for production  43

Debugging Svelte applications  44

Using the Visual Studio Code debugger  44

Browser extension  46

Summary  47

Chapter 3: Building Reactive Svelte Components

Adding requirements  50

Dependencies  50

Utilities  51

The main.js file  51

The dotenv file  53

The stores.js file  54

The index file  54

Svelte templates and reactivity  55

Renderer.svelte component  55

Obj.svelte component  60

Calendar.svelte component  65

Bindings and events  66

AddForm.svelte component  66

ViewAdd.svelte component  70

Summary  74

Chapter 4: Putting Your App Together

Managing cross-component state  76

Svelte stores  76

Navbar.svelte component  80

Completing the app  82

Transitions  84

Svelte transitions  84

Adding transitions to our app  85

Other useful Svelte features  86

Slots  86

Actions  87

Lifecycle methods  89

Meta-elements  91

Summary  92

Chapter 5: Single-Page Applications with Svelte

Routing on the browser  94

Inspecting our makeshift router  95

Two approaches to client-side routing  97

Routing with hash-based routing  99

Defining the routes object  99

Updating the App component  100

The ViewNotFound.svelte component  101

Updating the ViewAdd component  102

Updating the List component  103

URL parameters – updating the ViewObject component  103

Updating the Navbar.svelte component  104

Navigating around the app  105

Automated testing for Svelte apps  106

Setting up the test environment  107

Creating tests  108

Running tests  109

Linting and enforcing style conventions  110

Adding ESLint  110

Configuring ESLint for your style  111

Running the linter  112

ESLint in Visual Studio Code  113

Summary  115

Chapter 6: Going to Production

Options to deploy your Svelte apps  118

Alternative services  118

Deploying to object storage  120

Creating an Azure account  120

Authenticating with the Azure CLI  121

Creating the storage account   122

Uploading files to your Azure storage account  124

Browsing the app from Azure Storage  125

Adding the CDN  125

Mapping a custom domain  126

The back-end service  129

Continuous Integration/Continuous Delivery  132

Putting our app's code on GitHub  132

Creating a GitHub action to deploy the app  136

Managing and destroying your resources  141

Summary  142

Chapter 7: Looking Forward

The Svelte ecosystem and community  144

Official websites and documentation  144

Svelte community website  144

Community support and connections  145

Sapper  146

More JAMstack resources  146

Summary  149

Other Books You May Enjoy

Leave a review - let other readers know what you think  153