Deploy the nRF Asset Tracker web application

To deploy the nRF Asset Tracker web application to Azure, complete the following steps:

1. Clone the project and install the dependencies

2. Configure the web application

3. Deploy the web application

4. Register a new user

Before starting, navigate to the working directory ~/nrf-asset-tracker.

Clone the project and install the dependencies

Clone the nRF Asset Tracker web application project and install the dependencies:

git clone --branch saga --single-branch \
  https://github.com/NordicSemiconductor/asset-tracker-cloud-app-js web-app
cd web-app
npm ci

Configure the web application

You need to configure the web application to be able to run it with your account.

Configure the IDs of your Azure resources

The web application requires the IDs of the Azure resources that were created during the setup of the stack. Run the following command in the web-app directory to copy the output to the .env.local file:

cd ../azure
./cli.sh react-config > ../web-app/.env.local
cd ../web-app

Version string

Run the following command to provide the version to the application:

echo REACT_APP_VERSION=`git describe --tags $(git rev-list --tags --max-count=1)` >> .env.local

Example for the .env.local file

Following is an example for the contents of the .env.local file:

REACT_APP_CLOUD_FLAVOUR=Azure
REACT_APP_AZURE_B2C_TENANT=nrfassettrackerprodusers
REACT_APP_AZURE_CLIENT_ID=fa8d9edc-3a85-455b-bcc4-f7389764184b
REACT_APP_AZURE_API_ENDPOINT=https://nrfassettrackerprodapi.azurewebsites.net/
REACT_APP_VERSION=v8.6.50

Deploy the web application

To build and deploy the web application to the Storage Account created while setting up the nRF Asset Tracker in your Azure account, run the following commands:

cd ../azure
export PUBLIC_URL=`az storage account show -g ${RESOURCE_GROUP:-nrfassettracker} -n ${STORAGE_ACCOUNT_NAME:-nrfassettracker} --query 'primaryEndpoints.web' --output tsv | tr -d '\n'`
export APP_STORAGE_CONNECTION_STRING=`az storage account show-connection-string --name ${STORAGE_ACCOUNT_NAME:-nrfassettracker} --query 'connectionString'`
cd ../web-app
npm run build
az storage blob service-properties update \
   --connection-string ${APP_STORAGE_CONNECTION_STRING} \
   --account-name ${STORAGE_ACCOUNT_NAME} \
   --static-website \
   --404-document index.html \
   --index-document index.html
az storage blob upload-batch \
   --connection-string ${APP_STORAGE_CONNECTION_STRING} \
   --account-name ${STORAGE_ACCOUNT_NAME} \
   -s ./build -d '$web'
echo "Done. Open $PUBLIC_URL to view the web app."

After running the above commands, you can open the domain name printed in APP_URL in your browser to view the web application.

Register a new user

Since there are no predefined user accounts in the B2C Active Directory, you need to register a new user.

Register a new user