4

I've developed an PoC about PWA (Progressive Web Apps) using ReactJs to show how to use camera, geolocation, microphone, light sensors and etc from Browser API.

I've created a route for each feature in this web app and everything works fine in localhost. But when I deploy the npm build version of my react app on Azure Wep App Linux service it don't work properly. I can access the main page (index.html) and from there I can navigate to any other page, but when I try access any route direct form its url I receive an 404 error. Except from index page all urls don't work when refreshing or writing manually.

Ex:
https://pwa.mypoc.dev/ -- Works fine
https://pwa.mypoc.dev/lights -- Do Not Work

I'v used this command on azure "Settings" > "General settings" > "Startup Command": 

pm2 serve /home/site/wwwroot/build --no-daemon

I've found a question related to it but the answer did not help me, as I'm not using web.config because it is a Linux machine running Node 10 LTS: React App not starting in azure app service

Lutti Coelho
  • 2,134
  • 15
  • 31

1 Answers1

21

After a little more research I found the problem. As Linux Azure Web Apps uses pm2 to serve a node app I found the answer looking into the official documentation.

PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.

https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

Just need to add the --spa option into the Startup Command on Azure Web Apps Linux General Settings: 

pm2 serve /home/site/wwwroot/build --no-daemon --spa

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

Lutti Coelho
  • 2,134
  • 15
  • 31
  • 1
    is there a way to pull it off without PM2? does anyone know if linux web app respects htaccess or something? – Qiong Wu Mar 02 '21 at 16:30
  • 1
    Don't know for sure. But I belive that its not possible, as the linux web app is a PaaS solution. You could try to use web app container to try it without PM2. – Lutti Coelho Mar 03 '21 at 01:58
  • 1
    I am facing same issue for next js app on azure linux web app and ny adding above as startup command still have same issue – Arun Rana Apr 16 '21 at 15:22
  • 1
    Have you change `/home/site/wwwroot/build` for the path to your main file? – Lutti Coelho Apr 18 '21 at 15:14
  • 2
    I have been looking all over the place until I find this thread! Solved my hands.. – i_ll_be_back Feb 19 '22 at 22:38