# 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](https://github.com/swplabs/peanut-examples).

### Sample configuration JSON

{% embed url="<https://gist.github.com/wackycoffee/346184ecfb55e32c8323da2f7bd74397>" %}

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:

```bash
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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.swplabs.com/peanut-for-wordpress/configuration/json-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.