Skip to content Skip to sidebar Skip to footer
Home / How to Upload to Azure Asp.net Core and Angularjs

How to Upload to Azure Asp.net Core and Angularjs

Post a Comment

Step By Step Publish To Azure

Introduction

Before reading this document, it'south suggested to read Getting Started to run the application and explore the user interface. This will help you to have a meliorate understanding of concepts defined hither.

Create The Azure Website

It is possible to publish ASP.Net Cypher's Angular client app and server side Web.Host API app together or separately. In this document, we will publish both apps separately.

And so, go to your Azure Portal and create two websites, ane for Spider web.Host projection and other one for Angular application.

Creating an Azure Website for Host

We will be using "Web App + SQL" for Web.Host projection but if you already accept an SQL Database, you can but create Spider web App and use the connectedness cord of your Azure SQL Database.

Then, select "Web App + SQL" and click create:

And configure it co-ordinate to your needs. A sample setting is shown below:

Creating an Azure Website for Angular

Select "Web App" and click create. Since we already created the database for Web.Host application, we don't need it hither.

And configure it co-ordinate to your needs. A sample setting is shown below:

Publish Host Application to The Azure

The details will be explained in the next lines. Here are the quick steps to publish the Host Application to the Azure.

  • Run the migrations on the Azure
  • Configure the .Spider web.Host/appsettings.production.json
  • Publish the application to Azure

Run Migrations on The Azure

1 of the best ways to run migrations on the Azure is running update-database command in the Visual Studio. In lodge to exercise that, your public IP address should accept access to the Azure.

Configuring the Firewall for Client Access

The easiest way: Open up Management Studio and write the Azure database settings, then click connect. If you are already logged in to the Azure, following info screen will exist shown (if you aren't already logged in, a form will exist displayed before the following screen to logging in):

Now your client IP address have access to the Azure. Of class, this performance can likewise be done via the Azure Portal. Check hither to larn how to configure the firewall for client access via Azure Portal.

Use Migrations

Open appsettings.json in .Spider web.Host project and change connectedness settings according to the Azure Database:

Open Bundle Manager Console in Visual Studio, gear up .EntityFrameworkCore as the Default Project and run the update-database command as shown below:

Configure the appsettings.product.json

Azure is using appsettings.production.json, and then this file should be configured similar following:

Publish

Right click the Web.Host projection and select "Publish". Select "Microsoft Azure App Service" and check "Select Existing". Click "Create Profile" button.

Following screen will be shown:

Select "azure-publish-demo-server" and click "OK", then click "Publish" push. Host application is alive now:

Publish Angular to The Azure

The details will be explained in the next lines. Here are the quick steps to publish the AngularUI to the Azure

  • Run the yarn command to restore packages
  • Run the ng build -prod
  • Copy the web.config file that is placed in angular binder to dist folder
  • Configure the angular/dist/assets/appconfig.json
  • Upload required files to the Azure

Prepare The Publish Binder

Run the yarn command to restore packages and run the npm run publish to create publish folder that named dist.

Copy the web.config

Re-create the web.config file that is placed in angular folder to angular/dist binder.

Copy the appconfig.json

Configure the angular/dist/assets/appconfig.production.json similar following:

Upload Files to Azure

Files must be uploaded to the Azure via FTP. Transfer files from the dist to the www folder in the Azure. The folder structure should look like:

Angular application is live at present. Browse the http://azure-publish-demo-client.azurewebsites.internet and see information technology works.

kaspertablead.blogspot.com

Source: https://docs.aspnetzero.com/en/aspnet-core-angular/v9.2.0/Deployment-Angular-Publish-Azure

Post a Comment for "How to Upload to Azure Asp.net Core and Angularjs"