Cloud Native Web Development
From zero to production: A hands-on guidebook
About the book
Web applications once were static HTML with CSS and a backend that processed form submissions. Fast forward to today and web development is more complex than it has ever been. With new frameworks, technologies & reusable code packages appearing (what feels like) weekly, where do you begin?
In this book, we will walk through the end-to-end process of developing a cloud-native web application. You will learn technologies, processes, tips & tricks and gain hands-on experience. You will find out about mistakes made (so you can avoid them) by the author based on his two decades of experience in developing web applications.
Links to additional resources such as videos, blog posts and articles are provided where necessary to give you an opportunity to dive deeper into topics of interest. These are resources I found useful and wish I had access to earlier in my career.
The book starts with introductions to technologies used throughout the book and explains what alternatives are available.
- Svelte to develop the web application
- Sapper as a static site generator
- Tailwind CSS for styling
- Firebase Hosting to host the web application
- Cypress for component and end-to-end testing
- Firebase Authentication to create accounts and authenticate users
- Cloud Firestore for data persistence
- Node.js services deployed to Cloud Functions on Google Cloud Platform to deal with asynchronous tasks (e.g. send a welcome email to new users)
The second part is hands-on, with pull requests that correspond to individual chapters in the book. All readers are part of a community and can collaborate among themselves and with the author.
We will start with a basic boilerplate repository, configure a CI / CD pipeline to test and deploy the web application and add feature toggles to ensure frequent deployments to production are fearless. For operational visibility, we will set up production monitoring & alerts and discuss how to perform rollbacks should that become necessary.
A big part is going to be how to test web applications, with component and end-to-end tests to make sure new features don’t introduce regression bugs. To have the most impact, tests are going to be part of the continuous integration pipeline and deployments will not happen if a test fails.
We will configure Tailwind CSS to style the pages and components and learn about user authentication and how to interact with a database to persist and load data.
To wrap up the book, we will look at how Firestore and serverless Cloud Functions allow us to develop a scalable event-driven architecture where individual parts of the system are decoupled and can be maintained independently.
Reviews
Cloud Native App development is a difficult space and Mike's knowledge and experience really comes out in this book. Thank you for writing this book.
You’re producing really high quality content with this book! I think it’s a good sign that I can’t stop reading and I don’t have to force myself to try out all the stuff, which is actually the problem of most technical hands-on books. Also, even if you work with a different techstack, the concept applies anyways. I already had some takeaways which I brought to my company, especially from all those little sidenotes.
I was very pleased to read through your book and enjoyed the content. Really like the diagram pictures and love the easiness to follow everything.
His "Cloud Native Web Development" gave me a new perspective on software development. There are many gems scattered everywhere in the book at this level of detail. I personally love his heartful sharing of "Why?" in each of the early sections in the book. It made me feel like I was following part of his journey as a developer. However, this warm and calm feeling will soon be mixed by shocks of "Wow, I didn't know I could do that." or "I have not thought of this at all!". I must admit that I wasn't prepared for this excitement of learning which doesn't come by very often.
Enjoyed reading your analysis for major design decisions and recommendations. In addition highlighting Google Firebase product with concrete use cases, like feature toggling for example, will be highly appreciated by developers!
Chapters
9
About this book
The author • Why write a book? • What does this book cover? • Audience • Source code • Acknowledgments • Stay informed
Part 1: Technologies, tools & processes
20
Topics you will learn
21
What is cloud-native?
22
Guiding Principles
1. User experience • 2. Team Productivity • 3. Automation
27
Development Environment
Gitpod.io • GitHub
30
Frontend
Svelte • Tailwind CSS • Firebase SDK
36
Backend
Sapper • Google Cloud Platform
45
Database
Cloud Firestore
47
CI / CD
GitHub Actions
49
Testing
Cypress • Testing Library
57
Monorepo
59
Summary
Part 2: Develop a foundation
61
Introduction
62
Project Overview
63
A monorepo template to start with
Monorepo directory structure • Create a new GitHub project • Summary
66
Add the Sapper template
Clone the repository • Create a new branch • Add the web service • Create a pull request • Summary
71
Hosting on Firebase
Create a Firebase project • Set a resource location • Register your app with Firebase • Add the Firebase SDK to the web application • Install the Firebase CLI • Log in to Firebase • Initialize Firebase CLI • Deploy to Firebase Hosting • Deploy the web application • Summary
87
Set up continuous deployment pipeline
Why now? We haven't developed anything yet • GitHub Actions • Set up GitHub Actions • Test the new workflow • Summary
94
Local Development
97
Feature Toggles
What are feature toggles? • Feature toggles to release unfinished code • Firebase Remote Config • Set up our first feature toggle • Configure feature toggles • Summary
109
Production Monitoring
Create an uptime check • Create an alert policy • Summary
113
Rollbacks
Fix Forward • Summary
114
Testing
End-to-end tests • Component tests • Use Testing Library • Generate product videos • Cypress Dashboard • Enable tests in the continuous integration pipeline • Summary
137
Tailwind CSS
Initialize & configure • Create a Tailwind CSS component • Use Tailwind CSS in Svelte components • Component libraries • Summary
144
User authentication
Configure Firebase Authentication • Configure Firebase UI • Create the login page • Create the admin page • Use a Svelte store to keep track of the current user • Keep the user store updated • Sign In vs Sign Out navbar item • Secure the admin page • Redirect once authenticated • Enable additional sign-in providers • Summary
158
Database - Cloud Firestore
Create a Firestore instance • Structure data • Configure Firestore • Create a user interface to write data • Write data • Read data • Clean up • Fix tests • Security Rules • Summary
176
Firebase Local Emulator Suite
Initialize the emulators • Configure the web application to use emulators locally • Start the emulators in development • Fix tests • Summary
185
Trigger services based on events
Initialize Firebase Cloud Functions • Test the default Cloud Function locally • Develop the new service placeholder • Develop the integration with DEV • Test the new service • Convert Markdown to HTML • Write tests for the service • Deploy the new service • Summary
208
Speed up CI / CD
Summary
211
Connect a custom domain
212
That's a wrap!
213
What's next? Web development in 2025
Distributed static page generation • Web & IoT • Upcoming personal projects
A book, source code & a community
Be part of a community with other readers. Review & discuss source code. Ask questions.
- Pages
- 214
- Chapters
- 32
- Pull Requests
- 19
The author
Mike is a software architect who started his career right at the peak of the dot-com bubble in summer of 2000. He currently works at Google, advising enterprise customers on their journey to the Cloud.
He focuses on cloud native web development, best practices, productivity and team morale.
He shares his thoughts at www.mikenikles.com (previously on Medium at medium.com/@mikenikles ) and can also be found on Twitter @mikenikles .