Table Of Content.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Svelte 3
Up and Running
A fast-paced introductory guide to building
high-performance web applications with SvelteJS
Alessandro Segala
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
20 BIRMINGHAM—MUMBAI
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Svelte 3 Up and Running
Copyright © 2020 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.
Commissioning Editor: Pavan Ramchandani
Acquisition Editor: Rohit Rajkumar
Senior Editor: Richard Brookes-Bland
Content Development Editor: Keagan Carneiro
Technical Editor: Deepesh Patel
Copy Editor: Safis Editing
Project Coordinator: Kinjal Bari
Proofreader: Safis Editing
Indexer: Tejal Daruwale Soni
Production Designer: Jyoti Chauhan
First published: August 2020
.d Production reference: 2241120
e
vre
se
r sth Published by Packt Publishing Ltd.
g
ir llA Livery Place
.de 35 Livery Street
tim
iL ,g Birmingham
n
ih
silb B3 2PB, UK.
u
P
tkca ISBN 978-1-83921-362-5
P
.0
2
0
2 © www.packt.com
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
To those who made this book possible:
Maria Grazia, Francesco, and Clare, for their continued support.
All the people who contribute to open source projects and build incredible
things like Svelte.
– Alessandro Segala
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos, as
well as industry leading tools to help you plan your personal development and advance
your career. For more information, please visit our website.
Why subscribe?
• Spend less time learning and more time coding with practical eBooks and Videos
from over 4,000 industry professionals
• Improve your learning with Skill Plans built especially for you
• Get a free eBook or video every month
• Fully searchable for easy access to vital information
• Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at packt.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
[email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters, and receive exclusive discounts and offers on Packt books
and eBooks.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Contributors
About the author
Alessandro Segala is a Product Manager at Microsoft working on developer tools. He
has over a decade of experience building full-stack web applications, having worked
as a professional developer as well as contributing to multiple open source projects.
Alessandro is the maintainer of svelte-spa-router, one of the most popular client-side
routers for Svelte 3.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
About the reviewer
Russell Jones is an enthusiastic software engineer, who spends most of his time
programming in Javascript. He is a Founder of Functional, Inc and has been building
web applications since the 1990s. Russ lives in Portland, Maine, with his two children,
Ailee and Coda, who are his greatest engineering achievements. Pre-COVID, Russ spent
most of his time in coffeeshops smiling at the locals and making keyboard noises in the
corner. These days, Russ simply spends too much time playing video games.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.
packtpub.com and apply today. We have worked with thousands of developers and
tech professionals, just like you, to help them share their insight with the global tech
community. You can make a general application, apply for a specific hot topic that we
are recruiting an author for, or submit your own idea.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Table of Contents
Preface
1
Meet Svelte
Modern web app development 12 Building a journaling app 24
How the web became static…again 12 App features 24
Building apps with the JAMstack 14 The back-end service 25
Why Svelte? 21 Summary 26
Svelte versus the other frameworks 21
The Svelte project 22
2
Scaffolding Your Svelte Project
Setting up your environment 28 "Hello, Svelte!" 39
Installing Node.js 28 Creating the App component 39
Setting up Visual Studio Code 31 The application's entrypoint 40
.d Launching the back-end service 33 Compiling for production 43
e
vre
se Scaffolding our project 34 Debugging Svelte applications 44
r sth
gir llA Using a bundler 36 Using the Visual Studio Code debugger 44
.de Scaffolding your project with Browser extension 46
tim
iL Webpack 36 Summary 47
,g
n
ihsilb Installing dependencies from NPM 36
uP Configuring NPM scripts 37
tkca Configuring Webpack 37
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
ii Table of Contents
3
Building Reactive Svelte Components
Adding requirements 50 Renderer.svelte component 55
Dependencies 50 Obj.svelte component 60
Utilities 51 Calendar.svelte component 65
The main.js file 51
Bindings and events 66
The dotenv file 53
AddForm.svelte component 66
The stores.js file 54
ViewAdd.svelte component 70
The index file 54
Summary 74
Svelte templates and reactivity 55
4
Putting Your App Together
Managing cross-component Other useful Svelte features 86
state 76
Slots 86
Svelte stores 76 Actions 87
Navbar.svelte component 80 Lifecycle methods 89
Completing the app 82 Meta-elements 91
Transitions 84 Summary 92
Svelte transitions 84
Adding transitions to our app 85
5
.d Single-Page Applications with Svelte
e
vre
se
r sth Routing on the browser 94 Updating the List component 103
g
ir llA Inspecting our makeshift router 95 URL parameters – updating the
.de Two approaches to client-side routing 97 ViewObject component 103
timiL Updating the Navbar.svelte
,gn Routing with hash-based component 104
ih
silb routing 99 Navigating around the app 105
u
P
tkca Defining the routes object 99 Automated testing for Svelte
P .02 Updating the App component 100 apps 106
02 The ViewNotFound.svelte component 101
© th Updating the ViewAdd component 102 Setting up the test environment 107
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Table of Contents iii
Creating tests 108 Adding ESLint 110
Running tests 109 Configuring ESLint for your style 111
Running the linter 112
Linting and enforcing style
ESLint in Visual Studio Code 113
conventions 110
Summary 115
6
Going to Production
Options to deploy your Svelte Mapping a custom domain 126
apps 118 The back-end service 129
Alternative services 118
Continuous Integration/
Deploying to object storage 120 Continuous Delivery 132
Creating an Azure account 120 Putting our app's code on GitHub 132
Authenticating with the Azure CLI 121 Creating a GitHub action to deploy the
app 136
Creating the storage account 122
Managing and destroying your
Uploading files to your Azure storage
resources 141
account 124
Browsing the app from Azure Storage 125 Summary 142
Adding the CDN 125
7
Looking Forward
The Svelte ecosystem and Community support and connections 145
community 144
Sapper 146
.d Official websites and documentation 144
evre Svelte community website 144 More JAMstack resources 146
ser sth Summary 149
gir llA Other Books You May Enjoy
.d
e
tim Leave a review - let other
iL
,g readers know what you think 153
n
ih
silbu Index
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
