🥜
Peanut for Wordpress
  • Introducing Peanut for Wordpress!
  • Getting Started
    • Quickstart
    • Coding Examples
    • CLI Reference
  • Building Elements
    • Components
    • Blocks
    • Plugins
    • Themes
  • Configuration
    • JSON Configuration
    • Webpack
    • ESLint
    • Wordpress
  • Whiteboard
    • Tutorial
  • Framework
    • Javascript SDK
    • REST API
  • SWP Labs
    • About Us
    • Support Us
Powered by GitBook
On this page
  • Installation
  • NPM Install
  • Clone the GitHub Repo
  • Setup
  • Wordpress Environment Settings
  • Download and Activate the Peanut WordPress Plugin
  • Using the Peanut Setup Command
  • Starting the application
  • Ensure you have the minimum required version of Node.js
  • Running the CLI
  • Building for Production
  1. Getting Started

Quickstart

PreviousIntroducing Peanut for Wordpress!NextCoding Examples

Last updated 7 months ago

Installation

NPM Install

To install in your node project, you can run:

npm i @swplabs/peanutforwp --save-dev

After installation, you can run the following cli command to list all commands and options:

npx peanut help

Alternatively, you can install globally using the following command:

npm i @swplabs/peanutforwp -g

Note: Installing globally will allow you to run the "peanut" cli command anywhere. This is helpful when you have multiple projects with different source directories.

Clone the GitHub Repo

You can download the full source from our public GitHub repo using or go to our for cloning instructions similiar to this:

git clone git@github.com:swplabs/peanut.git

Setup

Wordpress Environment Settings

Enable Permalinks

Enable Debugging

Set Wordpress Environment

Download and Activate the Peanut WordPress Plugin

The Peanut for Wordpress application requires the Peanut Wordpress plugin which enables the framework for loading components and blocks built with the app.

git clone git@github.com:swplabs/peanut-plugin.git

Using the Peanut Setup Command

To create a 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

Starting the application

Ensure you have the minimum required version of Node.js

To run the application, you'll need to have the following minimum version of Node.js required installed:

Running the CLI

To start building your blocks, plugins, components, and themes, you can run the cli:

npx peanut [develop|build|lint|format|help] [options]

You can get a list of CLI commands and options by running the help command:

npx peanut help

Building for Production

To trigger a production-ready compilation of your work (ie. minification of code, etc), you can add the following environment vars to your commands:

ENVIRONMENT="prod" NODE_ENV="production" npx peanut [develop|build]

Permalinks are the permanent URLs of your Wordpress content. At the moment, Peanut For Wordpress requires that Permalinks to set to something other than the default "Plain". See "" for instructions on how to change your permalink settings.

Script Debugging must be set to true when in development mode for Peanut editor scripts to function. See for instructions on how to turn on in your Wordpress development environment.

In order to use our Whiteboard component prototyping application, you'll need to type to either 'local' or 'development'.

You can obtain the plugin via the :

Once cloned, you can copy it to your local Wordpress content directory (wp-content/plugins/). You'll need to then go into your Wordpress Admin and .

For installation, we recommend using or to manage your Node.js versions. If you are not using a package manager, see the for installers and binaries.

For more examples, see "".

this link
GitHub repo homepage
Choosing your permalink structure
Wordpress debugging mode
set your local Wordpress environment
GitHub repo
enable the plugin
NVM
Volta
Node.js download page
Using the CLI