Buy Now

Cloud Native Web Development

From zero to production: A hands-on guidebook

Mike Nikles

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.

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.

Vikas Desai
Customer Engineer, Google

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.

Thomas Niedermaier
Fullstack Engineer

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.

Mihai Oprea
Customer Engineer, Google

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.

Rock Hu
Software Engineer, Grammarly

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!

Andrey Feldman
Customer Engineer, Google

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 .