Create a new App Service in Azure Portal
Step 1: The first step is to create a web app in the Azure portal. Go to the Azure Portal and click App Services and then click Add button
Step 2 Select the following options
- Subscription,
- Resource Group (If a resource group is not available then create a new)
- App Name(Unique name),
- Runtime Stack - Asp.net 4.7/Node latest version
- OS (Windows)
- App Service Plan (Create a new service plan if it is not available)
Press review + Create to create a web app.
Step 3 - Once the app is created then you can see the URL in the overview as shown in the snapshot below.
Deploy your code to Azure Portal
Step 1 - Open your code in Visual Studio Code
Step 2 - You need a Visual Code Code Extension to deploy the code
Step 3 - Search Azure App Service in the extension and install.
Step 4 - Click on the Azure Menu and log in with your Azure credentials and it will load your web app here.
Step 5 - Right-click on the web app/dist folder and click on Deploy to the Web app.
Step 6 - You need to browse your code folder. For the angular/vue app, you need to upload the dist folder
The application will automatically create the folder once you build the angular project with the npm run build.
Note: If the dist folder is not available then you need to run the ng build command. It will create a dist folder automatically.
Once you select the folder, you can see the below-deploying message.
Step 7 - Once the deployment is completed it will display the message below.
Hurray!! The website is deployed and you can click on the Browse Website button.
Note: If your dist folder contains a subfolder then your side won't work. Then you need to go to Azure portal --> App Services --> Configuration --> Path Mappings --> Update Physical Path.
This is all about this article, if you have any questions then do let me know.
