Become a cloud pro with hands-on experience in developing, styling, and managing a Cloud-Native web application using Tailwind, Google Cloud, and Firebase. No setup, no cleanup, no hassle.

Cloud Native Web Development - A Hands-On Guidebook-01.jpg

cloud-native-web-app.tar.gz

username

email

access_token

repository_name

author

firebase_proj_name

FIREBASE_TOKEN

cypress_key

cypress_projectID

dev_api_key

sapper

add-firebase-sdk

install-firebase-cli

cypress-cli

headless-mode

headless-mode-2

component-tests-1

component-tests-2

testing-library

cypress-dashboard

enable-tests-CI

enable-PR

svelte-intro

tailwindcss-component

tailwindcss-svelte

tailwindcss-svelte2

user-auth1

login-page

admin-page

user-svelte-store

signin-vs-signout

secure-admin-page

redirect

configure-firestore

create-user-interface-1

write-data-1

persist-new-blog-1

read-data-1

security-rules

configure-emulator

test-fcf-locally

new-service-placeholder

dev-integration

test-new-service

markdown2html

write-test-for-service-1

deploy-service-req-one

deploy-service-req-two

speed-up-CI-CD

local-dev

emulator-start

ch-2/lesson-5

ch-3/lesson-3

ch-1/lesson-4

ch-3/lesson-4

ch-3/lesson-5

ch-3/lesson-6

ch-4/lesson-3

ch-4/lesson-4

ch-5/lesson-1/1

ch-5/lesson-1

ch-6/lesson-2

ch-6/lesson-3

ch-8/lesson-3

ch-8/lesson-4

ch-8/lesson-6

ch-8/lesson-7

ch-8/lesson-8

ch-9/lesson-3

ch-9/lesson-4

ch-9/lesson-5

ch-10/lesson-1

ch-10/lesson-2

ch-10/lesson-3

ch-10/lesson-4

ch-10/lesson-5

ch-11/lesson-2

ch-11/lesson-3

ch-11/lesson-4

ch-11/lesson-5

ch-11/lesson-6

ch-11/lesson-7

create-user-interface-2

create-user-interface-3

create-user-interface-4

write-data-2

write-data-3

persist-new-blog-2

read-data-2

read-data-3

ch-12/lesson-2

ch-12/lesson-3

ch-13/lesson-2

ch-13/lesson-3

ch-13/lesson-4

ch-13/lesson-5

ch-13/lesson-6

ch-13/lesson-7

ch-13/lesson-8

ch-13/lesson-9

new-service-placeholder-copy

write-test-for-service-2

write-test-for-service-3

ch-14/lesson-1

This course is a hands-on guidebook to walk you through the journey to creating your first web application in the cloud.

In this course, you will have hands-on experience in developing, styling, hosting, testing, and efficiently managing a complete Cloud-Native web application. Along with this, you will learn how to make the important decision of choosing a technology or tool for your web application.

By the end of this course, you will have a set of expertise in developing cloud native web applications that will help you throughout your career.

Cloud Native Development with Tailwind, Google Cloud and Firebase

# Instantaneous navigation by Sapper

Sapper automatically breaks up the application into small chunks, one per route. With that, a user who accesses `/about` only needs to download the *HTML, JavaScript, & CSS* required to display the about page.

## Example

To go a step further, let's imagine the following user journey:

1. The user loads the homepage.
2. The user sees a link to the `About Us` page.
3. The user clicks on the `About Us` page.
4. The `About Us` page is displayed.

Behind the scenes, there is a magic step between steps 2 and 3. While navigating a web page, when a desktop user hovers over the link or a mobile user touches it, Sapper prefetches the target page before the click event triggers the navigation.

To enable that, Sapper supports a `rel="prefetch"` attribute on the `<a>` tag, such as:

```HTML
<a rel="prefetch" href="about">About Us</a>
```

The [Sapper docs](https://sapper.svelte.dev/docs/) explain that it programmatically prefetches the page given in `href`, which means it:

* Ensures that the *code* for the page is loaded.
* Calls the page's `preload` method with the appropriate options, which is typically used to load *data* that the page depends on. This prevents the user from seeing the page update as it loads, as is typically the case with client-side loading.

Sapper uses prefetching the pages to make navigation instantaneous. Let's see how prefetching works.

Instantaneous Navigation

Introduction

Create a GitHub Project Using Monorepo Template

Set Up Backend Using Sapper Template

Host Your Web App on Firebase

Set Up The Continuous Deployment Pipeline

Local Development

Feature Toggles

Production Monitoring & Rollbacks

Testing

Tailwind CSS

User Authentication

Database - Cloud Firestore

Firebase Local Emulator Suite

Trigger Services Based on Events

Final Tasks

What's Next?

Instantaneous Navigation

Instantaneous navigation by Sapper

Example