CODEWITHSUNDEEP
reactjsazuregithub-actionsazure-static-web-appazure-static-website-routing
Quak_2023
Quak_2023

Reputation: 617

Reloading routes return 404 for Azure Static Web Apps

Before i begin i have seen this question and it does not solve my problem

I have a react app that uses azure static web apps i wanted to modify the app to support old versions of the app. so i did the following

here's the workflow steps in guthub action

steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - uses: azure/login@v2
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"

      - name: Install Dependencies
        run: npm ci

      - name: Build TypeScript
        run: npm run build

      # Merge new assets with existing assets in azure storage overwriting existing files
      - name: Upload assets to Azure Blob storage
        uses: azure/CLI@v2
        with:
          inlineScript: |
            az storage blob upload-batch --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} --destination ${{ secrets.AZURE_STORAGE_CONTAINER_NAME }} --source dist --pattern "*" --destination-path "" --overwrite

      # Download all assets from Azure Blob storage
      - name: Download assets from Azure Blob storage
        uses: azure/CLI@v2
        with:
          inlineScript: |
            mkdir -p ${{github.workspace}}/new
            az storage blob download-batch --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} --destination  ${{github.workspace}}/new --source ${{ secrets.AZURE_STORAGE_CONTAINER_NAME }}

      # Show all files in the new folder after download (for logging purposes)
      - name: Show files in /new folder
        run: ls ${{github.workspace}}/new

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BAY_0BBC9890F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "${{github.workspace}}/new" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          skip_app_build: true
          ###### End of Repository/Build Configurations ######

im using the new folder to store the files so i can store the files from blob to be uploaded into static web apps

My issue starts here in my react app i have a file staticwebapp.config.json with

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

this is not working, which makes sense to me since im using the /new folder instead of the app default folder the config is not read and therefore i have this issue, Im not sure how i can modify to get this config to work if i go back to my original workflow where i just deploy to azure static web apps without the blob storage everything works correctly

Thanks in Advance!

Upvotes: 0

Views: 263

Answers (1)

Quak_2023
Quak_2023

Reputation: 617

So here's what i came up with. Since i am specifying in the app_location to look in the /new folder i need to add the staticwebapp.config.json file to the /new folder.

I have 2 options

  • copying it over from app dir to the new folder (I tried that but it didn't work gave me permission error)
  • Manually adding the file to azure blob storage container.

The second option worked fine for me, but i now have to remember if i ever need to change the config file to go and change it there which is less then ideal.

Summary: this solution is not something i would do long term just something i found that works so i wanted to mention

Upvotes: 0

Related Questions