Web开发全栈项目班

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript History Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

CSS & SASS2

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase /

Merge/ Pull Request Resolve Conflicts

Project One : Tutorial & Lab

JavaScript ES6

Readable, Maintainable, Reusable

Introduction To React

React 哲学 Part 1 (Component & JSX)

Lifecycle breakdown, based on counter example Lift State up - container & presentation pattern, based on counter-app example Redux for state management. Example using counter-app vanilla version, go through official redux doco React component state vs redux global state Immutable + shallow equality

React 哲学 Part 2 (props & CSS in JS)

Continue Counter-app example with redux Render repeated components Container map data to a list of presentational comps The ‘key’ in a list of comps React event handling Fix ‘this’ in callback context (Function.bind, Arrow and class field method) Form handling and controlled input

React 哲学 Part 3 (state)

Sync vs Async flow Promise based async action Use raw XMLHttpRequest and callback hell Promise to rescue (promise state transition) ‘Promisify’ request manually Introduce axios for easy promise async control Redux middleware to handle async action

React 哲学 Part 4 (state lifting & Lifecycle)

React 哲学 Part 5 (Fetch Data & context)

Agile Scrum Jira Sprint Story point Teamwork

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. Scrum 框架的各个流程概述，“3355”方法论

3. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

4. 班级进行模拟 retrospective meeting，回顾课程至今的成果与不足

5. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 怎样改进流程、提高效率，为什么企业需要 T 型人才

7. 介绍精益方法和 Kanban，实际使用中 Kanban 和 Scrum 的结合

8. Project 3 分组

9. 介绍 Sportify

Java Basic 1

How does Java work.

Java Variables and Types, Primitive Types

Operands, Operators (e.g. Abbreviating Operators) and Expressions

if else Statements, switch statement.

For Loop, Do While, methods (e.g. Overloading)& Functions.

OO Concept - Class, Object, Constructor, Inheritance

Java Basic 2

Serialization, polymorphism

Arrays, Inner Class, Abstract Class, Interfaces

Composition, Encapsulation

Generics, Java Collections: List ArrayList, LinkedList

Lambda, Optional, Stream, Exception handling, log.

Unit Test, SOLID principle

Spring Boot Introduction

Build a brand new spring boot project & build a simple restful API

How to use Gradle.

How to use handle Exception globally (centrally).

Create custom Filter

Restful API

What is rest features. Common HTTP Methods.

Why restful API should be stateless

How to properly use cache. Cache in Spring Boot Code

What is swagger & where is it used in our backend architecture.

SQL

SQL syntax & install Postgresql in local environment or use docker

Database Types introduction

Primary Keys, Foreign Keys

Unique, Not Null, Check Constraints

Data Manipulation Language: Insert, Update, Delete

Select Queries, Where Clauses, Having Clauses

SQL Joins, Union

String Functions e.g. Upper & Lower

Spring Data JPA

Build a simple project with Spring Data JPA.

Integrate with Entity Layer (Entity Beans) and Database Layer (Postgresql).

Execute complex query via Spring Data JPA.

How to use in-memory Database e.g. H2 to Unit Test the DAO Layer.

Connect with multiple Database.

SQL Design Tutorial

Based on the project students chose, design the database archetecuture. Including Tables & relations between tables such as one-one, one-many and many to many relationships.

How to build ORM (e.g. hibernate) on top of database.

Message

Introduction of basic concept of Message & Message Driven System.

How to integrate Spring Boot with RabbitMQ

Introduction of AWS SQS

Interview and CV Linkedin CV

Build LMS: 第一步：将设计好的 UI 划分为组件层级

Routing concept How client side routing works (Browser History API) Introduce react-router-dom, declarative routing Wire up 3 components (Router, Route, Link) Start layout the group project and assign responsibility

Build LMS: 第二步：用 React 创建一个静态版本

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

Build LMS: 第三步：确定 UI state 的最小（且完整）表示

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

Build LMS: 第四步：确定 state 放置的位置

Define the CRUD for course Implement routing for CRUD flow Explain route path params React router mechanism to send state to component Ways to hook route component (props / render callback) Implement controlled form for multi inputs Error handling in async action Immutable state update Lab

Build LMS: 第五步：添加反向数据流

React Review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

Scheduled Job

How to build cron jobs using Spring Boot Scheduled job.

Batch API, Reader, Processor, Writer, Listener

Step, Job, Chuck size.

How migrate data from csv to DB by using Spring Jobs.

How to build cron job by using AWS

back-end practice

Finish all the Restful API development using Spring Boot. Including Database setup. ORM (Hibernate). Service layer & Controller layer.

这堂课也是最后一课，希望每个学员都能自己独立的写好一个后端的RESTful API。包括CRUD基本操作。

Project Two: Tutorial & Lab

Interview 2 Mock Interview

Interview 2

Mock Interview

Algorithm

Presentation Web Architecture

Tutorial - How to implement Project 1

Project1 Review

Web Introduction

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network

Chrome Inspect

Web Basics

Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

CSS & Sass

运用Flexbox, Bootstrap, Responsive Web Design, 改写CSS作业

JavaScript

JavaScript 基础

1. 了解 Basic Syntax(variable,loop,condition,function)

2. 异步加载js lib的问题

3. DOM manipulation

4. Modern Javascript library introduction（jQuery，Angular，Vue，WebAssembly）

Git Introduction

学习Git基础知识

1. InstallGitGitPull/Push/Commit

2. BranchRebase/Merge/PullRequest

3.熟练运用GitBranch,

4. 如何解决Codeconflicts,ResolveConflicts

5. 如何Rebase你的代码，如何团队协作

本节课包含第⼀个Project Release (个⼈项⽬)

Basics of Node.js和ES6

ES6 学习使⽤ES6标准

Fundamentals of Node.js （Modules, FileSystem, Build server with node.js etc）

RESTful API

了解什么是api

了解什么是CRUD

了解什么是restful api

学习设计restful api

调用现有的一些公共api来实现CRUD的操作

NPM and Express.js

了解一个api的请求与回复包含的主要内容，比如header，url，status code etc

认识一些常用的status code和header

学习如何使用npm来管理项目

用express搭建一个基本的server

学习express的语法

Api Server & Deploy

描述真实应用场景，给出前端业务逻辑

用express.js搭建一个简单地api server来对接前端

将简单的逻辑进行拆分，合理规划项目结构

集成第三方库，便利开发

发布到heroku，让我们server能被公开访问

Javascript Review

Agile & Lean

深入理敏捷开发Agile，Scrum，Sprint，Storypoint

完成AgileTeam组

本节课包含第二个 project Release(个人项目)

Introduction to React

React 哲学 Part 1 (Component & JSX)

1. React Component fundamental

2. Understand JSX

3. JS extension for declarative component

4. Webpack

5. Babel

React 哲学 Part 2 (props & CSS in JS)

- props

- props 类型

- 为什么需要 CSS in JS

- CSS modules

React 哲学 Part 3 (state)

1. class component

2. state

3. setState

4. setState 异步

React 哲学 Part 4 (state lifting & Lifecycle)

1. state lifting

2. lifecycle

3. CAP -> why *will* methods are not reliable

React 哲学 Part 5 (Fetch Data & context)

1. componentDidMount

2. fetch & axios

3. componentDidMount

4. context

Linkedin & CV

1. Job markets in Australia and China

2. Linkedin Optimisation

3. CV

4. Cover Letter

Mongodb

NoSQL vs MySQL MongoDB Relations

使用mongo shell来进行一系列的数据库CRUD操作

学习设计数据库的一些基本原则

明白什么是index，normalization和denormalization etc

API Server: Mongoose

学习mongoose的语法

使用mongoose在server端管理数据

开始搭建LMS的api server

API Server: Authentication

继续server的搭建

学习用户注册于登录

理解JSON WEB TOKEN的使用

API Server: Deploy

完成并整理后端代码

连接云端数据库并测试api的有效性

使用aws的elastic beanstalk进行部署

Build LMS: 第一步：将设计好的 UI 划分为组件层级

1. react-router-dom

2. eslint

4. styled-components

Build LMS: 第二步：用 React 创建一个静态版本

1. tests

2. jest

3. react-testing-lib

5. CICD

Build LMS: 第三步：确定 UI state 的最小（且完整）表示

1. env

2. connect to api

3. CRUD

Build LMS: 第四步：确定 state 放置的位置

1. cypress

2. redux

Build LMS: 第五步：添加反向数据流

1. redux

2. hooks

3. HOC

React Review

1. Readable, Maintainable, Reusable

2. SOLID

3. Declarative, Component-based

4. React 哲学

Interview & Mock Interview

Algorithm

AWS 101

Presentation(Project 3)

Project 3 Battle

不同的小组进行Project 3打分

然后1-2位Mentor针对每个小组进行考评打分

优胜队伍有奖励以及奖状

课程评分标准

https://www.notion.so/jracademy/Project3-1039a98e7ab24b5bb2fcd47d39d2429b

Internship

为期1-3个月的项目实习

分配到匠人公司或者其他合作公司

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript

History Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

CSS & Sass

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase / Merge/ Pull Request Resolve Conflicts

Links:

Git client: https://git-scm.com/

SourceTree: https://www.sourcetreeapp.com/

Visualizing Git: http://git-school.github.io/visualizing-git/#free

Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701

Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup

Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Interview and CV Linkedin CV

1. Job markets in Australia and China

2. Linkedin Optimisation

3. CV

4. Cover Letter

Introduction to npm and Koa

Npm & Node.js API.

Koa

callback， promise，async await怎么用的，怎么写以及为什么

koa搭建一个简单的服务器

postman怎么用

curl的使用

koa的洋葱模型的例子

Agile

Agile

Scrum

Jira

Sprint

Story point

Teamwork

Project 3 分组

Rest API & Build Weather app api

Introduction to Rest API and bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios.

REACT: React with Modern JavaScript

React with Modern JavaScript

- React Component fundamental

- Understand JSX, JS extension for declarativecomponent

- ES6 essentials (destructing, spread, rest variable

- scope (let) arrow fn, callback context), class

REACT: Make it stateful

Make it stateful

- Stateful and stateless (state with props)

- Create class stateful component and update state

- Lifecycle breakdown

- ES6 module, why we need

- How create-react-app release the initial project setup pain

- Start rewriting weather app (individual project)

- keep data in state and render

REACT: Make it interactive

Make it interactive

- Render repeated components

- Container map data to a list of presentational comps

- The ‘key’ in a list of comps

- React event handling

- Fix ‘this’ in callback context (Function.bind, Arrow and class field method)

- Form handling and controlled input

- Lab

REACT: Talk to remote

Talk to remote

- Sync vs Async flow

- Promise based async action

- Use raw XMLHttpRequest and callback hell

- Promise to rescue (promise state transition)

- ‘Promisify’ request manually

- Introduce axios for easy promise async control

- Lab

Database

NoSQL vs MySQL MongoDB Relations

Mongoose

Query and filtering data unit testing And more...

Mock Interview 1

Interview Training Code Test

Managing user:

Registration and login password encryption password reset Email confirmation Accessibility control JWT token

Web Api deployment Unit testing and Tools ( For Advance student)

Database deployment API server deployment CI/CD pipe line Redis Docker and Docker-compose Introduction to loopback

Build & Deploy LMS: CICD

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

REACT: Build LMS: project structure

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: Auth Flow & connect API

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: CRUD flow & routing

Build project structure

- Define the CRUD for 3 models course, student, lecture

- Implement routing for CRUD flow

- Explain route path params

- React router mechanism to send state to component

- Ways to hook route component (props / render callback)

- Implement controlled form for multi inputs

- Immutable state update

- Lab

REACT: React patterns and review

React patterns and review

- Composition over Inheritance

- Container (controller) with Presentation component

- Review component lifecycle

- React new declarative Context?

- Higher order component

- React 16 features: Fragment, Portal

- Explore more frontend ecosystem (intro to third party state management)

- Redux introduction

- React performance caveats

- Deploy React SPA to AWS S3 bucket

Mock Interview 2

Mock Interview 2

模拟面试

10分钟面试+5分钟答疑的形式

解决大部分的Behavior Question

不同级别的技术问题

Algorithm

AWS 101

Presentation (Group Work)

Tutorial1

1. HTML

2. CSS

3. SEO

4. Assignment and Homework

Tutorial2

1. Git flow

2. Assignment 1 Progress and QA

3. Homework (Flexbox)

Tutorial3

GitHub SSH

Review Project

Tutorial4

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript

History Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase / Merge/ Pull Request Resolve Conflicts

CSS & Sass

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Introduction to npm and Koa

Npm & Setup basic server with Koa

Rest API

DNS Mapping URL fundamentals Request: Common Headers, Simple/Full Request message Response: Status Code Evolvement of Web Service: From web form to web service to API Introduce to Json: By comparing XML and JSON including Pros and Cons and the reason why JSON is winning RESTful services vs SOAP: Pro and Cons for each one Introducing AJAX Swagger Demos: 1. Html+Java Scripts 2. Google GEO API

REACT: Make it stateful

Lifecycle breakdown, based on counter example Lift State up - container & presentation pattern, based on counter-app example Redux for state management. Example using counter-app vanilla version, go through official redux doco React component state vs redux global state Immutable + shallow equality

REACT: Make it interactive

Continue Counter-app example with redux Render repeated components Container map data to a list of presentational comps The ‘key’ in a list of comps React event handling Fix ‘this’ in callback context (Function.bind, Arrow and class field method) Form handling and controlled input

Build Weather app api

Bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios Tidy up the code Deploy to heroku

Agile

Agile

Scrum

Jira

Sprint

Story point

Teamwork

Project 3 分组

REACT: Talk to remote

Sync vs Async flow Promise based async action Use raw XMLHttpRequest and callback hell Promise to rescue (promise state transition) ‘Promisify’ request manually Introduce axios for easy promise async control Redux middleware to handle async action

REACT: React with Modern JavaScript

React Component fundamental Understand JSX, JS extension for declarative component - hello react example Stateful and stateless (state with props) - counter app example Create class stateful component and update state ES6 essentials (destructing, spread, rest variable scope (let) arrow fn, callback context), class React rendering mechanism - virtual dom vs dom

Interview and CV Linkedin CV

Database

NoSQL vs MySQL MongoDB Relations

Mock Interview 1

Interview Training Code Test

Mongoose

Query and filtering data unit testing And more...

Managing user:

Registration and login password encryption password reset Email confirmation Accessibility control JWT token

Web Api deployment Unit testing and Tools ( For Advance student)

Database deployment API server deployment CI/CD pipe line Redis Docker and Docker-compose Introduction to loopback

REACT: Build LMS: CRUD flow & routing

Define the CRUD for course Implement routing for CRUD flow Explain route path params React router mechanism to send state to component Ways to hook route component (props / render callback) Implement controlled form for multi inputs Error handling in async action Immutable state update Lab

Build & Deploy LMS: CICD

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

REACT: Build LMS: Auth Flow & connect API

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

REACT: Build LMS: project structure

Routing concept How client side routing works (Browser History API) Introduce react-router-dom, declarative routing Wire up 3 components (Router, Route, Link) Start layout the group project and assign responsibility

REACT: React patterns and review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

Mock Interview 2

Mock Interview 2

模拟面试

10分钟面试+5分钟答疑的形式

解决大部分的Behavior Question

不同级别的技术问题

Algorithm

AWS 101

Presentation (Group Work)

Presentation (Group Work)

Algorithm

REACT: React patterns and review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

Mock Interview 2

Mock Interview 2

模拟面试

10分钟面试+5分钟答疑的形式

解决大部分的Behavior Question

不同级别的技术问题

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript

History Modern Web Tech vs Traditional Tech

AWS 101

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase / Merge/ Pull Request Resolve Conflicts

CSS & Sass

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Introduction to npm and Koa

Npm & Setup basic server with Koa

REACT: Make it stateful

Lifecycle breakdown, based on counter example Lift State up - container & presentation pattern, based on counter-app example Redux for state management. Example using counter-app vanilla version, go through official redux doco React component state vs redux global state Immutable + shallow equality

Build Weather app api

Bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios Tidy up the code Deploy to heroku

REACT: Make it interactive

Continue Counter-app example with redux Render repeated components Container map data to a list of presentational comps The ‘key’ in a list of comps React event handling Fix ‘this’ in callback context (Function.bind, Arrow and class field method) Form handling and controlled input

Rest API

DNS Mapping URL fundamentals Request: Common Headers, Simple/Full Request message Response: Status Code Evolvement of Web Service: From web form to web service to API Introduce to Json: By comparing XML and JSON including Pros and Cons and the reason why JSON is winning RESTful services vs SOAP: Pro and Cons for each one Introducing AJAX Swagger Demos: 1. Html+Java Scripts 2. Google GEO API

REACT: Talk to remote

Sync vs Async flow Promise based async action Use raw XMLHttpRequest and callback hell Promise to rescue (promise state transition) ‘Promisify’ request manually Introduce axios for easy promise async control Redux middleware to handle async action

Agile

Agile

Scrum

Jira

Sprint

Story point

Teamwork

Project 3 分组

REACT: React with Modern JavaScript

React Component fundamental Understand JSX, JS extension for declarative component - hello react example Stateful and stateless (state with props) - counter app example Create class stateful component and update state ES6 essentials (destructing, spread, rest variable scope (let) arrow fn, callback context), class React rendering mechanism - virtual dom vs dom

Interview and CV Linkedin CV

Mongoose

Query and filtering data unit testing And more...

Mock Interview 1

Interview Training Code Test

Database

NoSQL vs MySQL MongoDB Relations

Managing user:

Registration and login password encryption password reset Email confirmation Accessibility control JWT token

Web Api deployment Unit testing and Tools ( For Advance student)

Database deployment API server deployment CI/CD pipe line Redis Docker and Docker-compose Introduction to loopback

REACT: Build LMS: project structure

Routing concept How client side routing works (Browser History API) Introduce react-router-dom, declarative routing Wire up 3 components (Router, Route, Link) Start layout the group project and assign responsibility

REACT: Build LMS: Auth Flow & connect API

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

REACT: Build LMS: CRUD flow & routing

Define the CRUD for course Implement routing for CRUD flow Explain route path params React router mechanism to send state to component Ways to hook route component (props / render callback) Implement controlled form for multi inputs Error handling in async action Immutable state update Lab

Build & Deploy LMS: CICD

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3