After releasing Build SPA with React and Wagtail, which teach people how to build a SPA (single-page application) with React and Wagtail CMS
I received some user feedback:
- Is it possible to make React and Django work in
Hybridmode, instead of two projects running on two domains.
- Is it possible to make the React project has good SEO?
I will help people solve the above problems in this book, which is my #3 eBook of Wagtail.
This book will teach you how to build a blog with React, Wagtail CMS and SSR (Server-Side Rendering), which has good performance and good SEO.
By the end of this course, you will be able to:
Docker Composeto do development
- Create blog models to work with Wagtail.
Django shellto debug, test code and check data in terminal.
- Learn how to write serializer for Django models.
- Use the
factorypackage to help create test data
- Create React project from
python-webpack-boilerplateand load it in Django template.
- Understand React Components and the component lifecycle
- Test React component using
@testing-libraryfamily of packages.
- Understand difference between
SSR, and what is
- Learn how to server-render React component using
- Deploy the production app to DigitalOcean
- Django 3.1
- Wagtail 2.12
- Webpack 5
What is included
- A PDF ebook which contains about 30 chapters.
- 20 screenshots and 7 diagrams, all created by me.
The live demo is also available if you want to check.
- The page UI is built with React.
- The page content is constructed with Wagtail.
- All pages are SEO friendly.
Table of Contents
- Setup project
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- Page Templates in Wagtail
- Routable Page
- Full Text Search
- Page Serializer (Part 1)
- Page Serializer (Part 2)
- UnitTest (Part 1)
- UnitTest (Part 2)
- Create React Project
- Dockerizing React project
- Import Bootstrap Theme
- Building React Component (TagWidget)
- Building React Component (SideBar)
- Building React Component (PostDetail)
- Building React Component (PostPage)
- Building React Component (BlogPage)
- Building React Component (BlogPage Pagination)
- Building React Component (PageProxy)
- Server Side Rendering
- Unittest React Component (Part 1)
- Unittest React Component (Part 2)
- Next Steps
- Backend FAQ
- Frontend FAQ