React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

install packages

npm install

Start the dev server

npm run dev

Connect to backend

Copy the .env.example file to .env file: cp .env.example .env Set the VITE_API_URL to the backend URL with the port specified to the port exposed when starting up the backend backend.

Test Azure Web App Deployment

Manual Web App deployment can be performed using the Azure Portal, by navigating to the Web App and selecting the 'Deployment > Deployment Center' link in the left-hand navigation panel.

For deploying a frontend web app via Static Web App, you can manually create a Static Web App in the Azure Portal with the Source set to GitHub and fill in the details for your frontend GitHub repository. Under the Build Details section, the Build Presets should be detected as React, the App location can be left as the default / and the Output location should be set to ./dist. This will automatically create a GitHub Actions workflow which will be added to branch specified. This workflow will then build and deploy the frontend on a push or pull request event to the specified branch.

For more automated approaches, to deploying a frontend web app either via a terraform provisioned azurerm_linux_web_app i.e. Linux VM or through a Static Web App (terraform and/or az cli) then see a more detailed comparison of the approaches.

Note

Remember to git pull regularly since workflows are often automatically generated and added to the remote GitHub repository if a branch without branch protection is specified in the set-up. Otherwise, a PR will be needed to add in each generated workflow.