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:
If you don’t have VirtualBox installed, do that first and come back here afterward.
Import the ReactPress Dev-Environment into VirtualBox
Download the provided VM image from here and open VirtualBox. Import the image by clicking on
Import Appliance... in the
Click on the folder icon and choose the downloaded image
Next > and you see an overview of the image. Unless you know exactly what you are doing, you shouldn’t change anything.
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.
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.
OK to close the settings.
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:
After logging in, you will be shown the IP address of the virtual machine among other information. Make a note of it.
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:
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