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

# DEV

First things first, what is [DEV](https://dev.to)? Their About DEV page states:

**"DEV is a community of software developers getting together to help one another out."**

It's a place where anyone can create an account and share their blog posts, engage
in discussions, or simply tag along to see what's going on in the developer community. As a registered user, you can write blog posts in Markdown on their website. Alternatively, they provide a [REST API](https://docs.dev.to/api). The API
provides a number of endpoints, and the one we are interested in is called ["Create a
new article"](https://docs.dev.to/api/#operation/createArticle).

> **Note:** 
If you want to publish your blog post to another service and they offer an API, feel free to use this chapter as a guide and adjust the code snippets to match the other service's API.
</div>

If you don't have an account yet, please create one at https://dev.to first.

# Developing the integration with DEV

> **Note**: All paths below are relative to `services/web/firebase/functions`.

To send the HTTP request to the API endpoint, we are going to use the [got](http://npmjs.com/package/got) package, which is an HTTP library for `nodejs`. Click "Run" and in the terminal, install got and the latest node TypeScript types needed with:
```ter
npm i -S got
```

To make `got` work with TypeScript, we also need to provide the node types so it can
compile correctly.
```ter
npm i -D @types/node
```

Open `./src/firestore/posts/on-create/cross-post-to-devto/index.ts` and replace the file's content with the following code. This will guide you in creating a post and using the dev.to's API to publish the blog content on the website.
```
import * as functions from "firebase-functions";
import got from "got";

// Our basic Blog Post struct
interface IBlogPost {
  title: string;
  content: string;
}

// Function that takes input in the form of IBlogPost and publishes the blog content to dev.to using its API
const publishToDevto = (blogPost: IBlogPost) => got.post("https://dev.to/api/articles", {
  headers: {
    "api-key": functions.config().crossposttodevto.apikey
  },
  json: {
    article: {
      title: blogPost.title,
      body_markdown: blogPost.content,
      published: false
    }
  }
});


export default functions.firestore
  .document("posts/{slug}")
  .onCreate(
    // Creating snapshot of the post and printing it on the console
    async (
      snapshot: functions.firestore.DocumentSnapshot,
      context: functions.EventContext
    ) => {
      const blogPost = snapshot.data() as IBlogPost || {};
      console.log(
        `Posting to dev.to... Slug: ${
        context.params.slug
        }. Post: ${JSON.stringify(blogPost)}`
      );
      // Publishing & handling errors
      try {
        await publishToDevto(blogPost);
        console.log("Blog post successfully posted to dev.to.");
      } catch (error) {
        console.error(error);
      }
    }
  );
```

Click **Run** to save the changes.

Get an introduction to DEV and learn how to develop the integration with DEV.

Develop the Integration with DEV

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?

Develop the Integration with DEV

DEV