eBook: Build Blog with React (SSR) and Wagtail

Table of Contents

Background

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:

  1. Is it possible to make React and Django work in Hybrid mode, instead of two projects running on two domains.
  2. 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.

Objectives

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:

  1. Understand Docker and use Docker Compose to do development
  2. Create blog models to work with Wagtail.
  3. Use PDB and Django shell to debug, test code and check data in terminal.
  4. Learn how to write serializer for Django models.
  5. Use the factory package to help create test data
  6. Create React project from python-webpack-boilerplate and load it in Django template.
  7. Understand React Components and the component lifecycle
  8. Test React component using Jest and @testing-library family of packages.
  9. Understand difference between CSR and SSR, and what is Rehydration
  10. Learn how to server-render React component using django-react-templatetags and hypernova
  11. Deploy the production app to DigitalOcean

Tech

  • Django 3.1
  • Wagtail 2.12
  • Webpack 5
  • React
  • Hypernova

What is included

  1. A PDF ebook which contains about 30 chapters.
  2. 20 screenshots and 7 diagrams, all created by me.

Demo

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

Notes:

  1. The page UI is built with React.
  2. The page content is constructed with Wagtail.
  3. All pages are SEO friendly.

Table of Contents

  1. Introduction
  2. Setup project
  3. Dockerizing Wagtail App
  4. Add Blog Models to Wagtail
  5. Page Templates in Wagtail
  6. StreamField
  7. Routable Page
  8. Pagination
  9. Full Text Search
  10. Page Serializer (Part 1)
  11. Page Serializer (Part 2)
  12. UnitTest (Part 1)
  13. UnitTest (Part 2)
  14. Create React Project
  15. Dockerizing React project
  16. Import Bootstrap Theme
  17. Building React Component (TagWidget)
  18. Building React Component (SideBar)
  19. Building React Component (PostDetail)
  20. Building React Component (PostPage)
  21. Building React Component (BlogPage)
  22. Building React Component (BlogPage Pagination)
  23. Building React Component (PageProxy)
  24. Server Side Rendering
  25. Unittest React Component (Part 1)
  26. Unittest React Component (Part 2)
  27. Deploy
  28. Next Steps
  29. Backend FAQ
  30. Frontend FAQ

Build Blog with React (SSR) and Wagtail

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

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

Django SaaS Template

It aims to save your time and money building your product

Learn More

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More
© 2018 - 2024 AccordBox
Cookies Privacy