1

I've made a web app in ReactJS. It runs fine on localhost. However, when I deploy to Azure, I'm getting 404 errors every time I navigate to a new page or if I reload a page.

I'm using BrowserRouter, and I've gathered from looking online that this sometimes causes issues, but I haven't found a way to fix it.

I have the app in GitHub, so in Azure I link to the repository. As well as the code generated by create-react-app, I have a web.config file which contains:

<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

So my GitHub code has package.json & web.config files, and src & public folders. This is what gets copied to wwwroot in Azure.

I've set up a pipeline which runs the following:

  • Get Sources - to copy the code from GitHub to wwwroot
  • Agent Job Use Node version - set to 8.4
    Install application dependencies - npm command is 'install', arguments is '--force'
    npm build - command arguments 'run build'
    Archive files
    Publish Artifact

I've read various things online, which have suggested using a static build, or uploading the 'build' folder, creating a production build, or configuring the serviceWorker, but I've tried out all the things that I came across, and nothing has made any difference.

I've defined the route USEROVERVIEW = '/dashboard/users/:patientId'; but when I try to navigate to it on Azure, I get a 404 error. On the other hand, I can navigate to 'landingpage' and 'dashboard' with no problem - it seems to be the routes with ':' which are the problem.

I'm not overly familiar with React or Azure, so I don't know where to start looking.

halfer
  • 19,824
  • 17
  • 99
  • 186
Sharon
  • 3,471
  • 13
  • 60
  • 93
  • 1
    Does [this answer](https://stackoverflow.com/a/62050700/2873538) help? – Ajeet Shah Jun 09 '20 at 21:50
  • Not directly, but it led me down a maze of other answers and I've solved it - will post my solution as an answer in case it helps anyone else – Sharon Jun 10 '20 at 12:27

1 Answers1

1

OK, I solved this after following Ajeet Shah's link above.

The issue seems to be that I'm using BrowserRouter within my app. I don't know why this caused an issue, but it seems to. So, instead, I decided to deploy a static version of my app to Azure Storage.

I created the static build using 

npm run build

and was able to start it locally using

serve -s build

(had to do npm install -g serve to make this work). This let me run it locally as a static site, so I could see that it was working (note: if I started it using serve build (without the -s flag) then the rerouting etc didn't work, the flag had to be there).

I then followed this to set up a static website on Azure Storage.

I use VSCode, and installed an extension called Azure Storage which lists all your Storage Blobs, so I opened my code in VSCode, found the appropriate blob, right clicked, and selected "deploy". It worked fine first time.

Sharon
  • 3,471
  • 13
  • 60
  • 93