Recently, I’ve been working on a WordPress plugin that utilizes a React app. The only major downside is that pulling together a ZIP file that can be installed into WordPress is a pain. Essentially, I need to create a folder, copy the main plugin file and two folders into this distribution. It’s not hard but I really hate doing repetitive tasks. Thankfully, we can automate this to make life easier. Here’s what to do.

First, we want to edit the package.json file in our React app. This is where various utility scripts can be placed to help us with development. Inside that file, locate the "scripts" section. Each one of these can typically be run by entering npm run <command> in your Terminal. At the end of the list, add a new command. It should look something like this:

	"scripts": {
		...
		"build-zip": ""
	}

That adds a new command we can trigger with npm run build-zip. Currently it doesn’t do anything but it provides the place for us to gather the commands we want to run.

Next, I made a list of the tasks I needed to run to create the ZIP file in plain English. That would I could make sure I knew every step I needed to take. From there, I could turn them into commands to run. I named the temporary folder rapid-products-woocommerce because that’s what I want the folder’s name to be inside the final ZIP file. Here’s what I ended up with:

• Create a “build” of the app with npm run build.
• Make a directory called rapid-products-woocommerce
• Copy rapid-products-woocommerce.php to rapid-products-woocommerce
• Copy folder “includes” to rapid-products-woocommerce
• Copy folder “build” to rapid-products-woocommerce
• Zip folder rapid-products-woocommerce
• Delete folder rapid-products-woocommerce

From here, I wanted to create a matching Terminal command for each step. That way I could test them, one by one, to see if there were any problems. Here are the individual commands I ended up with:

npm run build 
mkdir ./rapid-products-woocommerce
cp -r ./rapid-products-woocommerce.php ./rapid-products-woocommerce/rapid-products-woocommerce.php
cp -r ./includes ./rapid-products-woocommerce/includes
cp -r ./build ./rapid-products-woocommerce/build
zip -r ./rapid-products-woocommerce.zip ./rapid-products-woocommerce
rm -r ./rapid-products-woocommerce

I ran each one of these individually and they worked! The next step was to link them together. In Terminal, we can link commands together using &&. That says, if the previous command is successful, run the next command. We also need to remove the breaks. Here’s what that looks like when I pull that all together.

"npm run build && mkdir ./rapid-products-woocommerce && cp -r ./rapid-products-woocommerce.php ./rapid-products-woocommerce/rapid-products-woocommerce.php && cp -r ./includes ./rapid-products-woocommerce/includes && cp -r ./build ./rapid-products-woocommerce/build && zip -r ./rapid-products-woocommerce.zip ./rapid-products-woocommerce && rm -r ./rapid-products-woocommerce"

Now when I’m ready to make a release, I just run npm run build-zip in the command line and in a couple of seconds I have a ZIP file ready to go.

So if you find you’re often doing the same tasks repeatedly, you can combine those into a single command. It’ll make development easier and more reliable. If you have any tips for using command line scripts with WordPress development, let us know in the comments.