This is my #4 eBook of Wagtail, and I wish to talk about the new architecture (Jamstack) in this book.
Jamstack is not a framework but a new architecture pattern.
- The frontend app will be prebuilt into highly optimized static pages (Markup) and assets, and deployed to the CDN netowrk.
Jamstack has below benefits:
- Because the pages are prebuilt and served from CDN, pages can load FAST.
- The reduced complexity make the site more secure.
- Easy to scale when traffic grow.
Next.js is a framework enabling React based web applications functionalities such as server-side rendering (SSR) and generating static websites (SSG)
We will use Next.js and React to build our frontend app.
We will use Wagtail to help us manage content and expose API to the frontend app.
Since Wagtail is built based on Django, we can also benefit from the great Python ecosystem.
We will use some 3-party Python packages to add
By the end of this course, you will be able to:
Docker Composeto do development
- Create blog models to work with Wagtail.
- Learn how to write serializer for Django models.
- Build a REST API for Wagtail CMS
- Use the
factorypackage to help create test data
- Test the REST API and generate test coverage report
- Create Next.js project with
- Learn React Function Component, and React hooks.
- Understand how Next.js page route works.
- Make Wagtail preview work with the Next.js.
- Build comment system based on
Emojisupport to the comment form.
- Learn to use
SWRto build lazy load comment list.
- Test React component using
@testing-libraryfamily of packages.
- Deploy the Next.js to the Netlify.
- Deploy the backend API to DigitalOcean
- Python 3.8
- Django 3.2
- Wagtail 2.14
- Node 14
- Next.js 11
- Bootstrap 5
- React Function Component, React Hooks
What is included
- A PDF ebook which contains about 40 chapters.
- 20 screenshots and 7 diagrams, all created by me.
- The source code (You can get it in the
Table of Contents
- Setup Wagtail Project
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- Build REST API (Part 1)
- Build REST API (Part 2)
- Routable Page
- Full Text Search
- UnitTest (Part 1)
- UnitTest (Part 2)
- Setup Next.js project
- Add SCSS support to Next.js project
- Building React Component (SideBar)
- Building React Component (StreamField)
- Building React Component (PostPage)
- Building React Component (BlogPage)
- Building React Component (BlogPage Pagination)
- Next.js routing (Part 1)
- Next.js routing (Part 2)
- Search Page
- Add Preview Support
- Import Comment Model
- Manage comment in Wagtail
- Add Mention support to comment form with Tribute.js
- Add Emoji support to Django form with Tribute.js
- Lazy Load CommentList
- Next.js UnitTest Guide (Part 1)
- Next.js UnitTest Guide (Part 2)
- Next.js UnitTest Guide (Part 3)
- Deploy REST API
- Deploy Next.js project to Netlify
- Next Steps
- Backend FAQ