3

How to deploy Angular 2 app on aws s3 ? Do I need to upload only src folder or with node_modules ? Is there anything I need to do with my code ?

I have aws panel to upload files through browse. Please help me to go ahead.

Jeeten Parmar
  • 5,568
  • 15
  • 62
  • 111

3 Answers3

6

Anyone else seeing this question -> see this first: How to bundle an Angular app for production It basically says to run

ng build --prod --aot

After that just upload your dist folder to an S3 bucket that has 'Static Web Hosting' enabled in the properties tab of the bucket + give it a bucket policy that lets everyone grab from it similar to:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "AddPerm",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "<your-bucket-arn>/*"
    }
 ]
}

Also Jeeten Parmar's answer helped me too - replacing href's with routerLink's was another thing that I needed to do.

Community
  • 1
  • 1
liquid_diamond
  • 429
  • 8
  • 16
  • I understood how to deploy. But can you please explain, how to develop the app in AWS environment? Do i not need the AWS at all while developing it? Do we just develop the app on local computers and then bundle it and deploy it? – Shubhranshu Jan 18 '19 at 14:16
1

I solved this issue. I was using href that's why It was giving 404 error. I used routerLink and it solved my problem.

Jeeten Parmar
  • 5,568
  • 15
  • 62
  • 111
0

Are you using just straight up webpack? Or maybe Angular CLI?

You will need to build to production. Both of the above mentioned should create a dist folder when you build for production.

The src folder does not contain compiled code, so not that. And you should not be uploading the node_modules folder.

Tucker
  • 1,722
  • 2
  • 10
  • 12
  • I am using `Angular CLI`. Can you please tell me steps ? – Jeeten Parmar Nov 30 '16 at 13:14
  • So in the command promt (or whatever you're using), you'll want to run `ng build --prod`. – Tucker Nov 30 '16 at 13:25
  • After you do that, you should see a /dist folder in the root directory of that project. You should then pull the contents of that folder into your hosting. I am not sure exactly how to do that for AWS S3. But maybe try this [link](http://docs.aws.amazon.com/mobile/sdkforxamarin/developerguide/s3.html) For your reference, Angular CLI has pretty good documentation on their github, if you scroll down the main page. [link](https://github.com/angular/angular-cli) – Tucker Nov 30 '16 at 13:28
  • I did that. It is showing 404 error. Can you please check this : http://stackoverflow.com/questions/40882432/404-not-found-code-nosuchkey-on-aws-s3-with-angular-2 and help me. – Jeeten Parmar Nov 30 '16 at 13:58
  • Do you have a "%0A" or "%0D" somewhere in your code base? Do a search on the dist folder – Tucker Nov 30 '16 at 14:48
  • Do your file names have a space or any special character in them, specifically the html files. Do you happen to have a github of this? – Tucker Nov 30 '16 at 14:49