Do you know that Microsoft Azure is a platform where you can build, manage, and deploy your applications on a massive and global network? You get to use many tools and frameworks to work upon your applications. Microsoft azure is like a one-stop destination for all your needs to work on a project. If you want to know how, here are the various services you can avail of by using just a website that is Microsoft azure.
- Deployment
- Storage needs
- Scaling
- Analytics
- Managing security
- Media and content delivery network
- Integration
- And much more
That’s why it is called a one-stop destination for all your development needs. There are numerous applications of using azure services. In this article, we will focus on the process of deploying a react app to azure app services. Let’s get started with it!!
Step 1: Create React App
First, you need to create your React app using the create-react-app command. In this article, we will be working on VS code. Therefore, if you don’t have VS code, you better download and install it so that you can follow the process alongside. You can follow the steps below to make your react app setup.
Install create-react-app globally
$ npm install -g create-react-app@3.4.1
Create a New Project
$ create-react-app my-app
$ cd my-app
Once, you have created your app and entered it inside, you will see the folder structure something like this.
Now, you need to run this command: npm run, to run your application on the browser. You will get to see the app on http://localhost:3000
After your run your app, you will see something like this.
Step 2: Create Web. config
After you have created your react app, you need to create a file named web.config on the root directory. You can put this content in that file.
<?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>
Step 3: Create A Build
After this, you need to create a build of your react application. For this, you need to run npm run build in your terminal. It will generate a production optimized build of react application into the build folder.
Step 4: Get Azure Extension
After you have created a build for the application, you need to download the azure extension into the VS code. You will get it by name: Azure App Service. It will be something like this.
After installing this, you will find an azure app service icon on the left bar of your VS code. You have to click on that icon.
Step 5: Activate Your Azure Account
Once you click on the icon, you will find a + sign on the above something like this.
You have to click on that. Once you do that, a pop up will open asking for azure credentials. If you don’t have an account, you can signup here.
Step 6: Initialize Your Environment
Then, you need to complete a few options like subscription, unique name of your website, and your development environment(Windows, Linux, mac).
Step 7: Deploy
After following these steps, you will the option to deploy your app or cancel the project. You can choose for deployment to get the URL of your project.
Step 8: Choose Path
After choosing the option to deploy, you need to locate your build folder in the application. This will look something like this. From here you can easily browse your folder.
Step 9: Finishing The Deployment
After all these steps, your react app would be successfully deployed on azure. Here, you will get a unique URL of your website. You can use it for further instruction with your project.
