Svelte 3 Up and Running

Book description

Build your first web project using the Svelte framework and deploy it in the cloud with automated testing and CI/CD

Key Features

  • A practical guide to building production-ready static web apps with Svelte 3
  • Build faster and leaner frontend and static web apps using the JAMstack
  • Deploy your Svelte 3 app to production using cloud services and DevOps principles such as automated testing and CI/CD

Book Description

Svelte is a modern JavaScript framework used to build static web apps that are fast and lean, as well as being fun for developers to use. This book is a concise and practical introduction for those who are new to the Svelte framework which will have you up to speed with building apps quickly, and teach you how to use Svelte 3 to build apps that offer a great app 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 through 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 have learned how to build and deploy apps using Svelte 3 to solve real-world problems and deliver impressive results.

What you will learn

  • Understand why Svelte 3 is the go-to framework for building static web apps that offer great UX
  • Explore the tool setup that makes it easier to build and debug Svelte apps
  • Scaffold your web project and build apps using the Svelte framework
  • Create Svelte components using the Svelte template syntax and its APIs
  • Combine Svelte components to build apps that solve complex real-world problems
  • Use Svelte's built-in animations and transitions for creating components
  • Implement routing for client-side single-page applications (SPAs)
  • Perform automated testing and deploy your Svelte apps, using CI/CD when applicable

Who this book is for

The book is for frontend or full-stack developers looking to build modern web apps with Svelte. Web developers with experience in leading frontend JavaScript frameworks who wish to learn Svelte will find this book useful. The book assumes a solid understanding of JavaScript and core HTML5 technologies. Basic understanding of modern frontend frameworks will be beneficial, but not necessary.

Table of contents

  1. Svelte 3 Up and Running
  2. Why subscribe?
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Packt is searching for authors like you
  7. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Reviews
  8. Chapter 1: Meet Svelte
    1. Modern web app development
      1. How the web became static…again
      2. Building apps with the JAMstack
    2. Why Svelte?
      1. Svelte versus the other frameworks
      2. The Svelte project
    3. Building a journaling app
      1. App features
      2. The back-end service
    4. Summary
  9. Chapter 2: Scaffolding Your Svelte Project
    1. Setting up your environment
      1. Installing Node.js
      2. Setting up Visual Studio Code
      3. Launching the back-end service
    2. Scaffolding our project
      1. Using a bundler
    3. Scaffolding your project with Webpack
      1. Installing dependencies from NPM
      2. Configuring NPM scripts
      3. Configuring Webpack
    4. "Hello, Svelte!"
      1. Creating the App component
      2. The application's entrypoint
      3. Compiling for production
    5. Debugging Svelte applications
      1. Using the Visual Studio Code debugger
      2. Browser extension
    6. Summary
  10. Chapter 3: Building Reactive Svelte Components
    1. Adding requirements
      1. Dependencies
      2. Utilities
      3. The main.js file
      4. The dotenv file
      5. The stores.js file
      6. The index file
    2. Svelte templates and reactivity
      1. Renderer.svelte component
      2. Obj.svelte component
      3. Calendar.svelte component
    3. Bindings and events
      1. AddForm.svelte component
      2. ViewAdd.svelte component
    4. Summary
  11. Chapter 4: Putting Your App Together
    1. Managing cross-component state
      1. Svelte stores
      2. Navbar.svelte component
      3. Completing the app
    2. Transitions
      1. Svelte transitions
      2. Adding transitions to our app
    3. Other useful Svelte features
      1. Slots
      2. Actions
      3. Lifecycle methods
      4. Meta-elements
    4. Summary
  12. Chapter 5: Single-Page Applications with Svelte
    1. Routing on the browser
      1. Inspecting our makeshift router
      2. Two approaches to client-side routing
    2. Routing with hash-based routing
      1. Defining the routes object
      2. Updating the App component
      3. The ViewNotFound.svelte component
      4. Updating the ViewAdd component
      5. Updating the List component
      6. URL parameters – updating the ViewObject component
      7. Updating the Navbar.svelte component
      8. Navigating around the app
    3. Automated testing for Svelte apps
      1. Setting up the test environment
      2. Creating tests
      3. Running tests
    4. Linting and enforcing style conventions
      1. Adding ESLint
      2. Configuring ESLint for your style
      3. Running the linter
      4. ESLint in Visual Studio Code
    5. Summary
  13. Chapter 6: Going to Production
    1. Options to deploy your Svelte apps
      1. Alternative services
    2. Deploying to object storage
      1. Creating an Azure account
      2. Authenticating with the Azure CLI
      3. Creating the storage account
      4. Uploading files to your Azure storage account
      5. Browsing the app from Azure Storage
      6. Adding the CDN
      7. Mapping a custom domain
      8. The back-end service
    3. Continuous Integration/Continuous Delivery
      1. Putting our app's code on GitHub
      2. Creating a GitHub action to deploy the app
      3. Managing and destroying your resources
    4. Summary
  14. Chapter 7: Looking Forward
    1. The Svelte ecosystem and community
      1. Official websites and documentation
      2. Svelte community website
      3. Community support and connections
    2. Sapper
    3. More JAMstack resources
    4. Summary
  15. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Svelte 3 Up and Running
  • Author(s): Alessandro Segala
  • Release date: August 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781839213625