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

# Initializing and configuring

Create a new branch:

```terminal
git switch -c add-tailwind-css
```

First things first, let's install the necessary NPM packages and configure a few things to make Tailwind work with Svelte/Sapper.

Run the following command in the `services/web` directory:

```terminal
npm i -D tailwindcss svelte-preprocess postcss autoprefixer

npm install
```
We have executed `npm install` to sync packages in package.json and package-lock.json.

Next, let's use Tailwind's initialization script:

```terminal
./node_modules/.bin/tailwindcss init
```

This created a `tailwind.config.js` file with empty defaults. We want to update the purge property to match the following:

```JS
purge: {
  content: ["./src/**/*.svelte"],
  options: {
    whitelistPatterns: [/svelte-/],
  },
},
```

Tailwind CSS comes with a large number of CSS classes by default. This is great for
development as we can run the dev server, open the browser's developer tools, and
add/remove Tailwind CSS classes at runtime. The drawback is that the CSS file is huge! So, we tell Tailwind in the above-mentioned `purge` property to scan our `*.svelte` files and look for all the Tailwind CSS classes we use. Any other default Tailwind CSS classes are removed from the final CSS bundle.

We also want to keep any `svelte-` class names. Hence, we whitelist them to tell the
purge process to ignore these class names.

The final step to configure Tailwind CSS for our Sapper web application is to update the `services/web/rollup.config.js` file.

Import the following two packages:

```JS
import sveltePreprocess from "svelte-preprocess";
import tailwindcss from "tailwindcss";
```

Create the **Svelte preprocessor** options above the `export default {` line:

```
const sveltePreprocessOptions = sveltePreprocess({
  postcss: {
    plugins: [tailwindcss],
  },
});
```
* `postcss` preprocessor will compile all the Tailwind CSS files.

The final change in the `services/web/rollup.config.js` file is to tell Svelte to use the preprocessor. This needs to be done for both the client and server properties in the default export!

Add the following to the two `svelte({})` function calls:

```
preprocess: sveltePreprocessOptions,
```

To make sure Tailwind CSS purges classes when we export the Sapper web application, we need to set the `NODE_ENV` variable to production during the export. We can do this in the `services/web/package.json` file by changing the export script to the following:

```
"export": "NODE_ENV=production sapper export ./firebase/public --legacy",
```

**Instructions**: Use `nano` to open the files in the terminal editor.


Learn how to initialize Tailwind CSS and configure it to make it work with Svelte/Sapper.

Initialize & Configure

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 & Configure

Initializing and configuring