You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,18 +6,18 @@ If you're new to headless, this is the place to start. If you've created headles
6
6
7
7
## What is Headless WordPress?
8
8
9
-
When we talk about headless with WordPress, we mean using WordPress for content creation but not for front-end rendering. Instead of using traditional WordPress themes, you develop your front-end using a JavaScript framework like React. Also, the front-end is hosted on a separate server from the WordPress instance.
9
+
When we talk about headless with WordPress, we mean using WordPress for content creation but not for front-end rendering. Instead of using traditional WordPress themes, you develop your front-end using a JavaScript framework like React. A separate server hosts the front-end from the WordPress instance.
10
10
11
11
Since the front-end is responsible for displaying content to the end-user, it needs to access the content. To do that, it utilized the WordPress REST API or GraphQL via [WPGraphQL](https://www.wpgraphql.com/).
12
12
13
13
## Why Headless?
14
14
15
15
Headless is gaining momentum for a few reasons:
16
16
17
-
- Developer Choice - developers want to use modern frameworks like React to build sites and applications, and headless enables that possibility.
18
-
- Scalability - When you remove the burden of WordPress's rendering, you reduce the load on your WordPress instance, which allows WordPress to scale much more manageable.
19
-
- Security - Removing the responsibility of rendering from WordPress minimizes the surface area for attacks. Now, you can choose only to expose the API to the internet.
20
-
- Integrations - The WordPress community indeed provides many integrations through plugins, but they don't always work well together. When you go headless, you have more control over your integrations, and most services support integrating with JavaScript and Node.js.
17
+
-**Developer Choice** - Developers want to use modern frameworks like React to build sites and applications, and headless enables that possibility.
18
+
-**Scalability** - A headless WordPress site scales more manageably because WordPress does not hold sole responsibility for rendering a site.
19
+
-**Security** - Removing the responsibility of rendering from WordPress minimizes the surface area for attacks. Now, you can choose only to expose the API to the internet.
20
+
-**Integrations** - The WordPress community provides many integrations through plugins, but those plugins don't always work well together. In a headless instance, you have more control over your integrations because most services support integrating with JavaScript and Node.js.
21
21
22
22
## Hosting Your Headless Apps
23
23
@@ -35,7 +35,7 @@ We call the Node portion of your site an **app**. An app can have _n_ number of
35
35
36
36
An **app** is a logical container of all of your _environments_ for the Node portion of your site. An app can have multiple _environments_ like production, staging, and development.
37
37
38
-
Apps are linked to a single GitHub repository (i.e., https://github.com/matt-landers/headless-wpe). Environments link to a branch within the repository of the app. It's up to you to decide which branch relates to which environment. It's common for your _main_ branch to be linked to your production environment.
38
+
Apps link to a single GitHub repository (i.e., https://github.com/matt-landers/headless-wpe). Environments link to a branch within the repository of the app. It's up to you to decide which branch relates to which environment. For example, it's common for your _main_ branch to link to your production environment.
39
39
40
40
Here's an example configuration for a typical app with a Production and Development environment.
41
41
@@ -85,8 +85,8 @@ Each **environment** has the following properties:
85
85
-`wp_environment_name` - the name of the WordPress environment (found in the user portal) that you want to link to your Node environment.
86
86
-`env_variables` (optional) - an array of environment variables that you want to be available at build-time and runtime as OS environment variables.
87
87
- In Node, you can access these variables with `process.env`.
88
-
- Environment variables are useful for storing information needed to build or run your application, like API keys/secrets.
89
-
-`domains` - (optional) If you want to connect a custom domain, you need to configure your domain one of 2 ways. Custom domains require a `production` environment.
88
+
- Environment variables help store information needed to build or run your application, like API keys/secrets.
89
+
-`domains` - (optional) If you want to connect a custom domain, you need to configure your domain one of 2 ways. Custom domains require a `production` environment.
90
90
- Root CNAME pointed to `js.wpenginepowered.com`
91
91
- A records with the following IPs:
92
92
-`141.193.213.10`
@@ -96,6 +96,6 @@ Each **environment** has the following properties:
96
96
97
97
## Connecting Your WordPress Backend
98
98
99
-
Each app environment pairs with a WordPress backend. In the [WP Engine User Portal](https://my.wpengine.com), the WordPress equivalent to an _app_ is a _site_. A site has environments just like apps. Each_app environment_ needs to pair with a `_site environment_` via the site's environment id found in the user portal. You make the connection by setting the `wp_environment_name` property for each environment in your app config.
99
+
Each app environment pairs with a WordPress backend. In the [WP Engine User Portal](https://my.wpengine.com), the WordPress equivalent to an _app_ is a _site_. A site has environments just like apps. Therefore, each_app environment_ needs to pair with a `_site environment_` via the site's environment id found in the user portal. You make the connection by setting the `wp_environment_name` property for each environment in your app config.
100
100
101
101
The `wp_environment_name` property is **required** as it provides the authorization context for the environment, which determines which users have access to modify and deploy the _app environment_.
0 commit comments