https://github.com/cosmo-tech/azure-sample-webapp
Accelerator to build web applications on top of Cosmo Tech Digital Twins Solutions.
https://github.com/cosmo-tech/azure-sample-webapp
app-deposite generic react reactjs webapp
Last synced: about 1 month ago
JSON representation
Accelerator to build web applications on top of Cosmo Tech Digital Twins Solutions.
- Host: GitHub
- URL: https://github.com/cosmo-tech/azure-sample-webapp
- Owner: Cosmo-Tech
- License: mit
- Created: 2020-12-04T15:56:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-05-13T09:18:49.000Z (about 1 month ago)
- Last Synced: 2026-05-13T10:35:20.565Z (about 1 month ago)
- Topics: app-deposite, generic, react, reactjs, webapp
- Language: JavaScript
- Homepage:
- Size: 18.2 MB
- Stars: 13
- Watchers: 6
- Forks: 6
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Azure Sample Webapp
[](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/test.yml)
[](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/eslint.yml)
[](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/azure-static-web-apps-nice-wave-0f618f503.yml)
The **_Azure Sample Webapp_** aims to be an example of a [React](https://reactjs.org/) web application based on the [Cosmo Tech](https://cosmotech.com/) [Simulation Digital Twin Platform](https://portal.cosmotech.com/) and Azure cloud technology.\
This project demonstrates how to setup a web application with authentication, scenario management features and [PowerBI](https://powerbi.microsoft.com/en-us/) 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](https://portal.cosmotech.com/) - Contact Cosmo Tech for access.
# Getting Started
Recommended Operating System: Debian (other OS have not been tested)
Supported browsers: Chromium 90, Chrome 91, Firefox 78
## Clone this project
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](https://github.com/new/import) 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:
cd
git remote add upstream https://github.com/Cosmo-Tech/azure-sample-webapp.git
git remote set-url upstream --push "NO"
git fetch upstream --tags
```
## Create an App registration, Azure Static Webapp resource & configure it for deployment
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](https://portal.cosmotech.com/) - Contact Cosmo Tech for access.
## Configure the webapp for your use-case
The webapp must be configured so that it fits your simulation use-case (tenant ID, scenario parameters, visualization...).
Please refer to [Webapp configuration](doc/README.md)
## Start the webapp locally
### Pre-requisites: install `node` and `yarn`
The _azure sample webapp_ currently requires **node 24**. If you don't have NodeJS installed on your system, you
first need to install it. It is recommended to use [nvm](https://github.com/nvm-sh/nvm) to install node.
[Install nvm](https://github.com/nvm-sh/nvm#install--update-script):
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
```
Install node 24:
```bash
nvm install 24
nvm use 24
# To define v24 as the default version of node when opening a new terminal, run:
nvm alias default 24
```
This project is configured to be used with the [Yarn](https://yarnpkg.com/getting-started/install) package manager, in
its Modern version. You can install yarn by enabling node's corepack:
```bash
corepack enable
```
### Local azure function
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](doc/powerBI.md) for the charts configuration documentation).
First, install the
[Azure Function Core Tools](https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=v4). This
tool does not support node 24 yet, so we have to switch to node 22 in the terminal running the functions:
```bash
nvm install 22 # Only necessary the first time
nvm use 22
```
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
```
### Local webapp server
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.
## Available Scripts
### React scripts
This application has been created with _create-react-app_, that provides some scripts directly in the project directory.
#### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](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.
#### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
#### `yarn build`
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](https://facebook.github.io/create-react-app/docs/deployment) for more information.
#### `yarn cache clean --force && rm -rf node_modules && yarn install`
Clean the cache being sure to avoid packages and dependencies issues.
## Deploy your webapp
You can use continuous deployment to trigger deployment when committing.