Deploy ASP.NET MVC + Angular 4 + PostgreSQL into AWS

Hello guys hope you are doing good ūüôā

From the past few days I was suffering to deploying my ASP.NET MVC application integrated with Angular 4 + PostgreSQL DB into AWS. After my serious deliberation I’ve goto know the procedure and wanted my friends to know about this. That might help you in future.

Step1: Create Elastic Beanstalk web application in AWS

  • Once you login into your account you can find the ‚ÄúBuild a solution‚ÄĚ section below
  • Choose on Build a web app

  • To create a new Application click on Create New Application, and fill the following required fields Application Name & Platform (.Net). And click on ‚ÄúCreate application‚ÄĚ button which will start creating the application

 

  • Once application is created with Environments, then you must be able to see Health ‚Äď Green

  • Now make sure that the user which is going to be used has the following permissions.

 

Step2: Create RDS (Postgres) in AWS

  • Go to RDS service, and choose PostgreSQL from Step1

 

  • Click on Next, in Step2 choose your case Production (or) Dev / Test
  • Provide the required details
    1. DB instance Class (1GB/ 2GB/…..)
    2. DB Instance Name
    3. Master Username & Password
  • Now make sure that your instance is publicly accessible ‚Äď Yes, if not click on Modify in Details Section. And choose Public accessible ‚Äď Yes. If it is not public accessible we will be not able to access this Database in PgAdmin.

 

Step3: Deploy the application into AWS

  • Firstly we need to install ‚ÄúAWS toolkit for Visual Studio 2017‚ÄĚ. Once installed you can see the option ‚ÄúPublish to AWS Elastic Beanstalk‚ÄĚ on right click the project.
  • Select ‚ÄúPublish to AWS Elastic Beanstalk‚ÄĚ, it ask you to create Account Profile.
  • To get the Access Key Id & Secret Access Key, Go to IAM in AWS Console.
  • Select the user, then go to ‚ÄúSecurity Credentials‚ÄĚ, where we can create the Access Key.

 

  • Once you create a new Access key, it gives you Access Key ID & Secret Access Key. Make sure to store your Secret Access Key in a secured place.
  • Now go back to VS 2017 and enter your credentials.
  • Now you can see the Web App we have created in AWS Console.
  • Now Go to View¬†¬†Open AWS Explorer¬†¬†Amazon EC2¬†¬†Key Pairs¬†¬†Create key pair

 

  • Creating a new Key Pair, will give you a <Key Pair Name>.pem
  • Select ‚ÄúPublish to AWS Elastic Beanstalk‚ÄĚ, after selecting profile click on Next.
  • In the Application Options section add the key value pair. And click Next
  • Now click Deploy

 

Step4: Check database connections

  • Open PgAdmin4
  • Get the Host Name from the AWS Console¬†¬†RDS¬†¬†Instances¬†¬†Copy the End Point (Host Name)
  • Now create New Server¬†¬†Enter the Credentials of RDS.
  • Create your tables required for the application.

 

Step5: Install Angular Packages in EC2 instance using Remote Desktop

  • Go to EC2 Service
  • Click on ‚ÄúInstances‚ÄĚ
  • Find your instance and right click on it, then choose ‚ÄúGet Windows Password‚ÄĚ

  • Now it will ask you to upload ‚ÄúKey Pair Path‚ÄĚ Get the <Key Pair Name>.pem file that we have created when deploying the Web App.
  • Once you upload it will generate the Password, make sure to store it a secured directory.
  • Now you can connect to the Remote desktop using that password.
  • Once you have connected go to C:\\inetpub\\wwwroot.
  • Open command prompt for wwwroot directory.
  • Download Node from the https://nodejs.org/en/ .
  • Now in the command prompt type ‚Äúnpm install‚ÄĚ, this will install the packages required for angular.

  • Now run the application

 

Round Entry in Xamarin Froms

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

  1. This sample demonstrates a custom renderer for the¬†Entry control, ‚ÄúEnabling developers to override the default native rendering‚ÄĚ with their own platform-specific customization.
  2. Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

 

 

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017    File    New    Project    Choose Cross-Platform Template     Choose MobileApp (Xamarin.Forms )    Name it as RoundEntry    Click on OK    Chose .NetStanderd    Click OK

Step2: Creating CustomEntry.cs

Go to Project CustomEntry    Right Click    Add Class CustomEntry.cs

 

FileName:CustomEntry.cs

A custom Entry can be created by sub classing the Entry control, as shown in the following code

The CustomEntry control is created in the .NET Standard library project and is simply  ENTRY control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

 

Step2:  Create a class in the Android directory and name it as CustomRenderer.cs

Go to RoundEntry.Android  Right Click   Add Class CustomRenderer.cs

 

 

Brief Explanation of the above Code:

Here Added the ASSEMBLY attribute it means like declarations

  • Custom Entry is the name of the placeholder class in your common (PCL or Shared) Forms library.
  • Export Renderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render¬†Custom Entry on Platform X, use the class¬†CustomRenderer.”

  1. Create a subclass of the EntryRenderer class that renders the native control.
  2. Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
  3. Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

 

Step 3: Create UI for Round Entry 

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

Output: Here we go.. Press Ctrl+F5