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

For the version control of our application.

To manage the security and global scale of our web application.

To help the frontend communicate to the backend.

What database program does Firebase provide?

<p>What database program does Firebase provide?</p>


While creating a Firebase project, can we change the GCP resource location after selecting it once? 

<p>While creating a Firebase project, can we change the GCP resource location after selecting it once?</p>


```HTML
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="theme-color" content="#333333">

	%sapper.base%

	<link rel="stylesheet" href="global.css">
	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
	<link rel="icon" type="image/png" href="favicon.png">

	
	%sapper.scripts%

	
	%sapper.styles%

	
	%sapper.head%
</head>
<body>
	
	<div id="sapper">%sapper.html%</div>

</body>
</html>

```
In the above `services/web/src/template.html` file, what is the correct position for pasting the code for Firebase SDK?

<pre><code class="language-HTML">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
	&lt;meta name=&quot;theme-color&quot; content=&quot;#333333&quot;&gt;

	%sapper.base%

	&lt;link rel=&quot;stylesheet&quot; href=&quot;global.css&quot;&gt;
	&lt;link rel=&quot;manifest&quot; href=&quot;manifest.json&quot; crossorigin=&quot;use-credentials&quot;&gt;
	&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;favicon.png&quot;&gt;

	&lt;!-- Sapper creates a &lt;script&gt; tag containing `src/client.js`
	     and anything else it needs to hydrate the app and
	     initialise the router --&gt;
	%sapper.scripts%

	&lt;!-- Sapper generates a &lt;style&gt; tag containing critical CSS
	     for the current page. CSS for the rest of the app is
	     lazily loaded when it precaches secondary pages --&gt;
	%sapper.styles%

	&lt;!-- This contains the contents of the &lt;svelte:head&gt; component, if
	     the current page has one --&gt;
	%sapper.head%
&lt;/head&gt;
&lt;body&gt;
	&lt;!-- The application will be rendered inside this element,
	     because `src/client.js` references it --&gt;
	&lt;div id=&quot;sapper&quot;&gt;%sapper.html%&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

</code></pre>
<p>In the above <code>services/web/src/template.html</code> file, what is the correct position for pasting the code for Firebase SDK?</p>


To automatically install the dependencies defined in the `firebase/package.json` file.

To make Firebase available throughout the project.

Explain why we used the following script in `services/web/package.json`:
```JSON
"postinstall": "npm install --prefix firebase"
```

<p>Explain why we used the following script in <code>services/web/package.json</code>:</p>
<pre><code class="language-JSON">&quot;postinstall&quot;: &quot;npm install --prefix firebase&quot;
</code></pre>


"We first build the web application with sapper build. This generates JavaScript bundles at `__sapper__/build`, one per route defined in `src/routes`. To start the server, we use `Node.js` and execute node `__sapper__/build`."

Which of the following best fits the above-given definition:

<p>“We first build the web application with sapper build. This generates JavaScript bundles at <code>__sapper__/build</code>, one per route defined in <code>src/routes</code>. To start the server, we use <code>Node.js</code> and execute node <code>__sapper__/build</code>.”</p>
<p>Which of the following best fits the above-given definition:</p>


Test your understanding of hosting your web application on Firebase.

Quiz: Host Your Web App on Firebase

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?

Quiz: Host Your Web App on Firebase