This guide works through the build and deployment of a React based UI for the API that we deployed in the API deployment. Let's have a look at what the UI does locally, like we did with the API deployment.
In your local shell run the following:
# clone the docs support repo locally
git clone https://github.com/hamlet-io/docs-support
# change into the ui directory
# install the required packages
# start the application locally
This should take you to a browser page ( if it doesn't head to http://localhost:3000 in your local browser ) that shows the My Status Web app.
It's a simple page that shows a greeting, a location and an image based on the location. At this stage the app doesn't know our location and it doesn't have a greeting. We need an API to get these details.
Let's set up the API and see what the UI will do.
In a new shell run the following:
docker run -p 8000:8000 -e LOCATION="work" -e GREETING="Working away" ghcr.io/hamlet-io/docs-support/hello_world:latest
This will start the API and make it available at http://localhost:8000
In the shell you started the UI from, cancel the current UI process with a break ( ctr + c on osx) and run the following in that shell:
Setting the REACT_APP_API_URL tells the UI where to get the status update from. The UI should update to show a new status and include our greeting.
The location and the greeting have both come from the API and are being displayed by the UI. The UI will check the API periodically to see if the status has changed.
Now that we've seen what the API and UI do, you can break both the UI and API to stop them running.