Azure App Services Virtual Folders

One interesting feature that comes with App Services, familiar to those who have been working with IIS, is virtual folders. I will run through on how to use it to deploy an Ionic front-end and a .NET Core 2.2 back-end on the same App Service.

I will do this using the following application:

albertodenatale/ionictodo

Deploy the back-end

Create a new virtual directory

Doing that will require to create a new virtual directory. I will call it “api” and will sit adjacent to the “wwwroot” folder.

Update deployment profile

Result

Deploy the front-end

Build the project

Run a production build in the project using:

ionic build --prod

Configure the environment.prod.ts

Configure the front-end to point to the backend on localhost.

Drag and drop the www folder content

After opening the Kudu Console

Using TraceSources on .NET Core and Azure with Kudu

Drag and drop the content of the “www” folder into the “wwwroot” folder.

And here is the result:

Summary

Azure App Services provide the option to deploy JavaScript front-end and back-end using a single App Service. This is a great option for small applications, minimising the work needed to get them up and running. Despite not being fully scalable, it leaves the door open to future optimisations.