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

# Initialization

Let's remember the best practice, which is to create a new branch:
```terminal
git switch -c event-based-triggers
```
To start, you have to first login to Firebase. Navigate to `services/web/firebase` and execute the following command:
```
npm run firebase:login
```

And then initialize Firebase Cloud Functions in `services/web/firebase`:
```terminal
./node_modules/.bin/firebase init functions
```
The wizard asks whether you prefer to use **JavaScript** or **TypeScript**. This is up to
you and either choice works fine. We will use TypeScript. If you're unfamiliar with TypeScript, feel free to select it and learn along the way. 

If you chose TypeScript, also say "Y" when asked about TSLint. Lastly, type "Y" to install dependencies.

If you execute `git status` in your terminal, you will see that the wizard above modified the `firebase.json` file and added a new directory called "functions". In the functions directory, we will write the new service that Firebase triggers on database changes. For an up-to-date list of available triggers, please visit their [documentation](https://firebase.google.com/docs/functions/firestore-events) and look at the
navigation on the left side. Some of the Cloud Firestore Triggers are shown in the table below:

| **Event Type** | **Trigger** |
|----------|-----------|
| `onCreate` | Triggered when a document is written to for the first time. |
| `onUpdate` | Triggered when a document already exists and has any value changed. |
| `onDelete` | Triggered when a document with data is deleted. |
| `onWrite` | Triggered when `onCreate`, `onUpdate` or `onDelete` is triggered. |

## Dependencies
The new functions directory contains a `package.json` file which defines a few
dependencies. To make sure these dependencies are installed automatically, let's update `services/web/firebase/package.json`. Open the file using `nano` and add the following script:
```JSON
"scripts": {
  "postinstall": "npm install --prefix functions"
}
```

While we are at it, it is a good time to also make sure **Node 10** is used when we
deploy the Firebase Cloud Function later. Open the `package.json` file in the new
`functions` directory and update the Node engine to version 10.
```JSON
"engines": {
  "node": "10"
}
```

Learn how to initialize Firebase Cloud Functions.

Initialize Firebase Cloud Functions

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?

Initialize Firebase Cloud Functions

Initialization