Contact Application Azure Deployment ASP.NET Core Web API, Angular 6 Using Visual Studio Code

-
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.

  • Go to left navigation on SQL databases. It will open a popup for SQL databases.
  • Click on Add or Create SQL database Button.


  • It will open a form where we need to specify SQL Server Instance, Resource group etc. Here, we can create new SQL Server Instance with admin user if we didn’t have an already existing SQL Server Instance.

  • Then, we need to configure Price Tier for SQL database as per our requirement. Currently, we have selected Basic Price Tier for this.

  • Here we also tick pin to dashboard option in form and Click on create a button to submit for Azure SQL Database deployment.

  • It will deploy Azure SQL Database & Server and will take a minute to deploy SQL Server.

  • We can see SQL Database pinned to dashboard after successful deployment of SQL Database. Click on “contactapp” SQL database from the dashboard. It will open “contactapp” SQL database page and left side navigation will have various options to manage SQL database. Here, we can see the connection of string to connect “contactapp” database.
  • Now, we have two main options to create “contact” table in Azure Database.
Option 1

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

We need to run 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:


Create Azure Web Apps for ASP.NET Core

Here we go to App Service from left navigation in Azure Portal. These will vshow arious web apps templates for the deployment of specifying web apps.


  • In this case, we select ASP.NET Core. It will open Web Apps Popup to configure web apps information and create Web Apps for our contact application.

  • Now, we will open Visual Studio code.
  • Go to the Extensions and search Azure extension.
  • Select Azure Extension Pack and install it.

  • We need to reopen VS code after installation of Azure Extension Pack. Then we can see Azure icon available in the left navigation of VS code as shown in the below screenshot:

  • Click on plus button in App Service header to configure Azure web apps with contact application.
    • It will ask for you to sign in to Azure. Then we can see the popup for device authentication in right-bottom corner of VS code. Click on “Copy & Open” button.
  • Enter past code and click on continue button.

  • Now, we can see Contact Application Azure web apps under App Service in VS Code.

  • Publish ‘Contact-App’ application code though VS code terminal and note the publish folder location.

  • Right click on “Contact Application” and go to deploy web app option.


  • It will ask folder location for deployment. We need to select publish folder location.
  • 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.

Conclusion
In the article, we have shown detailed steps of deploying Contact Application using Visual Studio Code to Azure web apps and Azure Database.
Please shrare your feedback on this. 

Comments

  1. Jaffa AteretFebruary 21, 2019 at 3:13 AM

    Azure app meet rigorous performance, scalability, security and compliance requirements while using a fully managed platform to perform infrastructure maintenance. Quickly create powerful cloud apps using a fully managed platform from Impiger technologies. Impiger provides amazing service.

    ReplyDelete

Post a Comment

Popular Posts

Chat Application using Angular 8, Asp.net Core 2.2.0, Signal R 1.1.0

-
Image
In this article, we are going to create a simple chat application using Angular 8, Asp.net Core 2.2.0, Signal R 1.1.0 as shown below: We install above all prerequisite following in our development machine: Prerequisite .Net Core SDK 2.2.0  – download from  here . Nodejs 10.15.3  – download from  here . Angular CLI 8.0  – Install angular command package by executing this command: “ npm install -g @angular/cli@8.0.0 ” Setup Asp.net Core with Signal R Project: open a command prompt and enter create asp.net core web project as below: Install the following NuGet package in our project: Microsoft.AspNetCore.SignalR Microsoft.AspNetCore.SpaServices.Extensions Call SignalR in the “Startup.ConfigureServices” method to add SignalR services: services.AddSignalR();   Create MessageHub Class: SignalR makes real-time client-to-server and server-to-client communications possible and it will call methods to connect clients from a server using Sign
Read more

Contact Application Using ASP.NET Core Web API, Angular 6.0, And Visual Studio Code - Part One

-
Image
We will develop a contact application using ASP.NET Core Web API, Angular 6.0, and Angular Material UI as shown in the below screenshots.  We will use Visual Studio code (VS code) for the development editor.  I have divided contact application development into two articles, Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part – 1 In the article, we will set up ASP.NET Core Web API project, and develop the Web API controller for contact CRUD operations. Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part – 2 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. So, starting with this article, first, we will see how we can create ASP.Net Core Web API Project. We have the following prerequisites, Visual Studio Code (VS code) editor Please see this  article  to see how we can setup Visual Stud
Read more

Contact application - Upgrade Asp.net Core 2.0 to 2.1

-
Image
In this article, we will look into steps for contact application - upgrade Asp.net Core 2.0 to 2.1, please see my previous articles about how we developed contact application: ContactApplication using ASP.NET Core Web API, Angular 6.0, and Visual Studio CodePart One: In the article, we will set up ASP.NET Core Web API project, and develop the Web API for contact CRUD operations. ContactApplication using ASP.NET Core Web API, Angular 6.0, and Visual Studio CodePart 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. ContactApplication Azure Deployment: In this article, we are going to deploy/host a contact application with Visual Studio code to Azure web apps. Please note:   Previously we have used Asp.net Core 2.0.3 for contact application, now upgrade to Asp.net Core 2.1.5. This is download link for Dot
Read more

Send an Email Reminder Notification Based on an Expiration Date using Power Automate

-
Image
Introduction    In this article, we are going to create an email reminder notification based on an expiration date using Power Automate. We will create a flow that’s run daily that reads & filters data from a SharePoint list that has list items that expire in the next 5 days. Then it will send an expiration notification email to a particular user.   SharePoint List - "ProductSales"     Columns  Type  Title  Text  ExpiryDate  DateTime   Let’s log in to Office.com with office 365 credentials. Go to the “Power Automate” tile and click on it.   It will be redirected to Power Automate Page. Click on Create button from left navigation.   Click on the scheduled flow tile. It will open the popup.       Create Recurrence Flow Enter the flow name and select a specific time when we want to schedule this workflow. Then, click on the create button. It will open the Edit Flow page where we can see a Recurring Action. Now we are f
Read more

MySQL Data Access API Development Using Express.JS, Node.JS

-
Image
In this article, we are looking into the introduction of Node.JS and Express.JS and then, I am going to create a simple MySQL data access API using Express.js, NodeJS. As we all know, Node.JS is the most trending open source technology that’s directly or indirectly partitioning into advanced web development, and let’s have lookup what is Node.JS? Node.JS Definition Node.JS is a platform that provides environment (outside the web browser) to execute JavaScript and which is built on Chrome's V8 JavaScript engine developed by Ryan Dahl. Why Node.JS? NodeJs processing model depends on a single thread with event looping. When clients send HTTP requests to NodeJs server, the Event loop is woken up by OS. It will pass the request and response objects as JavaScript closures to worker functions with callbacks. For long-running jobs like I/O operations running on non-blocking worker threads, when the job is complete, responses are sent to the main thread via a callback
Read more

ReactNative FlatList

-
Image
Introduction: React Native List show has different way to represent, react native listview either FlatList or SectionList. Flatlist is term used for static data just like array of list to view. Process: index.js import React, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native'; export default class FlatListBasics extends Component {   render() {     return (       <View style={styles.container}>         <FlatList           data={[             {key: 'Devin'},             {key: 'Jackson'},             {key: 'James'},             {key: 'Joel'},             {key: 'John'},             {key: 'Jillian'},             {key: 'Jimmy'},             {key: 'Julie'},           ]}           renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}         />       </View&
Read more

SharePoint Interview Questions and Answers - Part Three

-
In article, We will see SharePoint Interview Questions and Answers which will helpful to understanding SharePoint concepts. Please refer this articles: SharePoint Interview Questions and Answers - Part One SharePoint Interview Questions and Answers - Part Two SharePoint Interview Questions and Answers - Part Three This is three part of SharePoint Interview Questions and Answers: 1.  Difference of site template Team Site Publishing site Developer site Project site Business intelligence site Custom template Blog site Enterprise wiki 2. Difference between team site and project site Project Sites * Project Sites has “Project Functionality” Site Feature activate by default. * A Project Summary Web Part is added to the main page by default. * Project Sites had “Task” list added to it by default. Team Sites * Team Sites has “Wiki Page Home Page” Site Feature activate by default. “Project Functionality” Feature is not active by default. * Project
Read more

Contact Application Using ASP.NET Core Web API, Angular 6.0, And Visual Studio Code - Part Two

-
Image
In this article, we are going to learn about how we can setup Angular 6.0 in ASP.Net Core Web API project and develop the contact list & form component using Angular Material UI. In the Part 1 article, we set up ASP.NET Core Web API and developed the API for contact CRUD operation. Please go through  Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part 1  once before proceeding with this article. To setup Angular 6.0 in the project, first, we have to install NodeJS in the development environment. We can download NodeJS installer from  NodeJS website . and then check the version on NodeJS as below: Now, let us globally install Angular CLI package by enter “npm install –g angular/cli@6.0.0”, as shown in below screenshot Scaffold Angular To scaffold Angular, enter “ng new Contact-App --skip-install” command in VS code terminal as below. Here, --skip-install option is used to skip installation of the npm packages. And Contact-
Read more

SharePoint Interview Questions and Answers - Part Two

-
In article, We will see SharePoint Interview Questions and Answers which will helpful to understanding SharePoint concepts. Please refer this articles: SharePoint Interview Questions and Answers - Part One SharePoint Interview Questions and Answers - Part Two SharePoint Interview Questions and Answers - Part Three This is two part of SharePoint Interview Questions and Answers: 1  Difference between Rest API and JSON CSOM: 1. CSOM core assembly is Microsoft.SharePoint.Client.Runtime.dll and Microsoft.SharePoint.Client.dll, which stands for Client-Side Object Model. It is a web service based API of SharePoint. It allows access to SharePoint data and features from remote clients. CSOM was introduced in SharePoint 2010 and greatly enhanced in SharePoint 2013. 2. SP.ClientContext.get_current() for normal use. New SP.ClientContext('url...') for specific SPWeb. 3. Client-side object model. C# (or Visual Basic) only, use NuGet, at the moment same package for both 20
Read more

Typescript Basics

-
Nowadays, there are so many JavaScript frameworks (Angular, React) written and used to develop frontend UI by Typescript. It very important to every developer has very basic knowledge about Typescript. So, in this article we will look into Typescript Basics for getting started with it. Pre-requisite:   Basic knowledge of JavaScript, OOPs concept. What is Typescript? The Typescript language is a typed super set of JavaScript, means any program written using Typescript Language will be compiled into plain JavaScript. What does Typescript solve over JavaScript? And Why Typescript Language is so much popular among Developers? Types & Equality Scope OOPs Implementation Module management Installing Typescript: There are two basic ways to install Typescript: Via NPM (Nodejs Package Manager) Typescript’s Visual Studio plugins. Please this  link  for more information For via Npm, enter this command in command prompt: npm install -g typescript   save fi
Read more