How to manually deploy a React app to Azure App Service

Artículo en espa?ol / Spanish article

Welcome, this guide aims to teach what you need to know about how to manually deploy a React app from Visual Studio Code to Azure App Service, in just 8 steps.

Requirements:

• An Azure subscription you can get started with Azure for free.
• Visual Studio Code
• Node.js LTS version

• Git

Let's start:

Step 0: Create a new React app

Open your terminal and run the following command to create a new React app using

npx create-react-app testreactinaas        

Replace testreactinaas with your preferred name.

Step 1: Test your React app locally: Run It on your local server

open your terminal or command prompt and run:

cd testreactinaas
npm start        

Your app will be available at https://localhost:3000/ by default.

Step 2: Building your app, when you're ready to deploy your app, you can build it.

open your terminal or command prompt and run:

npm run build        

Step 3: Provision an Azure App Service for React projects

Step 4: Configure the basics about your web app

For testing: Opt for the F1 Pricing Plan, but feel free to choose otherwise as needed.

Step 5: Configure the tags about your web app

Step 6: Open the project from your Visual Studio Code, later install the following extensions

Azure Account

Azure App Service

Azure Resources

Step 7: Sign in to your Azure account

you complete your credentials , after that you will see your resources on azure, especially the App Services created on the step 5.

Everything looks fine now, your React app was deployed to Azure App Services successfully.

Note: Prioritize Your azure Account Security: a friendly reminder

One essential practice to uphold is signing out of your Azure account once you've completed your deployments and administrative tasks.

Please, let me know your feedback because I can grow with it, thank you very much.

My apologies for any inadvertent errors with my English skills, Im learning how to speak my second language.