Build SPA with React and Wagtail

Introduction
	Objectives
	Who is this course for
	What is included
	How to use the source code
	Demo
	What if you have problem or suggestions
	Changelog
Setup project
	Objectives
	Create Django Project
	Import Wagtail
	Run DevServer
	Reference
Dockerizing Wagtail App
	Objectives
	Install Docker Compose
	Config File Structure
	Compose file
	Environment Variables
	Entrypoint
	Start script
	Start application
Add Blog Models to Wagtail
	Objectives
	Page structure
	Create Blog App
	Page Models
	Category and Tag
	Intermediary model
	Source Code
	Migrate DB
	Setup The Site
	Add PostPage
	Simple Test
	ParentalKey
StreamField
	Objectives
	What is StreamField
	Block
	Body
	Dive Deep
Build REST API with Django REST Framework
	Objectives
	Django REST Framework
	Install Django REST Framework
	Serializer
	Serializer Field
	Viewsets & Router
	Filter
	Pagination
	Conclusion
Build REST API for Wagtail Page
	Objectives
	Config
	Simple Test
	API fields
	Control Image Size
	StreamField Image
	Category
UnitTest REST API (Part 1)
	Objectives
	Workflow
	Fixture
	Factory packages
	Wagtail Factories
	Test RestAPI
	Rest Test
UnitTest REST API (Part 2)
	Objectives
	Image Test Data
	StreamField Test Data
	Write Test
	Rest Test
	Test Coverage
Setup frontend project
	Objectives
	Frontend Workflow
	Project Setup
	Project structure
	Simple Test
Dockerizing React project
	Objectives
	Compose file
	Dockerfile
	Simple Test
Build React Component with StoryBook
	Objectives
	Background
	Install Storybook
	Explore StoryBook
	Storybook config
	Cleanup
Add SCSS support to React project
	Objectives
	Bootstrap
	Install Dependency
	Simple Test
	Test with Bootstrap
Building React Component (Part 1)
	Objectives
	Basic Concepts
	Simple React Component
	React Component Lifecycle
	Ajax and Mock
	Global SCSS for Storybook
	Reference
Building React Component (Part 2)
	Objectives
	Design
	Install DOMPurify
	StreamField Block Components
	StreamField Component
	Mock Data
	StoryBook
	Notes
Building React Component (Part 3)
	Objectives
	Design
	PostDetail
	Other Components
	PostPage
React Router (Part 1)
	Objectives
	Design
	Install
	PostDetail
	PostPage
React Router (Part 2)
	Objective
	Design
	React Router Link
	PostPageCard
	PostPageCardContainer
	PostPageCardContainer Story
	Manual Test
	Component Update
Build App Component
	Objective
	BlogPage
	App
	TagWidget
	TopNav
	Category
	Manual Test
	Storybook
Unittest React Component (Part 1)
	Objectvie
	Jest
	Testing Library
	Test philosophy
	Test TagWidget
	Test Ajax
	Snapshot Test
Unittest React Component (Part 2)
	Objectives
	Test Filter Function
	Test Pagination
	Test PostPage
	Test Coverage
Integrate Frontend App with REST API
	Objective
	Index.js
	Proxying API Requests
Add Preview Support to React project
	Objective
	WorkFlow
	Wagtail headless preview
	Rest API
	PostDetail Component
	Live view
	Conclusion
Deploy REST API
	Objective
	Workflow
	Compose File
	Nginx Service
	Web Service
	Environment Variables
	Test Build
	Docker Ignore
	Deploy to DigitalOcean
	Config site
	Config DNS
Deploy Storybook
	Objectives
	Workflow
	Config DNS
	Workflow
	DockerFile
	Nginx
	Deploy
Deploy React app
	Objective
	Workflow
	Config DNS
	DockerFile
	Nginx
	API Domain
	CORS
	Media Domain
	Nginx
	Live View from Wagtail Admin
REST API FAQ
	Troubleshoot
	Useful Commands
Frontend FAQ
	Module not found: Error: Can’t resolve
	Nothing was returned from render. This usually means a return statement is missing