Build SPA with React and Wagtail

Description

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