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

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...