{"id":16265,"date":"2017-02-23T12:15:05","date_gmt":"2017-02-23T10:15:05","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=16265"},"modified":"2017-02-21T13:33:44","modified_gmt":"2017-02-21T11:33:44","slug":"angularjs-2-series-deploy-application-aws-s3","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-deploy-application-aws-s3\/","title":{"rendered":"AngularJs 2 Series: Deploy Your Application on AWS S3"},"content":{"rendered":"

Introduction<\/h2>\n

In this article, I will demonstrate how to deploy a simple static Angular application on AWS cloud using S3 service. The article assumes that you have the necessary AWS account and able to access the S3 service. The application we are about to deploy will be simple and static in nature and there will be no server side code. For more complex application you could explore different deployment options. The S3 service of Amazon AWS is primarily used to host static website. We will deploy our Angular application that will be served as a static website using S3.<\/p>\n

A brief about Simple Storage Service (S3)<\/h2>\n

S3 is a object storage facility provided by Amazon AWS. One can persist to or retrieve files from S3 using standard web UI or supported API. The object storage means you can place or store any flat files like images, videos or documents (Doc, Pdf etc). In S3, files are stored in a specialized folders called buckets. One can create as many buckets and store files in it. S3 is used to store static content i.e the content that does not change dynamically and therefore a popular choice to host static websites.<\/p>\n

Creating a Simple Application<\/h2>\n

Before we deep dive into deployment process, we would need a simple application. You can quickly create the simple app using Angular CLI. For more information on setting up Angular CLI follow the Build Your Own Component<\/a> article. Open the Node.js prompt and run the following command:<\/p>\n

ng new my-simple-app<\/pre>\n
The above command will quickly create a new application called my-simple-app<\/em>. The application files will be created under my-simple-app<\/em> folder. Once the application is created we will quickly build the same. Navigate to my-simple-app<\/em> folder and run the following command:<\/p>\n
ng build<\/pre>\n
The above command will build the application i.e all the Typescript related code will be compiled into native JavaScript and stored in the dist<\/em> folder. The dist<\/em> folder is a folder of importance to us. We will deploy this dist<\/em> folder in AWS S3.<\/p>\n
Creating S3 Bucket<\/h2>\n
Let\u2019s get practical. Make sure you have an Amazon account and if not then you can sign up for free. For the first year Amazon AWS provides you with free access to try out different services with specific usage limit. How much usage is free is very well documented on the AWS portal. So make sure you understand the usage limit and not end up paying for overuse of any services. For our simple Angular application, it should not cost you anything but if you indeed want to avail AWS services to deploy a full blown application then make sure you are aware of their cost patterns. Log in to AWS Console. Click on All Services<\/em> and you should see plethora of AWS services.<\/p>\n
<\/a><\/p>\n
Click on S3<\/em> and click Create Bucket<\/em> button.<\/p>\n
\"\"<\/a><\/p>\n
Provide the name of the bucket. Since we are deploying a very simple app, let\u2019s name it my-simple-app.com<\/em>. (The name typically should indicate the kind of website you intend to host and preferably in a DNS like naming convention like my-site.com). Bucket names are unique globally across regions and therefore it is advisable to choose a unique name that does not clash with other names. As websites have their domains registered, it is a good practice to keep your website name as a bucket name. Select the region which is the closest to where you are. Click Create<\/em> to create the bucket. This is the bucket where we will store our Angular application.<\/p>\n
Configuring the bucket<\/h2>\n
Bucket configuration will involve the following steps:<\/p>\n