We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through WorksHub average a 15% increase in salary 🚀

Blog hero image

How to host a React app on Azure

Kailas Walldoddi 18 January, 2021 | 2 min read

Azure App Service is a PaaS that allows you to host web, mobile apps, web API’s and logic apps. This article explains about how to host your react app on azure app service. Assuming you have npm and VS Code installed in your machine, follow below steps sequentially.

  • Open VS Code terminal.
  • Create a react app by running ‘npx create-react-app my-app‘ command.
  • The folder structure of the app should look like this.Folder structure.png
  • Add web.config in public folder with following content.
    <?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>
    
  • Move inside project by running ‘cd my-app’ command.
  • Run ‘npm run build’ command. Now this Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified, and the filenames include the hashes. Your app is ready to be deployed.
  • Run ‘npm start’ to launch it locally. Access http://localhost:3000 to launch it in browser and see.
  • Switch to VS Code, install ‘Azure App Services’ Extension.Azure App Service Extension for VS Code.png
  • Select Azure app service tab and click on ‘+’ icon to create a new web-app.Selecting Azure App Service tab and Creating new web app.png
  • When Prompted, Sign in with your azure credentials or if you do not have credentials, create a free account by signing up here.
  • Chose proper subscription, chose a globally unique name (in my case react-appserviceDemo) , chose Windows as the environment and proceed.Creating a new web-app with unique name.png
  • When prompted to deploy or cancel, chose Deploy option.
  • Select my-app/build folder to deploy when prompted with folder browse option.Browse Folder option.png Browse Folder option Select Build Folder.png Select Build Folder
  • Once the Deployment is complete browse to the app service url (in my case it is https://react-appservicedemo.azurewebsites.net) and woahh!! our react is now deployed to Azure app service.Final.png

Originally published on medium.com

    React
    JavaScript
    Node.js
    Azure
    AWS

Related Issues

cosmos / gaia
  • Open
  • 0
  • 0
  • Intermediate
  • Go
cosmos / gaia
  • Started
  • 0
  • 2
  • Intermediate
  • Go
cosmos / ibc
  • Open
  • 0
  • 0
  • Intermediate
  • TeX
cosmos / ibc
cosmos / ibc
  • Started
  • 0
  • 1
  • Intermediate
  • TeX
viebel / klipse-clj
viebel / klipse-clj
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
  • $80

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through WorksHub average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email