Incorporated a React app with mandatory pipeline changes for building and deploying as static web app to our storage account

Author: hvalfangst

.github/workflows/deploy_to_azure.yml

@@ -9,9 +9,10 @@ on:
 env:
   AZURE_FUNCTIONAPP_PACKAGE_PATH: '.'
   PYTHON_VERSION: '3.10'
+  STORAGE_ACCOUNT_NAME: 'hvalfangststorageaccount'
 
 jobs:
-  build:
+  build-function:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -41,13 +42,12 @@ jobs:
             release.zip
             !venv/
 
-  deploy:
+  deploy-function:
     runs-on: ubuntu-latest
-    needs: build
+    needs: build-function
     environment:
       name: 'Production'
       url: ${{ steps.deploy-to-function.outputs.webapp-url }}
-
     steps:
       - name: Download artifact from build job
         uses: actions/download-artifact@v4
@@ -66,4 +66,61 @@ jobs:
           package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
           scm-do-build-during-deployment: true
           enable-oryx-build: true
-          publish-profile: ${{ secrets.PUBLISH_PROFILE }}
+          publish-profile: ${{ secrets.PUBLISH_PROFILE }}
+
+  build-react:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./client
+
+      - name: Build React app
+        run: npm run build
+        working-directory: ./client
+
+      - name: Zip build folder
+        run: zip -r build.zip ./client/build
+
+      - name: Upload React build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-build
+          path: build.zip
+
+  deploy-react:
+    runs-on: ubuntu-latest
+    needs: build-react
+    steps:
+      - name: Download React build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: react-build
+
+      - name: Unzip React build
+        run: unzip build.zip
+
+      - name: 'Login to Azure'
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }} # Use the secret where your creds are stored
+
+
+      - name: Deploy React build to Azure Static Website
+        uses: azure/CLI@v1
+        with:
+          azcliversion: latest
+          inlineScript: |
+            az storage blob upload-batch \
+              --account-name hvalfangststorageaccount \
+              --source ./client/build \
+              --destination '$web' \
+              --overwrite

README.md

@@ -1,9 +1,12 @@
-# Python API integrated with Azure Service Bus Queue
+# React Web App invoking blob-triggered Azure function
+
+React web app that allows users to upload csv files to an Azure Blob Storage container, which triggers an Azure Function to process the file and store the results in a separate container.
+The resulting data is then stored in a Cosmos DB instance, which is queried by the web app to display the data.
 
 ## Requirements
 
 - **Platform**: x86-64, Linux/WSL
-- **Programming Language**: [Python 3](https://www.python.org/downloads/)
+- **Programming Languages**: [React](https://reactjs.org/docs/getting-started.html), [Python 3](https://www.python.org/downloads/)
 - **Cloud Account**: [Azure](https://azure.microsoft.com/en-us/pricing/purchase-options/azure-account)
 - **Resource provisioning**: [Azure CLI](https://learn.microsoft.com/en-us/cli/azure/)
 
@@ -32,24 +35,9 @@ graph TD
     B -->|Contains| F
 ```
 
-For this script to work it is necessary to have a configuration file named **infra_config.env** in your [infra](infra) directory. It contains sensitive information
-such as tenant and subscription id as well as information used to reference resources. The file has been added to our [.gitignore](.gitignore) so that you don't accidentally commit it.
-### Structure of 'infra/infra_config.env'
-```bash
-TENANT_ID={TO_BE_SET_BY_YOU_MY_FRIEND}
-SUBSCRIPTION_ID={TO_BE_SET_BY_YOU_MY_FRIEND}
-LOCATION=northeurope
-RESOURCE_GROUP_NAME=hvalfangstresourcegroup
-STORAGE_ACCOUNT_NAME=hvalfangststorageaccount
-BLOB_CONTAINER_NAME=hvalfangstblobcontainer
-FUNCTION_APP_NAME=hvalfangstfunctionapp
-SERVICE_PLAN_NAME=hvalfangstserviceplan
-APP_INSIGHTS_NAME=hvalfangstappinsights
-```
-
 ## Deallocate resources
 
-The shell script [deallocate_resources](infra/deallocate_resources.sh) deletes our Azure service bus queue, namespace and resource group.
+The shell script [deallocate_resources](infra/deallocate_resources.sh) deletes our Azure resources.
 
 # CI/CD
 
@@ -61,4 +49,6 @@ In order for the pipeline to work, the following secrets must be set in the repo
 The associated values of the aforementioned secret can be retrieved from the Azure portal, under our deployed Function App.
 Click on the **Get publish profile** button and copy/paste the file content into the secret value field.
 
-![img_1.png](img_1.png)
+![img_1.png](img_1.png)
+
+

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*