Skip to main content

Deploy static angular website project on AWS S3 bucket latest.

 Hello,

In this article we will see how to deploy local angular project on S3 bucket.

Prerequisite:

1)Amazon web service account. You can get free tier account from amazon.

2)Build angular project and you have ready dist folder after build. 

Command : ng build –prod


Steps:

After prerequisites are done you need to follow this steps,

1)Create an S3 bucket with public access.




2)After creating S3 bucket you need to upload files present inside dist folder of your angular project.

In objects tab in S3 bucket there is upload option where you can add files.



After adding files there will be option at bottom Predefined ACLs . Please grant public read access permission and then click on upload button at bottom.


3)Inside Properties tab at bottom you will see Static Web Hosting header. Inside that please check enable static website and at index document and error document please add value index.html. As your angular project after build in dist folder will have this file. 




                                           

Click on save changes button and you can see the  bucket website endpoint. That will be your url where you can see your angular project running . 







I hope you find this article interesting.


Comments

Popular posts from this blog

Coding Interview Questions Set 1

From this article, I will be sharing with you all a series of articles on coding interview questions. So please stay connected for the latest set of questions. It will be a good brainstorming exercise and will also prepare you for coding interviews and will definitely boost your confidence. So let's start, 1)Reverse of a string with only O(1) extra memory. Solution: var reverse = function(string) {     let result = ''     for(let i= string.length -1; i >= 0; i--){         result += string[i];     }     return result; }; 2)Fizz Buzz: Write a program that will accept a number n and will output number till n but for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. Solution: var fizzBuzz= function(n) {     const arr=[]     for(i=1; i<=n; i++){ ...

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...

Understanding TypeScript: A Guide to Interview Questions

1) Advantages of TypeScript TypeScript offers several advantages over plain JavaScript: Static Typing: TypeScript introduces static typing, allowing developers to define types for variables, function parameters, and return values. This helps catch type-related errors during development and provides better code documentation. Enhanced Tooling: TypeScript provides improved tooling support, including features like code completion, refactoring, and navigation, which enhance developer productivity. Readability and Maintainability: With explicit type annotations, TypeScript code tends to be more readable and self-documenting. This makes it easier for developers to understand and maintain large codebases. Early Error Detection: TypeScript's type system catches many common errors at compile-time, such as type mismatches and missing properties, reducing the likelihood of runtime errors. Example: typescript Copy code // Plain JavaScript function greet(name) {     return 'Hello, ' + n...