Deploying react project on Azure

There are many options to deploy your app to azure websites/ web app, such as FTP, Local Git Repository, and Visual Studio IDE, etc. I am not a React expert, here for simplicity, I just use create-react-app tool and FileZilla to deploy my React app to Azure Web App. Here are the steps.

Basically, creating and building React app is as simple as

npm install -g create-react-app

create-react-app my-app
cd my-app/

npm run build

Now, the app is ready to be deployed! Let’s go into Azure portal and create a new website that will host our React app.

Enter a unique app service name, a valid name for the resource group and a new service plan. Then click Save.

To enable FTP publishing, click Deployment credentials under the APP DEPLOYMENT menu. Save the credentials and make a note of the user name and password you create.

Next, click on Properties, and copy the FTP HOST NAME and the USER.

Finally, connect to Azure Web app via FileZilla, then upload the entire content of the my-app/build folder created earlier into the /site/wwwroot/ folder on your Azure Website.

Now we can visit the app in a browser via URL: http://aaronreacttest.azurewebsites.net/, and it should display the default page.

In addition to steps provided by Aaron, I had to add the web.config file with the content below. It is provided by other techies in their blogs and some forums.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Static 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>