Skip to main content

Using AWS Cloud9 and AWS CodeCommit to create Angular project.

Assuming you already know what is AWS Cloud9 and are already familier with Angular and Angular Cli, I will jump straight to the steps to create and serve an Angular 7 project right from the Cloud9 IDE.

To reach to the welcome page of IDE, perform following steps.

Target 1: Create your repository and environment.

  • Login to your AWS console using your root credentials.
  • Go to IAM and create a new user so that you can use it for AWS CodeCommit and AWS Cloud9. This is highly discouraged to use your root account for all of these purposes. Make sure to either generate password for your newly created account of configure SSH access for the account.
  • Go to AWS CodeCommit console and create a new repository and enter repository name and description and click on next. You will be redirected to the repositories list page where you will  find your newly created repostiory.
  • Now open AWS Cloud9 console and create a new environment. Enter environment name and description and click on next. Here you can either create a new EC2 instance for your environment or connect to an already present environment using SSH. For simplicity lets use EC2 for now. You also need to choose instance type, since you are doing all this for learning purpose you should choose t2.micro which is the first option and the smallest available instance at the moment.
  • After creating your new environment you will be redirected to the list of available environments. Find the newly created environment's name and click on Open IDE. 

Target 2: Create the angular project.
  • You will find a terminal window already opened in the AWS CLoud9 IDE. If it is not there open it by clicking on Window >> New Terminal Window or by pressing Alt + t keys.
  • Now the first step is to clone your AWS CodeCommit project in this IDE. You can simply use git clone command to clone the project. You can copy the HTTPS URL from your CodeCommit console by clicking on the project name in the console. 
  • After cloning the project you will find a new folder inside your environment's root folder.
  • Now install node by running following command

    nvm install node
  • Make sure the installed node version is the one that you want. You can check node versions by running following command

    nvm ls
  • If you want to change this version i.e 11.10.0 run the following command

    nvm use 10.11.0
  • Next step is to install Angular Cli on your newly created EC2 machine. Run following command to do so

    npm install -g @angular/cli
  • Now generate a new angular project.

    ng new MyApp --routing=true
    • Now you can preview your running application by clicking on the Preview button inside your Cloud9 IDE. 

Target 3: Commit your code
    Now lets commit your skeleton application. Run git status command to make sure you are at the right place and doing right thing. Now you can run git add -A followed by git commit -m "Initial commit" to commit your work. 


Labels:
Location: Frankfurt, Germany

Comments

Post a Comment

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU
Post a Comment
Read more

Angular2+: ng-template

This is an angular element which is used to render HTML, it never gets displayed directly. It is used by structural directives like ngIf and ngFor. We can use them directly in some cases e.g when we want to reuse a template multiple times in our code. Suppose we have following code <ng-template> <p> Hello World! </p> </ng-template>  When it will run the code inside it will not get displayed. If you will inpect the HTML in your developer console you will see that the above will get replaced by a comment and you will find only following in its place. <!----> Now this doesn't make sense that angular is giving a component which just eats up your code and does nothing. This component is actually used to create a reusable template which can be accessd via a tempalte reference. It is used internally by angular to replace the structure directives with it and later at run time is converted into a comment. So for example if you have an ngFor in
Post a Comment
Read more

Difference between ng-template, ng-content and ng-container

While working on a very complex feature for a client in which I had to present hierarchical dynamic data in three column layout with ability to expand like google image search on each level, I came across ng-content, which seemed like a perfect fit for the solution I was thinking about implementing. But I got confused between ng-content and ng-container when I saw the generated html while debugging my code in developer console. I further investigated both ng-content and ng-container and decided to write my finding here in my blog for future references. If you are also wondering what are they for, read on. <ng-container> When you have to write different host elements to combine many structural component like the following <div *ngIf="condition"> <div *ngFor="..."> Some content here </div> </div> You get many unintentional host elements which are not required for your layout. It becomes a prolem when you have complex appl
Post a Comment
Read more