How to deploy Angular 6 & Asp Net Core App to Azure using FileZilla

Build an app with ASPNET Core and Angular from scratch

In this tutorial, we are going to learn how to deploy Angular 6 and Asp Net Core application to Azure using FTP (File Transfer Protocol) in step by step. First-of-all, we will build our application in production mode using visual studio code, then we will publish our Angular 6 and Asp Net core Application, then we will change the database connection and other paths and then we will upload our Angular 6 and Asp Net core application to Azure using FTP.

In previous tutorial, we have discussed how to deploy Angular 6 and Asp net core Application to IIS (Internet Information Service). Click here to get more information.

• Deploy Angular 6 and Asp Net Core App to Azure using Visual Studio 2017
• Deploy Angular 6 and Asp Net Core App to IIS(Internet Information Service)

How to deploy Angular 6 and Asp Net Core application to Azure using FTP.

Let’s see how to deploy Angular 6 & Asp Net Core application to Azure using FTP in step-by-step.

Step # 1 – Build Production mode

First-of-all, we need to run production mode of our application. So, to do this, just open the visual studio command terminal (Make sure you are in the project directory). Now, run this below command and it will take some time to complete it. Then after that, you will get the result as you see in the below screenshot.

=> ng build –prod

Note:- if you get an error like this “FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory”, then just run this below command because you need to increase the memory limit for node js.

=> node --max_old_space_size=6048 ./node_modules/@angular/cli/bin/ng build --prod

Step # 2 – Publish project using visual studio 2017

Now in this step, we will publish our Angular 6 and Asp Net Core project. So, go to project folder structure in solution explorer and then right click on project folder and then choose on “publish” as you see in the below screenshot.

Now, it will will open a new window with the name of “Publish”. So, now click on “New profile” link and it will open a new popup with the name “Pick a publish target”, now click on folder from sidebar as you see in the below screenshot.

Now, click on “Browse…” button. Then, it will open a new window popup with the name of “Target Location”. Now, create a new folder as you want (mine “Publish”) and then create a new folder inside the “Publish” folder with the name of “V1” as you see in the below screenshot.

Now, click on open button and it will close the current popup. Now, click on “Publish” button as you see in the below screenshot.

So, now it will take some time to publish your project within the specified folder with all the required files as you see in the below screenshot.

Now, go to project folder where you have published your project and open a file “appsettings.json” and then change the “server root address” and “client root address” as you see in the below screenshot’s line 6 and 7. And also change the connection string path as you see in the below.

Note: – In step # 3 i will tell you how to get connection string and server root address and client root address from azure.

Now, go to project folder where you have published your project and then wwwroot/assets folder and then open the appconfig.json file and then update the “remoteServiceBaseUrl” and “appBaseUrl” according to your path as you see in the below code file.

Now, again go to project folder where you have published your project and then src/assets folder and then open appconfig.json file and then change the code as you see in the below screenshot.

Step # 3 – Upload on Azure server using FTP

Now, in this step, we will upload our published project folder on azure using filezilla. So, to do this, open FileZilla (If you don’t have, then click here to download) and enter host name, username and password and then enter connect button. Follow the below steps to get username and password and host name.

Get Host Name: Go to azure app service, and then click on your app link and then click on “Overview” from sidebar and then copy the “FTPS hostname” as you see in the below screenshot.

Now, click on “Demployment Center” from sidebar as you see in below screenshot.

Now, click on “FTP” option and then click on “Dashboard” button from bottom and then you will see a new page open as you see in the below screenshot.

Get Username and Password: Now, copy the username and password and then paste the hostname, username, and password into the filezilla and then click “Quickconnect” button as you see in the below screenshot.

Note: – You can create new app service by clicking on the +Add button from upper menu.

Get Connection String: Now, click on “SQL databases” from Azure portal sidebar and then click on database name (If you don’t have any database name, then create a new database by clicking on the +Add button from upper menu) and then click on the “Show database connection strings” link as you see in the below screenshot.

Now, it will open a new page which will show the connection strings as you see in the below screenshot and then copy it and then paste into the appsettings.json file as you have seen above.

Now, you have seen how to get username, password, and hostname from azure. Now, go to filezilla and then select the folder(where you have published your project) in “Local site” area as you see in the below screenshot.

Now, go to “Remote site” area in filezilla where you will set the remote site path as you see in the below screenshot.

Note:- Make sure you are in the wwwroot folder which is under the site folder.

Now, select all the files and then right click and then select upload as you see in the below screenshot.

It will take some time to upload. So, after that enter the url (which you have specified) of your application  and press enter button and then you will see your site will be live as you see in the below screenshot.