Deploy A React App Using Azure App Service From VS Code
In this article, I’ll guide you about Deploy A React App Using Azure App Service From VS Code. Microsoft Azure, which is called Azure, provides cloud computing services created by Microsoft for testing, project building, managing applications, deploy web apps and services through managed data centers.
Azure Web App services are cloud computing-based platforms where you can publish or host your web apps. It allows multiple frameworks and web applications to be hosted. Which means developed in different programming languages.
You can learn more about Azure Pricing and Services here. Also Azure has made it much easier to deploy your applications directly from various IDE’s like Visual Studio Code (With Azure SDK), Xcode, IntelliJ Idea, etc...
Let's Get started Simply…
First of all, you need an Azure Account with an active subscription. Also, you can create a free account too. create an account for free
- Install Git
- Install Node.Js and npm.
Run the command node — version to verify that Node.Js is installed.
- Visual Studio Code
- The Azure App Service Extension for Visual Studio Code
Before Get Started…
You need to install Git on your computer. Instructions about the Installation of Git Can be found on the download page.
Then you need to install Node.Js On your computer to run react app locally. The instruction about the installation of Node.Js is also you can found on the download page. (You can download the version according to your operating system.)
Then You need to install the Visual Studio Code as your Programming IDE. You can download it from the download page. The installation of the Visual Studio Code is a simple process like - Next > Next > Next > finish...
Then you need to install the VS Code Extension called Azure App Service. You can find it at the extension area in the Visual Studio Code IDE.
- To manage files create a new folder at your desired location with your application name.
- Then you need to create a react app using create-react-app command within the directory path.
Step 1
Open the terminal from the VS Code and Type…
(install create-react-app globally)
to check your current versions of the node.js and the npx.
Step 2
Create a New Project by typing
then press Enter. It will create a complete project including node modules to…
Then It will take some time to finish this work up.
After all, it will display some messages like this.
This means your React App was generated successfully… Then you have to redirect to the project folder and run the local server to run the react app locally. Then you need to start the local server by typing npm start.
- Run ‘npm start’ command in terminal to launch created app locally.
You can access react app on the 3000 port of your localhost so open/click on http://localhost:3000 to launch it in the browser to see.
Step 3
Create a new file web. config on the root folder(Public Folder)
and type these codes in it to manage dependencies.
Step 4
In this step, we will generate a production optimized build of React Application into the build folder by running the npm run build or yarn build commands on the terminal.
Step 5
After successfully installing, select the Azure App service tab and click on the ‘+’ icon for creating a new web application
Once you click on the ‘+’ icon, the Sign-in popup will come up to authenticate for Azure credentials. if you don’t have an account then you can create a free account by signing up - here
Step 6
Then, you need to choose a few options like subscription, unique name of your website Url, and environment of the server (ex. Windows or Linux)
It will be prompted for deploy or cancel options, you need to choose the Deploy option. Then you need to choose a path of your build folder in the application to deploy your application
Step 7
Once the Deployment is process is completed, you can browse your react app service URL (in my case it is https://sample-react-azure-app.azurewebsites.net), You can see how your react application is hosted on the Azure server successfully.
I might have missed a few steps, as the structure greatly varies depending upon the version of the script we are using with create-react-app. All feedback and suggestions are welcomed.
If you like this article please hit the clap button as many times as you like, as it keeps me motivated to write more articles. Have a great weekend, Happy Hacking 😉.
And Don’t forget to ping me on Linkedin.
