Created static web app with the React framework for uploading CSV files to Azure blob storage by calling an HTTP-triggered Azure Function

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
@@ -57,7 +57,12 @@ jobs:
       - name: Unzip artifact for deployment
         run: unzip release.zip
 
-      - name: 'Deploy to Azure Functions'
+      - name: Login to Azure using Service Principal
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Deploy to Azure Functions
         uses: Azure/functions-action@v1
         id: deploy-to-function
         with:
@@ -66,4 +71,60 @@ jobs:
           package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
           scm-do-build-during-deployment: true
           enable-oryx-build: true
-          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 using service principal
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+
+      - 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,17 @@
-# Python API integrated with Azure Service Bus Queue
+# Static web app invoking Azure functions
+
+Static web app built with the React framework. The [application](client/src/App.js) allows users to upload CSV files to a storage blob via an HTTP-triggered function.
+The uploaded files are then processed by a blob-triggered function, which stores the results in a separate container. Aforementioned functions
+are present in the [function_app.py](hvalfangst_function/function_app.py) python script - which is the main entrypoint of our Azure Function App instance.
+
+A pipeline has been set up to deploy the function app and the static web app to Azure using GitHub Actions. The pipeline is triggered by a push to the main branch or by manually running the workflow.
+
+
 
 ## 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/)
 
@@ -21,6 +29,7 @@ graph TD
     A --> B[Resource Group]
     B --> C[Storage Account]
     C --> D[Blob Container]
+    D -->|Static Website Hosting| H[index.html]
     B --> E[App Service Plan]
     E -->|Hosts| G[Function App]
     G -->|Uses| F[Application Insights]
@@ -32,24 +41,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 +55,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*