Azure Remote Monitoring WebUI
1. Deploy a Remote Monitoring Solution
It is also possible to deploy the solution locally.
2. Setup Dependencies
- Install node.js
- For development, you can use your preferred editor
3. Environment variables required to run the Web UI
In order to run the Web UI, the environment variables need to be created at least once. More information on configuring environment variables here.
The endpoint given above is the base url you navigate to in order to see your deployed solution.
Build, run and test locally
npm start: Launches the project in browser - watches for code changes and refreshes the page.
npm run build: Creates a production ready build.
npm test: Runs test in watch mode, press
npm flow: Runs Flow type checker. Learn more about Flow here.
The Web UI contains the following sections under src:
assets: Contains assets used across the application. These include fonts, icons, images, etc.
components: Contains all the application react components. These in include containers and presentational components.
services: Contains the logic for making ajax calls as well as mapping request/response objects to front end models.
store: Contains all logic related to the redux store.
styles: Contains sass used across the application mixins, theming, variables, etc.
utilities: Contains helper scripts used across the application.
Configuration and Environment variables
The Web UI configuration is stored in app.config.js
The configuration files in the repository reference some environment variables that need to be created at least once. Depending on your OS and the IDE, there are several ways to manage environment variables:
- Windows: the variables can be set in the system as a one time only task. The env-vars-setup.cmd script included needs to be prepared and executed just once. The settings will persist across terminal sessions and reboots.
- For Linux and OSX environments, the env-vars-setup script needs to be executed every time a new console is opened. Depending on the OS and terminal, there are ways to persist values globally, for more information these pages should help:
Contributing to the solution
Please follow our contribution guildelines and the code style conventions.
Customizing the solution
Please see our developer walkthroughs for more information on customizing and adding to the application.
This project was bootstrapped with Create React App.
You can find a guide to using it here.