Install and Get Developing

Once you've generated your own copy of VajraWP plugin, you can begin following the below steps to get it up and running for development.

Although there are only a few steps to get started, knowing which one does what is crucial. Assuming you have already unzipped and put it in a WordPress root plugins directory.

NPM and Composer dependencies

Before we begin, make sure you are in your plugin directory in terminal/bash. You can run a single command shown below, which installs and configures both your npm packages and composer dependencies. This is a required step and you only need to run it one-time.

npm run install-scripts && npm run build:all

There maybe a few warnings but are safe to ignore. If all looks good, you can continue following the next step.

Dashboard App

VajraWP comes with a Dashboard app built with React and TailwindCSS which is available in the admin panel at /wp-admin/admin.php?page=vajrawp#/dashboard. As you may know already, any React app is required to be be built from its source in order to work, you can take a look at the Dashboard app source at your-plugin-root/src/dashboard.

npm run build:dashboard

You can either run the build step or use the dev script for continuous building while dev. Please note that everytime you need to make changes to the Dashboard app run the dev script and keep it running till you're done.

npm run dev:dashboard

Now that you have the Dashboard app built and ready for dev, you can continue and follow the next step for block development.

Blocks Dev

VajraWP uses wp-scripts under the hood, which is a webpack bundler script managed by the WordPress core team. In order to make use of it for developing WordPress plugins, you need to run the below command.

npm run build:blocks

The above command builds the available blocks in source your-plugin-root/src/blocks for WordPress to register. These will then be available to use as you'd use any other block from the Gutenberg aka Block Editor.

npm run dev:blocks

Run the dev script to continuosly watch and develop blocks for the block editor.

Congrats, you have finished the important parts of the VajraWP first steps, you can now continue to develop your own plugin. The next few articles in the doc explore all the other features included in VajraWP and how to use them.