In this article, we are going to deploy/host a contact application with Visual Studio code to Azure web apps.

Before proceeding with this article I would like to request you that please go through the first two parts of contact application:

  1. Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part One
    In the article, we will set up ASP.NET Core Web API project, and develop the Web API for contact CRUD operations.

  2. Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part Two
    In the article, we will setup Angular 6 within ASP.NET Core Web API Project, and develop the contact form & list component using Angular Material UI that will consume Web API which we have created in Part One.

Let’s start with database deployment as Azure SQL databases.

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

Option 1

We will go to Query Editor Option from left navigation. It will ask for SQL Server Login.

ASP.NET Core
We need to run rhe following script to create contact table in SQL Database.

  1. SET ANSI_NULLS ON
  2. GO
  3. SET QUOTED_IDENTIFIER ON
  4. GO
  5. CREATE TABLE [dbo].[Contact](
  6. [id] [bigint] IDENTITY(1,1) NOT NULL,
  7. [birth] [datetime2](7) NULL,
  8. [email] [nvarchar](max) NULL,
  9. [gender] [tinyint] NOT NULL,
  10. [message] [nvarchar](max) NULL,
  11. [name] [nvarchar](max) NULL,
  12. [techno] [nvarchar](max) NULL,
  13. CONSTRAINT [PK_Contact] PRIMARY KEY CLUSTERED
  14. (
  15. [id] ASC
  16. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
  17. )
  18. GO

Option 2

We will replace Azure database connection string in app setting of contact application code. Then, apply Code first migration to update table in Azure database on server using this command in VS code terminal:

ASP.NET Core

Create Azure Web Apps for ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core

ASP.NET Core
  • Enter past code and click on continue button.
ASP.NET Core
  • Now, we can see Contact Application Azure web apps under App Service in VS Code.
ASP.NET Core
  • Publish ‘Contact-App’ application code though VS code terminal and note the publish folder location.
ASP.NET Core
  • Right click on “Contact Application” and go to deploy web app option.
ASP.NET Core
  • It will ask folder location for deployment. We need to select publish folder location.
ASP.NET Core
  • It will start deployment. We can see deployment log in VS code output window. After successfully completing deployment it will show completion message & Web App URL.
ASP.NET Core

Conclusion

In the article, we have shown detailed steps of deploying Contact Application using Visual Studio Code to Azure web apps and Azure Database.

I request that you please let me know your feedback on this.