This project provides just the web application. You will need to have the JSON API project running already before you use this application. You can get more information about that API via this walk-through (API is hosted via github here - https://github.com/jnewland/mpr-6zhmaut-api).
You need the following things for this app to work:
To get started you need to put the TypeScript React app on your local machine (or on the raspberry pi). Also, you need to make sure you have the latest version of
npm installed on your machine.
notes: move your change directory to your project directly
cd /projects git clone https://github.com/cbschuld/monoprice-multizone-interface.git cd monoprice-multizone-interface npm install
There is file in the root path called
env.sample.tsx. You will need to copy this file over as
env.tsx and adjust this file to match your amplifier/controller setup before you go to the next step. You will see in there that you can use custom icons for each zone/room. I have included what I use in my sample image to help your setup.
Now that your environment is updated you can build the App to get ready to ship it to the Raspberry Pi (where your API is located most likely). Staying on the same machine run the following.
npm run-script build
Next, on the Raspberry Pi run the following commands to install nginx
sudo apt-get update sudo apt-get install nginx sudo chown -R pi:root /var/www/html
Wherever you ran the
npm run-script build command you will now see a
build directory. Copy that directory to the
/var/www/html path on the Raspberry Pi. In my case I built it on my local development machine and just used
scp to copy the build directoy to the Pi. (Note: my Raspberry Pi is located at 10.0.0.82)
cd /projects/monoprice-multizone-interface scp -r * firstname.lastname@example.org:/var/www/html/
That is all it takes to use this application; if you point your browser to the IP address of the Raspberry Pi you’ll see the App!