Skip to main content

Development Environment Setup

Setting up your development environment with this guide will make your experience developing with Faust.js fast and efficient.

WordPress Site#

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 in the world, and it is used by over 40% of all websites.

What is Headless?#

Up until recently, WordPress was used to build monolithic websites. Meaning, the frontend and backend were both tightly coupled via themes and plugins. This has started to change recently with the popularity of Headless.

Headless is a term used when the frontend is detached from the backend. In a more specific sense, when WordPress is used as a backend (headless CMS), 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 a backend that is easy and familiar.

Setting up WordPress for Headless#

To setup WordPress for headless, follow the Setting Up WordPress guide for Faust.js

Languages & Tooling#

If you are coming from a WordPress background, you may be familiar with doing everything in PHP.

The frontend landscape has embraced JavaScript/TypeScript as the languages of choice, so it will be helpful to know what these languages are and how they play a part in developing headless WordPress sites.

JavaScript#

To quote MDN Web Docs:

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

JavaScript is used in almost all frontend frameworks like React, Vue, Angular, etc, and is the language Faust.js is written in.

There is no need to install JavaScript, it is already bundled with your browser.

If you are new to JavaScript, check out the JavaScript basics on MDN Web Docs.

TypeScript#

JavaScript is what is known as a loosely typed language. This means that you don't have to specify the type of a variable. While this is convenient, it can also lead to bugs and errors that you may not know about until runtime.

TypeScript is a typed superset of JavaScript that adds compile-time type checking. This means that you can catch errors at compile time rather than runtime.

Although it is not required to know TypeScript, it is highly recommended as it makes the developer experience, especially when using Faust.js, a whole lot better.

Node.js & NPM#

In the world of JavaScript development, you may see a lot of talk about Node.js and NPM.

Node.js#

Node.js is a JavaScript runtime that allows you to run JavaScript on the server. You may see this in JavaScript frameworks like Next.js, which provide server side functionality.

NPM#

NPM is a package manager for JavaScript. It is used to install JavaScript packages, such as Faust.js, React, etc.

Installation#

You will need to install Node.js and NPM to write and develop JavaScript applications.

You can download the installer for Node.js (and NPM) via https://nodejs.org/en/download/.

React#

React is a JavaScript library for building user interfaces. It is component based, meaning that you can break down your UI into smaller components that can be reused.

React is currently the world's most popular JavaScript framework, with about 60% of the market share. With this level of popularity comes plenty of great resources to learn React. We recommend viewing the React docs to get started.

GraphQL#

GraphQL is a query language for APIs. In Faust.js, it is used to define the data schema of WordPress.

The key 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 an example, I may want to request a list of WordPress posts, but I only want the title and content. In a GraphQL API, I can specify these two fields as the only pieces of data to fetch, and I'll get just that data back. In a REST API, I am unable to specify that level of granularity, and I'm left with requesting more data than I may need.

To learn more about GraphQL, check out the GraphQL docs.

Git#

Unlike WordPress, where you may be updating plugins and themes from the admin interface, building a JavaScript frontend is very easy to version control; it's only JavaScript code and maybe some assets.

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.

VS Code#

Finally, we recommend you use VS Code for your code editor. VS Code has powerful intellisense, a built-in debugger, and a lot of other features that make it a great editor for JavaScript development.

In addition, there are a few extensions that will make your experience building headless WordPress sites a lot easier:

What's Next?#

The next step is to setup your basic headless site.

Edit this page