KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

azure-sample-webapp

★ 13 Open GitHub ↗

Accelerator to build web applications on top of Cosmo Tech Digital Twins Solutions.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Azure Sample Webapp

[![Test](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/test.yml/badge.svg)](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/test.yml)
[![Lint](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/eslint.yml/badge.svg)](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/eslint.yml)
[![Deploy](https://github.com/Cosmo-Tech/azure-sample-webapp/actions/workflows/azure-static-web-apps-nice-wave-0f618f503.yml/badge.svg)](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.

![Create a new repository in GitHub by importing the project "https://github.com/Cosmo-Tech/azure-sample-webapp"](https://raw.githubusercontent.com/Cosmo-Tech/azure-sample-webapp/main/doc/assets/github_project_import.png)

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
```

## 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.

azure-sample-webapp

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README