1

I’m new and learning how to deploy to AWS. I made angular JS website and tried to deploy it at localhost with node.js npm/bower. It’s worked. I tried to deploy it at MS Azure: deployed it from Github and it’s worked as well well (I did not do anything in setting and did not install node.js, but maybe Azure did it automatically?). The last, I tried to upload it at AWS S3 bucket as a static webpage with allowing public access. It wasn’t work property: I can only see my index.html content but no routing content: so basically almost nothing of my webpage. I saw a similar question (“How do I set up an AngularJS app using AWS?”) where a person was wonder about options to upload an AngularJS to S3 bucket or EC2. The answer says that one can use S3 at AWS if it's angular js static webpage. The person of that question went for EC2 option. If I’ll go for S3 option: I’m confuse: what is “static Angular js page” actually? will routing work at S3 or I must use EC2 with node.js?

Nikzin
  • 322
  • 3
  • 20

2 Answers2

7

First, you should really do a simple search and read the differences between static and dynamic webpages.

If you are using some sort of server-side technology like NodeJS, Java, Python, Ruby, etc. to generate the HTML for your web pages whenever a request is made then you have a dynamic webpage and you would need to host that on EC2.

If your webpage is simply HTML, CSS and JavaScript files, and the raw content of those files does not changes with each request then you have a static webpage, which can be hosted on S3. The advantages of a static webpage is that it is much cheaper to host, and when hosted somewhere like S3 it can handle massive amounts of traffic without any extra configuration or management on your part.

In your case I believe you are only using NodeJS as a script that you run once to generate/output your static AngularJS content. If that's the case then you have a static website. If however you are also using NodeJS as a server to handle HTTP requests dynamically then you have a dynamic website.

AngularJS is a client-side technology. AngularJS runs entirely in the browser. As such you should be able to host your AngularJS application on S3.

Since AngularJS routing works entirely on the browser side, it shouldn't matter where the page is hosted. You should expect it to work if the page is hosted in S3, since it actually runs in the browser, not the server.

Mark B
  • 183,023
  • 24
  • 297
  • 295
  • Regarding why your site isn't currently working on S3, you need to check your browser's error log to see what the actual issue is. It may simply be an S3 static website setting or something. There's no way to help you with that particular issue until you find the error message that points to the problem. – Mark B Nov 05 '17 at 13:19
  • Thank you! I'll try to look it up with errors. I do not have active elements like PHP, ASP, JSP but have angular $http requests to external server: is that making it dynamic? – Nikzin Nov 05 '17 at 13:28
  • The external server may be dynamic. Your app's server resources are still static. It only becomes dynamic when you are hosting those PHP,ASP,JSP type resources yourself. – Mark B Nov 05 '17 at 13:51
  • One more thing I can say: if I try simply to open index.html locally without deploying it on local host with npm: it's not working properly and look exactly as at S3 (only index.html w/o other content). But if I deploy it with npm to local host it works as it should. Does it mean I have something there (non static?) that requires node.js? – Nikzin Nov 05 '17 at 14:07
  • Did you write any server-side NodeJS code? If not then you don't have a dynamic website. This is all conjecture until you post what the actual error message is. It sounds like you are still running your app in development mode, and you need to build your static assets before deploying to S3. Check the answer to this question: https://stackoverflow.com/questions/38433205/how-to-serve-angular-2-using-amazon-s3 – Mark B Nov 05 '17 at 14:21
  • Thank you. I think I do not have any node.js elements in my page. but the link (stack question) looks very similar to my question. I'll look more to the answer there and try later to solve my question with webpack link:probably it will help. – Nikzin Nov 05 '17 at 14:45
1

What is “static Angular js page” actually?

Static AngularJS refers to the frontend content such as HTML, JS, CSS, Images & etc. You should be able to implement routing for static content from S3.

Will routing work at S3 or I must use EC2 with Node.js?

If you can separate the AngularJS App Static Content and Backend Code (e.g NodeJS Server Logic with Database access & etc.) then you can host, the AngularJS App in S3 and use EC2 for backend. This can get challenging to setup. To route both to the Frontend in S3 and to the NodeJS backend, in addition you can use AWS CloudFront.

However, since you are new to AWS, it would be better to use either AWS Elastic Beanstalk or EC2 with NodeJS i n the beginning for deployment.

Ashan
  • 18,898
  • 4
  • 47
  • 67
  • Thank you. But strange thing that itsn't working with S3 AWS. I do not have Backend code there. – Nikzin Nov 05 '17 at 13:18
  • No errors in browser. I just see my index.html w/o angular elements. When I run it locally I use "bower install, npm install commands: it install node modules and bower components . with command npm run start it starts at local host. At AWS I do not know how to run those commands an it look as I open index.html w/o installing node modules and bower components: but now errors. I'm leaning and new in Angular js and don't yet how it could be run in alternative ways. – Nikzin Nov 06 '17 at 22:14
  • At MS Azure my page is run well w/o me installing "node modules and bower components". Just uploading my project from gitHub makes it full functional there. – Nikzin Nov 06 '17 at 22:18
  • I only tried it at S3, but I did not try it in in EC2, because I don't know how to do it yet. – Nikzin Nov 06 '17 at 22:19
  • @Nikzin You need to run the npm install, bower install locally or in your CI/CD and then deploy to S3. You cannot run those at S3. – Ashan Nov 07 '17 at 00:26
  • You mean to deploy node modules and bower components? Should I upload those folders: they have like 5000 files in them And then how to run it at S3. (locally I call: npm run start to make it run at localhost). – Nikzin Nov 07 '17 at 07:58
  • After deploying to S3 you don't need to run, it should be served based on the paths. – Ashan Nov 07 '17 at 09:18
  • Still not working this way: I tried this: uploaded node_modules and bower_components. But there is no changes. (can only see same index.html with angular components no working). – Nikzin Nov 07 '17 at 09:54
  • Actually that worked. I forgot to make those folders public and when I did it it worked super. Thanks! – Nikzin Nov 07 '17 at 10:40