React router direct links not working on Azure Web App Linux

Question

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 · Accepted Answer · 2020-04-23 01:38:04Z

25

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.

answered Apr 23, 2020 at 1:38

Lutti Coelho

2,27419 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Qiong Wu Over a year ago

is there a way to pull it off without PM2? does anyone know if linux web app respects htaccess or something?

Lutti Coelho Over a year ago

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.

Arun Rana Over a year ago

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

Lutti Coelho Over a year ago

Have you change /home/site/wwwroot/build for the path to your main file?

i_ll_be_back Over a year ago

I have been looking all over the place until I find this thread! Solved my hands..

JAYAKUMAR SINNAPILLAI · Accepted Answer · 2023-09-14 19:28:13Z

0

This below startup command is working fine.

But this is from "Settings" -> Configuration -> "General settings" -> "Startup Command":

pm2 serve build --no-daemon --spa

answered Sep 14, 2023 at 19:28

JAYAKUMAR SINNAPILLAI

611 silver badge2 bronze badges

Collectives™ on Stack Overflow

React router direct links not working on Azure Web App Linux

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related