Setup Front End

Setup Front End

Compiling the front end is resource intensive. It might be better to compile the front end on a more powerful computer such as a Macbook and just copy the output of the build to the Raspberry Pi, I have had issues where it fails to compile on a Raspberry Pi 3 due to Out of Memory Errors. These instructions are written to do it on the Raspberry Pi and it should complete successfully on a Raspberry Pi 4 .

It is assumed the git repository was cloned to the home directory, so lets start there:

cd ~

First we need to install NodeJS and npm:

sudo apt install nodejs -y
sudo apt install npm -y

Before we can build the application we need to install the web dependencies (be patient, this part can take a while!):

cd ReefberryPi/rbp-web/
sudo npm install

finally, we need to edit the .env file and specify the host name and port the backend Reefberry Pi controller is running Flask on.

On the raspberry pi that is running the backend, we need the hostname that other computers can resolve. Some networks append .local or .home suffix to the hostname.

sudo nano .env

enter the backend hostname. If the computer opening the web browser can not resolve this name, it will not connect to the backend! (example reefberry.local) Make changes and save the file.

REACT_APP_API_HOSTNAME = {backend_hostname}
REACT_APP_API_PORT_NUM = 5000

Now we can build the React application (this can also take considerable time to compile on Raspberry Pi)

npm run build

copy the build output to the webserver directory

sudo cp -R build/* /var/www/html/

Installation complete! You can now access the Reefberry Pi web console.
Default credentials are:

http://<servername>>/

user: pi 
password: reefberry