FRONT END UI CHANGES WITH UPDATES

[rehat22]

How can i make some changes to the frontend and deploy? After i have pushed the changes how can i still pull updates from the main branch of the repository without resetting the front end changes i have made?

[sarah-widder]

Hi @rehat22 I would recommend forking the repo and making your local changes, then build the frontend and deploy to your app. Then you can periodically update your fork from main, rebuild the frontend, and deploy to your app again. It's important to rebuild the frontend locally to ensure you have both your changes and the latest from main.

[nazrul-kabir]

Just to add on: in the workflow frontend is not being updated, only the Python backend is. Start the app with start.cmd. This will build the frontend, install the backend dependencies, and then start the app. you can go into start.cmd files and look at the steps, and also worth looking at frontend/package.json to see the build command. So, basically following those you need to update the workflow.

[mdsa3d]

@rehat22 To update the app, rebuild it on your computer using start.sh or start.cmd. Then, deploy it through the IDE to upload the build files to the app.

I wrote a small bash script to this operation:

create an .env.azure file: (in Readme they have some examples of it)

Existing_App_Name=
Resource_Group_Name=
Runtime_Stack=
sku=

then create a new bash file (deploy_to_azure.sh):

#!/bin/bash
set -o allexport
source .env.azure set
az webapp config appsettings set -g $Resource_Group_Name -n $Existing_App_Name --settings WEBSITE_WEBDEPLOY_USE_SCM=false
az webapp up --runtime $Runtime_Stack --sku $sku --name $Existing_App_Name --resource-group $Resource_Group_Name

now if you run this deploy_to_azure.sh it will update your deployment.

Note: Dont forget to update the .env files as this will detached your deployment.

[mdsa3d]

@sarah-widder I noticed, If you deploy the app from your local machine, you won't be able to redeploy it from the online portal. How can I switch between both methods easily?

[sarah-widder]

Hi @mdsa3d which portal do you mean? Azure Portal, or the Azure OpenAI Studio? You can configure the Deployment Center on your app service in the Azure Portal to point to your fork/branch of this repo, and then instead of deploying from your local machine, you can commit and push your changes, then 'Sync' that branch from the Deployment Center. Note that you need to build and commit the static files from building the frontend, as the Sync operation only builds the backend.

[Salesfactory]

Hi @sarah-widder canyou let me know how can I 'Sync' that branch from the Deployment Center, build and commit the static files from building the frontend? you mean in a github action or something like that?

[anna-csswe]

Hi @Salesfactory you can build the static files locally by running npm run build from the frontend folder. Commit these changes to your remote repository. Then in Deployment Center (on your app service in the Azure Portal) you can 'Sync' your changes. Used #109 to help me in the solution