React Wagtail Course is now available

Michael Yin

Full Stack Developer

Last updated on Jan 02 2021

Table of Contents


In 2017, when I discovered Wagtail CMS, I found no good tutorials for people to learn - just the official docs and some repos on Github.

So I started writing a Wagtail Tutorial Series on my blog, which teaches people how to build projects using Wagtail CMS.

Now the series contains nearly 30 blog posts, and many people benefit from them.

I also received much invaluable user feedback:

  1. How to make Wagtail work with modern frontend tech such as React, SCSS, ES6
  2. How to run unit tests in Wagtail projects
  3. How to use Wagtail's REST API backend.

People ask because they can not find good tutorials online to help them solve the above problems, so I think maybe I can help them when I have time.


After finishing my Django Celery book (which I wrote with Michael Herman from - it will be published soon), I realized it was time to do it.

My goal is to build a course that teaches people to develop an SPA (single-page application) from scratch.

I listed the pain points from feedback first, and then I wrote an outline that helped people solve them step by step. (I do not want the learning curve to be steep).

When the outline seemed good to me, I started writing the tutorial series.

Since I am a freelance developer and have regular work to do, I usually write the course on the weekend. So I am more productive.

I spent about 4 months finishing the draft version.

After that, I reviewed the course several times to fix typos, coding bugs and other stuff.

When all work was done, I published the course on

The name of the course is Build SPA with React and Wagtail

Here I want to say thanks to my wife and lovely son, I could not have finished it without your support, and I can finally delete it from my to-do list. 😀

Is it FREE?

NO, it is a paid course

Giving the course a price can force me to keep the course as high quality as possible.


This course 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:

  1. Understand Docker and use Docker Compose to do development
  2. Build a REST API for Wagtail CMS
  3. Use the Django shell to test code and check data.
  4. Test the REST API and generate test coverage report
  5. Use the factory package to help create test data
  6. Build a React app from create-react-app
  7. Understand React Components and the component lifecycle
  8. Understand React router
  9. Use Storybook to develop React Components
  10. Test React components and the frontend app
  11. Make React app work with Wagtail preview
  12. Deploy the production app to DigitalOcean

What included

  1. A PDF ebook which contains about 30 chapters.
  2. 10+ screenshots and 7 diagrams, all created by me.
  3. The source code of the project created in this course.


The live demo is also available if you want to check.

Table of Contents

  1. Introduction
  2. Setup project
  3. Dockerizing Wagtail App
  4. Add Blog Models to Wagtail
  5. StreamField
  6. Build REST API with Django REST Framework
  7. Build REST API for Wagtail Page
  8. UnitTest REST API (Part 1)
  9. UnitTest REST API (Part 2)
  10. Setup frontend project
  11. Dockerizing React project
  12. Build React Component with StoryBook
  13. Add SCSS support to React project
  14. Building React Component (Part 1)
  15. Building React Component (Part 2)
  16. Building React Component (Part 3)
  17. React Router (Part 1)
  18. React Router (Part 2)
  19. Build App Component
  20. Unittest React Component (Part 1)
  21. Unittest React Component (Part 2)
  22. Integrate Frontend App with REST API
  23. Add Preview Support to React project
  24. Deploy REST API
  25. Deploy Storybook
  26. Deploy React app
  28. Frontend FAQ

Build SPA with React and Wagtail

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, Wagtail CMS and React.

He has published some ebooks on leanpub and tech course on

He is also the founder of the AccordBox which provides the web development services.

Table of Contents

This book will teach you how to build a modern blog with Wagtail CMS

Read More


Get notified about new great Web Development Tutorial