Back to Posts

Deploy Create-React-App using Azure and VSCode

Posted in Azure, VSCode, React

This blog will talk about how to deploy an create-react-app to Azure using Visual Studio Code.

More about create-react-app: GitHub Link.

 

To try this blog, you must have:

  • A Microsoft Azure account.
  • Create-react-app
  • Visual Studio Code

 

Let's get started

Make some changes to the index.js file

  In folder public, find index.js, and add the following code into the file. Without the following snippet, Azure will not recognise the “entry point” of the application, thus it will not show your content correctly.

var express = require('express');
var server = express();
var options = {
  index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

 

Build the application

Open your create-react-app in VSCode. In the terminal (Terminal -> New Terminal), build the application using npm run build or yarn build. This command builds the app for production to the build folder.

Deploying the web app

In VSCode, go to View -> Extensions, or Shift + Command + X by default.

Sign in to your Azure account.

Then, search for Azure App Service and install

VSextension

Or click here to install: Install the Azure App Service extension

Right click your subscription, choose the operating system that you want to deploy to. If you are targeting Linux, choose Create New Web App..., if targeting Windows, choose Create New Web App... (Advanced).

Subscription

Type a globally unique name for your Web App and press ENTER. Valid characters for an app name are ‘a-z’, ‘0-9’, and ‘-‘.

If targeting Linux, select a Node.js version when prompted. An LTS version is recommended.

If targeting Windows using the Advanced option, follow the additional prompts:

  1. Select Create a new resource group, then enter a name for the resource group.
  2. Select Windows for the operating system.
  3. Select an existing App Service Plan or create a new one. You can select a pricing tier when creating a new plan.
  4. Choose Skip for now when prompted about Application Insights.
  5. Choose a region near you or near resources you wish to access.

Select Yes when prompted to update your configuration to run npm install on the target server. Your app is then deployed.

Subscription

When the deployment starts, you’re prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Choose Yes to ensure your changes are deployed to the correct app.

Subscription

If VSCode is ever asking which folder to deploy, choose myApp/build.

 

Voila

Congrats! Your create-react-app has been successfully deployed!

Subscription

View your application online by clicking Browse Website.

 

Deploy again

Say, you have made some changes to your application and want to deploy the latest changes.

In the VSCode terminal, npm run build or yarn build.

After building the application, go to your Azure Web App Extension, find your subscription, find your wab application, right click and you will see Deploy to Web App.... Click that and that’s it.

Kayoung Kim