The Azure Sample Webapp aims to be an example of a React web application based on the Cosmo Tech Simulation Digital Twin Platform and Azure cloud technology.
This project demonstrates how to setup a web application with authentication, scenario management features and PowerBI visualization.
It thus provides a fully configured solution based on an example simulator made using our Platform to illustrate the possible features (the example simulator, "Brewery", models customers satisfaction and beer stocks evolution in bars).
You can use this project as a base to build a front-end for your own Digital Twin solution.
To do that, you need the Simulation Digital Twin Platform to be deployed in your Azure tenant with a ready-to-use simulator. Please note that we provide detailed step-by-step tutorials on our portal - Contact Cosmo Tech for access.
Recommended Operating System: Debian (other OS have not been tested) Supported browsers: Chromium 90, Chrome 91, Firefox 78
The instructions below explain how to clone this project to build your own customized front-end for a Simulation Digital Twin solution.
First, from the GitHub interface, create a new repository by importing the azure-sample-webapp repository.
This will allow you to develop your own front-end using git, and still be able to receive the new features of the azure-sample-webapp project.
You can now use the commands below to clone and configure your github project:
# Replace by the URL of your own repository (e.g. my-org/my-project.git)
git clone git@github.com:<YOUR_GITHUB_REPOSITORY_URL>
cd <YOUR REPOSITORY_NAME>
git remote add upstream https://github.com/Cosmo-Tech/azure-sample-webapp.git
git remote set-url upstream --push "NO"
git fetch upstream --tags
You need an Azure Static Webapp resource in the tenant to deploy your webapp. For more information, follow our step-by-step tutorials on our portal - Contact Cosmo Tech for access.
The webapp must be configured so that it fits your simulation use-case (tenant ID, scenario parameters, visualization...). Please refer to Webapp configuration
The azure sample webapp currently requires v18 of node. If you don't have NodeJS installed on your system, you first need to install it. It is recommended to use nvm to install node.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
Install node 18:
nvm install 18
nvm use 18
# To define v18 as the default version of node when opening a new terminal, run:
nvm alias default 18
This project is configured to be used with the Yarn package manager. You can use NPM (the node package manager) to install yarn globally with:
npm install --global yarn
This section describes how to run a local Azure Function, in order to provide the webapp users with a valid token for the PowerBI service. This step is only necessary if you use the "service account" mode to share PowerBI charts. If you prefer to let users communicate with PowerBI with their own accounts, then the Azure Function won't be necessary, and you can skip this section (please refer to doc/powerBI.md for the charts configuration documentation).
First, install the Azure Function Core Tools. You can then start the Azure Functions, that are required for the PowerBI embedded reports to work correctly, by running the commands below:
cd api
yarn install
yarn start
In another terminal, you can then start the webapp with:
yarn install
yarn start
Please note that the yarn install
command is only necessary if the dependencies have not been installed, you do not
need to use this command every time.
This application has been created with create-react-app, that provides some scripts directly in the project directory.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Clean the cache being sure to avoid packages and dependencies issues.
i18next
- translation handling
We have defined our own i18next-parser.config.js file.
Once you had launched the command yarn install
, you'll be able to run the command i18next
in the project root folder.
This command will :
- look for react-i18next usage within the src/ folder
- get all keys defined
- add all keys into translation files (by default public/locales/en/translation.json and public/locales/fr/translation.json) Feel free to add new supported languages or change the parser configuration. ( See react-i18next and i18next-parser )
You can use continuous deployment to trigger deployment when committing.