ReactPress Dev-Environment

Several ReactPress users struggle with their local WordPress environment to provide the necessary dependencies that are needed to run ReactPress in development mode. Especially Nodejs seems to be a headache for a lot of users. To simplify developing with ReactPress I decided to provide a VirtualBox image that has all prerequisites for ReactPress already installed.

To install the ReactPress Dev-Environment you have to finish 8 steps:

Install Virtualbox

Make sure that you have VirtualBox installed. There are walk-throughs for Ubuntu, Mac OS, and Windows. So I will not repeat the installation process here.

If you don’t have VirtualBox installed, do that first and come back here afterward.

Import the ReactPress Dev-Environment into VirtualBox

VirtualBox import

Download the provided VM image from here and open VirtualBox. Import the image by clicking on Import Appliance... in the File menu.

Click on the folder icon and choose the downloaded image reactpress.ova.

Click on Next > and you see an overview of the image. Unless you know exactly what you are doing, you shouldn’t change anything.

Click on Import. VirtualBox will import your image.

Check the network settings

Select the newly created virtual machine and open the settings of that machine. Then check the Network tab and make sure that Attached to: select field is set to Bridged Adapter and the Name of the network adapter is set.

Set the shared folder

Next, go to the Shared Folders tab and select the existing entry and click on the folder icon in the middle. In the opened window change the Folder Path on the host machine to the location where you want your project code to be.

The selected folder should be empty. It will later hold the complete WordPress installation of your project including your React-app.

Click OK to close the settings.

Allow symlinks in shared folders

To work WordPress installation needs the ability to create symlinks. Therefore you need to open a terminal and enter the following code.

# Linux / Mac OS
VBoxManage setextradata "reactpress" VBoxInternal2/SharedFoldersEnableSymlinksCreate/reactpress 1

# Windows
"C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" setextradata "reactpress" VBoxInternal2/SharedFoldersEnableSymlinksCreate/reactpress 1

This command assumes that you didn’t change the name of your virtual machine nor the shared folder before. Now your virtual machine is ready to start.

Note the IP-Address of the virtual maschine

Start your virtual machine and wait till the login appears. Enter the following credentials:

Username:user
Password:pass

After logging in, you will be shown the IP address of the virtual machine among other information. Make a note of it.

The running VirtuaBox image for ReactPress

If the IP address doesn’t show or you want access at a later point you can enter the following command in your VM:

ip addr show

Reset the WordPress installation

Because the shared folder we created earlier is still empty we need to reset the WordPress installation. Therefore just execute the script ./reset_wordpress. (Please execute this script only once. Otherwise all your changes to the WP installation will be overwritten.)

Now a WP environment with access to Nodejs will be available to you at the IP address you wrote down at port 8080, e.g. http://192.168.0.74:8080/wp-admin.

The credentials for the admin are the same as for the VM:

Username:user
Password:pass

Develop your React app

Now you are ready to use the ReactPress plugin in your WP dev environment. I have written a whole article on how to easily embed React apps into WordPress with it.

I would suggest, that from now on you startup your ReactPress VM in headless mode and don’t reboot or power off your VM, but always save the state of it. This way you don’t have to re-login to start the development server.

You can even start and stop the virtual machine from the command line with:

VBoxManage startvm "reactpress" --type headless

VBoxManage controlvm "reactpress" savestate

18 Comments

  1. Barbara 10. April 2021
  2. Marco 10. April 2021
  3. Barbara 10. April 2021
  4. Barbara 10. April 2021
  5. Barbara 10. April 2021
  6. Barbara 11. April 2021
  7. Barbara 11. April 2021
  8. Marco 11. April 2021
  9. Barbara 12. April 2021
  10. Marco 12. April 2021
  11. Barbara 12. April 2021
  12. Barbara 12. April 2021
  13. Barbara 13. April 2021
  14. Barbara 13. April 2021
  15. Marco 14. April 2021
  16. Diego 16. April 2021
    • Marco 16. April 2021

Leave a Reply