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

# Tailwind CSS in action

Time to see our work in action and use a Tailwind CSS class in a component. Let's
change the index page's title to a different color. Click **Run** and follow the 
#concept=runApp#instructions to start the dev server#concept# and in the `src/routes/index.svelte` file given below, change the `<h1>` tag to the following:
```HTML
<h2 class="text-yellow-600"> Great success! </h2>
```
Click **Run** again to save the changes and see the title color updated to reflect the Tailwind CSS `text-yellow-600` class.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## Slower server startup time

You may notice a slower startup time for the development server due to the additional work required to process the Tailwind CSS. Once the server starts, there is no difference in the developer experience
compared to not using Tailwind CSS. Also, there is no impact on the production environment, as we purge all unused Tailwind CSS classes before we deploy.

## The Sapper default image is no longer centered

You likely noticed that. The reason is because of Tailwind's CSS resets classes, and while we could fix it, you will remove that image as soon as you start to develop your own web application, so let's not bother for
now.

## Using Svelte components to abstract utility classes

The power of Svelte (and other frontend frameworks) is that they encourage the
development of individual, reusable components. Tailwind CSS fits very well into
this paradigm as it allows us to create, for example, a `contact-card.svelte` component that contains Tailwind CSS classes for different device sizes. Let's take the example on the Tailwind CSS website.

Create a
`services/web/src/components/contact-card.svelte` component.

```
touch src/components/contact-card.svelte
```

Add the following code to it:

```svelte
<script>
  export let name;
  export let avatarSrc;
  export let job;
  export let email;
  export let phone;
</script>
<div class="md:flex bg-white rounded-lg p-6">
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src={avatarSrc} alt="Avatar">
  <div class="text-center md:text-left">
    <h2 class="text-lg">{name}</h2>
    <div class="text-purple-500">{job}</div>
    <div class="text-gray-600">{email}</div>
    <div class="text-gray-600">{phone}</div>
  </div>
</div>
```
Click **Run** to save the file. 

Open the `src/routes/about.svelte`:

```
nano src/routes/about.svelte
```

We can create a user object with the
necessary properties and pass it into the `<ContactCard />` component:

```svelte
<script>
  import ContactCard from "../components/contact-card.svelte";
  ...
  const erinLindford = {
    name: "Erin Lindford",
    avatarSrc: "https://randomuser.me/api/portraits/women/17.jpg",
    job: "Customer Support",
    email: " erinlindford@example.com ",
    phone: "(555) 765-4321"
  }
</script>
...
<ContactCard {...erinLindford} />
```

**Now, run the dev server.**

# Tailwind CSS in action

Time to see our work in action and use a Tailwind CSS class in a component. Let's
change the index page's title to a different color. Click **Run** and follow the 
#concept=runApp#instructions to start the dev server#concept# and in the `src/routes/index.svelte` file given below, change the `<h1>` tag to the following:
```HTML
<h2> Great success! </h2>
```
Click **Run** again to save the changes and see the title color updated to reflect the Tailwind CSS `text-yellow-600` class.

## Slower server startup time

You may notice a slower startup time for the development server due to the additional work required to process the Tailwind CSS. Once the server starts, there is no difference in the developer experience
compared to not using Tailwind CSS. Also, there is no impact on the production environment, as we purge all unused Tailwind CSS classes before we deploy.

## The Sapper default image is no longer centered

You likely noticed that. The reason is because of Tailwind's CSS resets classes, and while we could fix it, you will remove that image as soon as you start to develop your own web application, so let's not bother for
now.

## Using Svelte components to abstract utility classes

The power of Svelte (and other frontend frameworks) is that they encourage the
development of individual, reusable components. Tailwind CSS fits very well into
this paradigm as it allows us to create, for example, a `contact-card.svelte` component that contains Tailwind CSS classes for different device sizes. Let's take the example on the Tailwind CSS website.

Create a
`services/web/src/components/contact-card.svelte` component.

```
touch src/components/contact-card.svelte
```

Add the following code to it:

```svelte
<script>
  export let name;
  export let avatarSrc;
  export let job;
  export let email;
  export let phone;
</script>
<div>
  <img src={avatarSrc} alt="Avatar">
  <div>
    <h2>{name}</h2>
    <div>{job}</div>
    <div>{email}</div>
    <div>{phone}</div>
  </div>
</div>
```
Click **Run** to save the file. 

Open the `src/routes/about.svelte`:

```
nano src/routes/about.svelte
```

We can create a user object with the
necessary properties and pass it into the `<ContactCard />` component:

```svelte
<script>
  import ContactCard from "../components/contact-card.svelte";
  ...
  const erinLindford = {
    name: "Erin Lindford",
    avatarSrc: "https://randomuser.me/api/portraits/women/17.jpg",
    job: "Customer Support",
    email: " erinlindford@example.com ",
    phone: "(555) 765-4321"
  }
</script>
...
<ContactCard {...erinLindford} />
```

**Now, run the dev server.**

Learn how to use the Tailwind CSS in Svelte Components.

Use Tailwind CSS in Svelte Components

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?

Use Tailwind CSS in Svelte Components

Tailwind CSS in action