Build SPA with React and Wagtail
by Michael Yin
- Length: 170 pages
- Edition: 1
- Language: English
- Publisher: Leanpub
- Publication Date: 2021-01-14
This book will teach you how to build a SPA
(single-page application) using React
and Wagtail CMS
By the end of this course, you will be able to:
- Understand
Docker
and useDocker Compose
to do development - Build a REST API for Wagtail CMS
- Use the Django shell to test code and check data.
- Test the REST API and generate test coverage report
- Use the
factory
package to help create test data - Build a React app from
create-react-app
- Understand React Components and the component lifecycle
- Understand React router
- Use
Storybook
to develop React Components - Test React components and the frontend app
- Make
React app
work with Wagtail preview - Deploy the production app to DigitalOcean
This book includes:
- A PDF ebook which contains about 30 chapters.
- 10+ screenshots and 7 diagrams, all created by me.
- The source code of the project created in this course.
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
Donate to keep this site alive
To access the Link, solve the captcha.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.