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>