Multiple React sites on the same Azure storage account

Question

There is a need to improve our CI/CD process for our React application. The bottom line is:

• any commit to any git branch except release branches and master should trigger build/deploy process to Azure storage account that is currently configures as Static site and linked with CDN endpoint (Microsoft Standard).
• the deployment destination should be {rootUrl}/{branchName}

So we want to have multiple React applications on the same storage account/CDN endpoint. This would allow our QA team to test features independently.

I already made the following changes in the app that allows the app to work using relative path on localhost:

1. set homepage property in package.json

"homepage": "http://localhost:3001/testApp"

2. set basename attribute of Router

  <Router basename={process.env.RELATIVE_ROOT_URL} {...props}>
...

3). add a line to the .env file:

RELATIVE_ROOT_URL=/testApp

But I don't have any idea how to change URL rewrite rule for CDN endpoint to allow to open URLs like {rootUrl}/{branchName}/somepath/ directly.

P.S. Currently we have the following rule that works well for a single site per CDN endpoint:

Condition:

• If URL file extension
• Operator: Not greater than
• Extension: 0
• Case transform: No

Action:

• Then URL rewrite
• Source pattern: /
• Destination: /index.html
• Preserve unmatched path: No

Answer 1

Try the following:

1. Add "homepage": ".", to your package.json as it is mentioned here.
2. Change Router to HashRouter and remove the basename attribute.

Here is my example from this repo.
I deploy using the following command:

az storage blob upload-batch \
  --account-name $(AZURE_STORAGE_ACCOUNT) \
  --account-key $(AZURE_STORAGE_KEY) \
  -s ./build/. \
  -d '$web/product/book-shelves'