CODEWITHSUNDEEP
javascriptreactjsazureazure-web-app-servicecreate-react-app
SqueakyCheese
SqueakyCheese

Reputation: 21

How can I deploy production npm build of react app to Azure App Service

I'm trying to deploy the npm build version of my react app to azure web service through ftp. I moved the build folder, but when I load my application's URL, the default screen loads with Hey Node Developers!.

I can deploy via github and kudu. However, I don't believe that's a production quality application since it's not built using npm run build with create-react-app.

I've been through this azure guide, as well as various blogs. I've also included the web.config file. Nothing has gotten my page to load correctly.

I've tried using node versions 10.1, 10.14, and LTS. I have tried using both Linux and Windows App Services.

Upvotes: 1

Views: 3263

Answers (2)

Lutti Coelho
Lutti Coelho

Reputation: 2264

As Linux Azure Web Apps uses pm2 to serve a node app you need to configure Azure Linux Web App Service to run a startup command to serve your React app in "Configuration > General settings > Startup Command":

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

Remember to change the path to your build path (The path to your index.html file).

If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.

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

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

You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

I've coped with the same problem recently: React router direct links not working on Azure Web App Linux

Upvotes: 7

technogeek1995
technogeek1995

Reputation: 3454

Azure App Services for Windows (Node JS)

Local Git Upload to Azure App Services

  1. Open up your App Service in the Azure Portal > Deployment > Deployment Center - if you already set up a deployment option, you'll have to press Disconnect.
  2. Select Local Git > App Service Build Service > Summary > Finish
  3. Select FTP/Credentials (at the upper left hand corner) > Select User Credentials - Set a password and save your credentials
  4. Go back to Overview, copy git deployment URL with your git username. It should be this format: https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git
  5. Run npm run build from your project folder locally on your machine
  6. In ./build run git init after it finishes building to initialize your git repo
  7. Run git remote add azure https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git to add the Azure deployment as an option to push to
  8. Run git add * and git commit -m "${date}" and git push azure master:master
  9. You'll be prompted for your password. It will be the password you supplied when you were on the FTP/Credentials screen.
  10. Test your website. It should be available at https://<app_service_name.azurewebsites.net

When you want to push updates in the future to your app service, you'll only do steps 8 through 10.

Configure IIS for React-Router

To use react-router with your react SPA, you'll also need to configure the web application to re-route 404 errors to index.html. You can do that by adding a file in /site/wwwroot/ called web.config. Place the contents below and restart your App Service from the Azure Portal.

<?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>

Upvotes: 1

Related Questions