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

# Starting the emulators in the development

Open the `services/web/firebase/package.json` file. We need to change the dev NPM script so that it starts the Firebase emulators.

```JSON
"scripts": {
  "dev": "firebase emulators:start",
}
```

Let's see this in action. In your terminal, navigate to `services/web` and start the development environment with `npm run dev`.

> **Note:**
If you do not have Java installed, you will be asked to do so, as this is a requirement from the Firebase emulators. You can find the latest version [here](https://www.oracle.com/uk/java/technologies/javase-downloads.html).

In your browser, open http://localhost:4000 to look at the Firebase Emulator Suite.
The Firestore tab displays your posts. Note, the database entries are deleted when
you stop the dev server.

>**Gitpod users**
>
>In the Open Ports tab next to the terminal tabs, make sure you click "Make Public" for **port 8080**. This is so that the web application can
connect to the local Firestore emulator.
>
>Quick reminder, to access [http://localhost:4000](http://localhost:4000), open two terminal tabs. In the first tab, start Firefox by typing firefox and hit Enter. In the second, start the development server with **npm run dev** in the
**services/web** directory.
>
>Next, click on the "Open Ports" tab next to the terminal, locate **6080** and
click "Open Browser" on the right.
>
>In the new browser tab that opened, you can now use Firefox to access
[http://localhost:4000](http://localhost:4000)


# Fix tests


One of our integration tests in `services/web/cypress/integration/spec.js`
expects at least one blog post to be displayed on the `/blog` page. However, since we now use the Firebase Local Emulator Suite, our local Firestore data is deleted when we stop the emulator.

To fix this, we need to seed our database with a dummy blog post before we validate that the blog post is displayed on the page.

## Install Firebase admin SDK
We start by installing the Firebase Admin SDK in `services/web`:
```terminal
npm install -D firebase-admin
```

## Create a cypress task
Next, we need to create a [Cypress task](https://docs.cypress.io/api/commands/task.html) that allows us to insert a blog post before we run our test. Let's begin with the task definition itself.

Create a `services/web/cypress/plugins/firestore.js` file with the following content:

```
const admin = require("firebase-admin");

let firebaseApp;
let db;

const getFirebaseApp = (options) => {
  if (!firebaseApp) {
    firebaseApp = admin.initializeApp(options);
  }
  return firebaseApp;
};

const getFirestore = (firebaseAppOptions) => {
  if (!db) {
    db = getFirebaseApp(firebaseAppOptions).firestore();
  }
  return db;
};

module.exports = {
  addBlogPost({ firebaseAppOptions, slug, post }) {
    return new Promise(resolve => {
      getFirestore(firebaseAppOptions).collection("posts").doc(slug).set(post).then(() => {
        resolve(null);
      });
    });
  }
};
```

The important part is the `addBlogPost` function at the very bottom. Cypress
requires tasks to return an **object** or **null**. Hence, we wrap the Firestore operation in a new promise and resolve it with null when the document is successfully
inserted into the database.

The `getFirestore()` and `getFirebaseApp()` helpers allow us to cache the
initialized objects to speed up tests.

## Add environment variables
In order for the Firebase Admin SDK to connect to the emulator Firestore, we can
use an environment variable that is picked up by the SDK. Open the `services/web/package.json` file and add the following environment variable to
the beginning of the `cy:run` and `cy:open` NPM scripts:

```yml
FIRESTORE_EMULATOR_HOST='localhost:8080'
```

To make sure tests pass in our CI/CD pipeline, we also have to set that environment variable in the GitHub workflow. Open the `.github/workflows/services-web.yml` file and add the following to the test job's env.

```yml
FIRESTORE_EMULATOR_HOST: "localhost:8080"
```

## Make `addBlogPost` available in our test suite
We now need to register the `addBlogPost` task to make it available in our test suite. To do that, open `services/web/cypress/plugins/index.js` and update with the following two lines:

```
const firestoreTasks = require("./firestore");
...
module.exports = (on, config) => {
  ...
  on("task", firestoreTasks);
};
```

Great progress! The `addBlogPost` task is now registered. Open
`services/web/cypress/integration/spec.js`.

## Update tests

In the `describe("Blog posts")` section, remove the `beforeEach()` block and add the following `before()` function instead:

```
before(() => {
  cy.visit("/").then(contentWindow => {
    const firebaseAppOptions = contentWindow.firebase.app().options;
    cy.task("addBlogPost", {
      firebaseAppOptions,
      slug: "test-post",
      post: {
        content: "A test blog post",
        title: "Test post"
      }
    });
  });
  cy.visit("/blog");
});
```

Instead of loading `/blog` before each test (that's what the `beforeEach()` did), we will instead:

* Load the homepage `cy.visit("/")`.
* When it is loaded with `.then()`, we receive the browser's window object, which contains our Firebase app options.
* Call the new `addBlogPost` task and pass the necessary parameters to create a blog post.
* Load the `/blog` page.

Lastly, change the **"displays blog posts"** test to **"displays the test blog post"** and replace the `cy.get()` line with the following:

```spec.js
cy.contains("[data-cy=blog-posts-list] a", "Test post");
```

This test now ensures the correct test post is displayed.

To make sure it all works, press **RUN** and follow the #concept=runTest#instructions to run the tests#concept#:


Learn how to start the emulators in development.

Start the Emulators in Development

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?

Start the Emulators in Development

Starting the emulators in the development