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

# Sapper

[Sapper](https://sapper.svelte.dev/) is a framework that is built on Svelte (which will be covered in the upcoming lessons) for building web applications. We will use Sapper to build our Cloud Native Web Application.


# Alternatives
Let's explore the alternatives to Sapper.
## Routify

[Routify](https://routify.dev) offers a great developer experience to build the routes for your Svelte app. It is actively maintained but does not have quite as many features as Sapper and is more of a router for Svelte applications.

## Next.js (React)

[Next.js](https://nextjs.org/) is an open-source React front-end development web framework that enables functionality, such as server-side rendering and generating static websites for React-based web applications.

If React is your frontend library of choice, we recommend you look at Next.js. It's
provided by [Vercel](https://vercel.com), and they also offer deployment services.
The Vercel team releases new versions regularly and provides excellent tools in
general.

## NuxtJS (Vue.js)

[Nuxt.js](https://nuxtjs.org/) is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. The framework is advertised as a "meta-framework for universal applications". Nuxt.js is very similar to Next.js, but for Vue.js web applications.

## Angular Universal (Angular)

[Angular](https://angular.io/) is an application design framework and development platform for creating efficient and sophisticated single-page apps.

[Angular Universal](https://angular.io/guide/universal) is Angular's approach to server-side rendering.

## Why use sapper?

Sapper provides us with:

* the ability to develop web apps of all sizes.
* a simple and delightful development experience to get up to speed.
* a blazing-fast runtime performance.
* complete offline support.

Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement, or the initial load experience. However, unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.

## Key features
Here are some of the key features of Sapper:

* Flexible Filesystem-Based Routing
* Server Routes
* Instantaneous Navigation

Let's discuss these key features in detail!




Introduction to Sapper

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?

Introduction to Sapper

Sapper

Alternatives

Routify