This project was bootstrapped with Create React App. See local README for further info.
In order to keep coding quality and ensure the best development workflow, this project adopts some methodologies which should help tracking changes and preventing issues in production.
The correct way to create release it to use the completely automated yarn version
command.
It will bump the version in package.json
and create a tag. The tag is useful to track and create releases.
If you want to learn more about yarn version, read here.
yarn version
will also update the version of the Helm Chart to match the version supplied.
We are adopting a PR based approach with commits squash merge. It helps to keep the history cleaner and to be feature oriented.
The general rule is to create a pull request and only when marked as approved then bumping the version.
It needs to be done following the versioning rules.
It is really important to properly version every change and that the version change is the last commit in the PR. If further changes are done, then bump the version again. This will ensure that the git tag (release) will be reference the right commit.
The app can be run in a container. That is the current way it gets deployed in production.
You can build this app as a docker container image containing a Node.js Express server that will serve the production build of the app 🚀
The image can be easily build with docker build
as follows:
docker build -t connection-manager-ui:local .
You can run the app container as follows:
docker run -p 8080:8080 connection-manager-ui:local
The app needs to access the API to handle all the operations it needs to perform on the backend.
By default the app will access the API at http://localhost:3001 which is useful while developing.
It will use the same protocol as the app is loaded from to avoid the Mixed Content error
. Read more about here.
If the API is located on another URL, you can specify it by setting the value of either the React App variable REACT_APP_API_BASE_URL
or the regular env var API_BASE_URL
used by the bundled server.
The API will be accesed at either ${REACT_APP_API_BASE_URL}/api
or ${API_BASE_URL}/api
.
Note that the value must not end in '/'.
Using the REACT_APP_API_BASE_URL
is useful when running locally, for example if the API is at localhost 3002, you can start the app with REACT_APP_API_BASE_URL=http://localhost:3002 npm start
If using REACT_APP_API_BASE_URL
, the value must be set at build runtime, and it will be part of the build.
This means that if you build a docker image with this value, that image will always try to access the API on the defined URL.
Setting the API location using this option impedes using the same image for different environments like dev or uat; using a regular env var is more flexible and the recommended way.
In order to build an image that can be used for different environments, you use the provided Dockerfile
and set the value of the env var API_BASE_URL
at runtime.
The bundled node server which serves the app production build, will also expose a /config
endpoint that the app calls at boot time and which contains the value of the API_BASE_URL
env var if set.
The API_BASE_URL
var overrides the value of REACT_APP_API_BASE_URL
.
Let's say the app is published at https://ui.example.com; the sequence will be:
- The browser load the app from
https://ui.example.com
. This will be served by the included node server in the container/pod. - The app will set the API location to the default value or the value of
REACT_APP_API_BASE_URL
if not null - The app will fetch
https://ui.example.com/config
. This will be served also by the included node server, and it will return the value of the env varAPI_BASE_URL
- If the previous request returned a
API_BASE_URL
the app will use this as the API location.
The Connection Manager React App can include the version and commit hash the build uses.
The env variables responsible to add these values to the bundle are:
REACT_APP_VERSION
REACT_APP_COMMIT
You can set them as follows:
docker build \
--build-arg REACT_APP_VERSION=`cat package.json | grep version | sed -E 's/.*version": "([0-9\.]*)".*/\1/'` \
--build-arg REACT_APP_COMMIT=`git rev-parse HEAD` \
-t connection-manager-ui \
.
docker build \
--build-arg REACT_APP_VERSION=`cat package.json | grep version | sed -E 's/.*version": "([0-9\.]*)".*/\1/'` \
--build-arg REACT_APP_COMMIT=`git rev-parse HEAD` \
-t connection-manager-ui \
.
Once a new version the UI is ready to deploy simply tag the commit with a string beginning with "h". e.g. h1.3.20
. This will create and deploy the helm chart for this app. The version number used will match the version defined in package.json.
Authentication is enabled by default in a production build and it cannot be disabled.
In dev mode it can be selectively enabled or disabled depending on the preference. Simply open the browser console and run the commands
- To disable authentication
auth(false)
- To enable authentication
auth(true)