Learn How to Deploy Your Angular Application to AWS S3

hello everybody welcome to another video from code shots with profanize well we are developing great angular applications but how can we deploy one there are plenty of options to deploy our angular application but in this video we will focus on how to perform a deployment in aws s3 bucket so let's get started for this video we will use a default angular cli application so if i go to the app component html what we can see is the default generated code and let's go to the browser to see what we have so this is the default one but you know what what you have to do is to focus on the steps we have to follow for the aws s3 deployment so i will go to this tab which is the aws amazon.com console and i'm going to sign into the console i currently have an account so if you do not have an account please pause this video create your account and continue to see what steps you have to follow in the search bar here i will type s3 and from the results i will select this one buckets so this is the list of buckets and currently i do not have one and i'm going to create a bucket either by clicking this one or this button please note that the bucket name should be unique across all the aws s3 bucket names so make sure to select a name that is not something very generic because this most probably should be already taken so i will create a bucket and i will define this name profane is my first angular app and i will select this aws region eu please note that it is wise to select a region closer to your location to improve the performance so i will scroll down i will leave this default and i will uncheck this one i do not want to block all public access i will further scroll down and this is like turning off block all public access might result in this bucket and the objects within becoming public yeah i know that this i do not want to have a bucket versioning i do not have any tags currently and let's see if i have anything into the advanced settings as is just create a bucket so this is our bucket so let's click this one and into the properties let's further scroll down and here what we can see is the static website hosting and this is disabled so let's click the button edit and i will enable this option and here what we can see is that we have to define the index document and the error document and we know that the default index document for angular applications is the index.html i do not have an error document so i will leave this empty and i could save my changes since we have enabled the static website hosting now we can see that this is our domain and if we click this what we can see here is a 403 and we have to make this at least 404 or 200 currently because we didn't upload anything and so let's try to fix this but what is the problem we can see here that this is access denied and the problem is that we have to grant anonymous access so let's go back to the aws console and i will click the permissions tab from the permissions tab we can define a new policy here so let's click edit and we'll have to define something in this json format but to be honest with you i don't remember how to do this here we have a policy examples so let's click this tab and if we scroll down we will see some topics here the first one is like granting permissions to multiple accounts with added conditions no granting read-only permission to anonymous user yeah this is what we want so let's click this and i will copy this json object and i will go back to the aws console and i will replace this policy here and we have to replace this resource which is this one so let's copy and replace it here please note that the slash and asterisk is here save the changes and let's give that high let's go to this tab which is 403 and try to reload nice so what we can see is now 404 which means that we haven't uploaded something yet and this is more than fine and how can we upload how can we deploy our application let's go to the objects here we can upload our files so let's go to the vs code and do the following i will ng build the application and what we want to do is deploy this directory the content of this directory so i will do the following right click here and open containing folder and i will grab all of these files and i'm going to drag and drop them here these are all the files and if we scroll down we can see here this button and let's click it and as soon as we have an upload succeeded we can go back to this tab and let's give it a try reload and what we can see is that we have deployed our angular application this is amazing these are the steps that we have to follow but you might be wondering now that this is a manual job and the applications do not manually upload it and yeah you are right we need to find out a more automated way so have a look at the next video where i will explain how to automatically deploy the application into the aws so that was it thanks for watching please let me know what you think in the comments below and do not forget to subscribe and click the link below

Channel: Code Shots With Profanis

Views: 10,142

Keywords: Angular aws s3, Angular deployment to server, Angular s3, amazon s3, amazon s3 angular, amazon s3 bucket, angular, angular aws s3, angular aws s3 file upload, angular course, angular deployment to aws, angular deployment to aws s3, angular deployment to server, angular s3 file upload, angular s3 upload, angular training, angular tutorial, angular tutorial for beginners, aws s3, deploy angular app to aws s3, error handling, learn angular

Id: SICYw5sHv8A

Length: 6min 16sec (376 seconds)

Published: Fri Apr 15 2022