Development Environment Setup
Use this guide to make your experience developing with Faust.js fast and efficient.
As you may know, WordPress is a content management system (CMS) that allows you to create a website with themes/plugins/etc. It is one of the most popular CMSs globally, used by over 40% of all websites.
What is Headless?
Up until recently, WordPress could only build monolithic websites. Meaning, the frontend, and backend were both tightly coupled via themes and plugins. Headless shifts away from a monolithic approach.
Headless is a term used when the frontend detaches from the backend. WordPress is used as a backend (headless CMS) in a more specific sense, while the frontend uses a more modern framework, like React.
Headless allows designers and developers to use modern frameworks they are familiar with to build fast and reliable frontend experiences with an easy and standard backend.
Setting up WordPress for Headless
To setup WordPress for headless, follow the Setting Up WordPress guide for Faust.js
Languages & Tooling
If you come from a WordPress background, you may be familiar with doing everything in PHP.
To quote MDN Web Docs:
Although it is not required to know TypeScript, we recommend it, as it makes the developer experience, especially when using Faust.js, much better.
Node.js & NPM
You can download the installer for Node.js (and NPM) via https://nodejs.org/en/download/.
GraphQL is a query language for APIs. In Faust.js, it is used to define the data schema of WordPress.
The critical distinction between GraphQL and a REST API is that GraphQL is a query language, meaning that you can ask for as much or as little of the data as you want. Whereas with REST, you are stuck with a fixed set of data.
For example, you may want to request a list of WordPress posts, but I only want the title and content. In a GraphQL API, you can specify these two fields as the only pieces of data to fetch, and you get that data back. In a REST API, you cannot determine that level of granularity, and you're left with requesting more data than you may need.
To learn more about GraphQL, check out the GraphQL docs.
We recommend using Git for version control. Typically users will store their code in a Git repository on GitHub or GitLab.
To get started with Git, download and install the latest release for your OS.
In addition, there are a few extensions that will make your experience building headless WordPress sites a lot easier:
- VS Code ES7 React/Redux/GraphQL/React-Native snippets - A set of snippets for React, Redux, and GraphQL
- Prettier - Opinionated code formatted that enforces a consistent style
If you are using Windows, we suggest you install Powershell Core and Windows Terminal and then use Windows Terminal to run your command line commands. These two tools provide an experience that closely resembles the command line experience you would see in a Linux environment, making things easier for you.
The next step we will take a small introduction to Next.js.