JSON Configuration

Configuration for Peanut for Wordpress is handled by creating a "peanut.config.json" in root directory of your "elements" source directory.

This file will allow you to update any of the environment variables that are used to set custom values used within the application.

An example of how to setup the directory structure of your "elements" source folder can be found by visiting our examples GitHub repo.

Sample configuration JSON

To create a custom configuration file (peanut.config.json) and element subfolders for your project within your current working directory, you can use the setup CLI command:

npx peanut setup

Configurable Environment Variables

All environment variables are set as strings.

---

ENVIRONMENT

Sets the compilation environment settings.

Values: "local", "prod"

Default: "local"

---

PFWP_SSE_HOST

Defines the hostname used for the HMR and SSE server. Used for send HMR updates.

Default: "http://localhost/"

---

PFWP_SSE_PORT

Defines the port used when running the HMR and SSE server.

Default: "5050"

---

NODE_ENV

Sets the Node environment.

Values: "development", "production"

Default: "development"

---

PFWP_DEBUG

Turns on debug mode for more information in logging.

Values: "false", "true"

Default: "false"

---

PFWP_WP_HOST

Defines the hostname used to view your Wordpress site.

Default: "http://localhost/"

---

PFWP_WP_PUBLIC_PATH

Defines the root of public path used to view static assets on your Wordpress site.

Default: "/"

---

PFWP_CSS_IN_JS

Controls whether to extract CSS that's included in javascript entries or to use style-loader to load them dynamically.

Values: "false", "true"

Default: "false"

---

PFWP_WP_ROOT

Absolute path to your local environment Wordpress root directory.

Example: "/var/www/html"

---

PFWP_THEME_PATH

Path relative to your Wordpress root directory where your active theme directory lives.

Example: "/wp-content/themes/example-theme"

---

PFWP_WB_PORT

Defines the port used when running the Whiteboard application.

Default: "5000"

---

PFWP_WB_HEAD_COMPONENTS

---

PFWP_WB_FOOTER_COMPONENTS

---

PFWP_DATA_MODE

Controls how base64 encoded data is passed to the components REST API. Either as a path value in URL structure or as a query string.

Values: "path", "query"

Default: "path"

---

PFWP_CONFIG_HOOKS

---

PFWP_CONFIG_ESLINT

Enable ESLint configuration customization. Value should be the name of the file that will be used to modify the configuration.

Example: "eslint.js"

---

PFWP_CONFIG_WEBPACK

Enable webpack configuration customization. Value should be the name of the file that will be used to modify the configuration.

Example: "custom.webpack.js"

---

PFWP_ENABLE_HMR

Enables Hot Module Reloading for React driven elements during "develop" compilation mode.

Values: "false", "true"

Default: "true"

---

PFWP_ENABLE_WB

Enables Whiteboard tool during "develop" compilation mode.

Values: "false", "true"

Default: "false"

---

PFWP_PRIMARY

---

PFWP_SECONDARY