Deploying react project on Azure

Question

I want to deploy my react project on azure cloud. I already deployed it on heroku and there it was very easy to deploy. I just had to do git push heroku master to deploy it on heroku. But I am clueless on how to do it on azure. So I have a bulid directory in my project which gets generated everytime I run gulp command. It has all the build files. Can anyone please guide me on how to proceed to azure?

This is my project structure

Answer 1

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.

Answer 2

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>