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

# Firebase remote config

Let's leverage the work already done by the Firebase team on [Firebase Remote Config](https://firebase.google.com/docs/remote-config). What started out as a feature for native apps is now also available for the web Firebase SDK. For now, we are going to focus on how to get started.

## Client-side only

One important aspect to keep in mind before we embark on the journey of using Remote Config is that this feature is **client-side only**. This means that the server-rendered HTML will not include a feature, even if it is enabled according to the feature toggle configuration. It is only once the client-side code runs and fetches the Remote Config details then the feature becomes visible.

In our Sapper-based web application, this is only an issue on the very first page load. Once that page is loaded, the feature toggle configuration is available on the client, and features that are turned on
render instantly.

# Initialize remote config

Let's start by creating a new branch:

```
git switch -c add-feature-toggles
```

Open the `services/web/src/template.html` file using:

```
nano services/web/src/template.html
```

and add the following line below the `firebase-analytics.js` script to enable Remote Config:

```
<script src="/__/firebase/X.Y.Z/firebase-remote-config.js"></script>
```

This enables us to use the **window.firebase.remoteConfig()** to generate a new Remote Config instance and interact with the configuration stored on Firebase. Don't forget to replace `X.Y.Z` with the version number provided to you by Firebase when you created a project.

Create a `services/web/src/feature-toggles/index.js` file by executing:

```
mkdir services/web/src/feature-toggles

touch services/web/src/feature-toggles/index.js

nano $_
```

and add the following definition of feature toggles:

```
export const FEATURE_TOGGLES = {
  vipWelcome: {
    name: "feature_vip_welcome"
  }
};
```

This gives us the flexibility to add more feature flags and also more properties for
individual flags, such as a default value, later.

Next, we need a function to initialize the remote config, fetch the latest values and
activate them on the client. Add the following below the code you entered above:

```
export const initFeatureToggles = async () => {
  const remoteConfig = window.firebase.remoteConfig();
  await remoteConfig.fetchAndActivate();
  return remoteConfig;
};
```

Excellent! That's a good start, and all we need to do now is to call the **init function**. The best place to do that is in `src/client.js`. This file is where the client-side Sapper application
is started. Open the file:

```
nano services/web/src/client.js
```

Right above the `sapper.start()` function call, add the following:

```
import { initFeatureToggles } from "./feature-toggles";
initFeatureToggles();
```

> **NOTE:** The `initFeatureToggles()` is an **asynchronous** function that returns a
promise. We don't have to wait for the promise to resolve, as this would add an
unnecessary delay in starting up the client-side Sapper application.


Learn how to configure Firebase remote for your web Firebase SDK.

Firebase Remote Config

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?

Firebase Remote Config

Firebase remote config

Client-side only