How to upload pre-rendered file on S3 and access that on initial load of our webpage?

Question

I have my web application implemented using Angular Universal Starter kit. I want to upload the pre-rendered file to the S3 bucket so that my initial page gets loaded faster.But I couldn't find the proper configurations regarding uploading the pre-rendered file to S3 and how to access that file on initial load?

I am not sure whether you mean pre-compiled template rendering or HTML page rendering but I believe AngularJS is just a Javascript (client-side) framework, which means code execution is being carried out on the client. The EC2 instance does not render your page, the browser does. You can read more on "Hosting a Static Website on Amazon S3" here: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html — Khalid T., Jan 14 '17 at 12:43
ya i meant pre-compiled template.I have used webpacks to bundle up my project. So now am confused how to upload that precompiled bundle to S3 and access on initial load? I have used Angular Universal starter kit(server side rendering) so the server generates a page that contains rendered HTML and returns to the browser. — Shailaja shah, Jan 14 '17 at 13:39
@Shailajashah Could you please elaborate how you pre-rendered your angular app? [There is already question about it on SO](http://stackoverflow.com/questions/41803639/how-to-pre-render-pages-in-static-html-for-an-angular-app) without an answer. Your help would be greatly appreciated! — Dmitry Efimenko, Mar 28 '17 at 00:03
@Dmitry Angular Universal Kit already contains webpack - Its for bundling all our project. So we can use webpack to bundle and upload this bundle on S3. — Shailaja shah, Mar 30 '17 at 06:58

so-random-dude · Answer 1 · 2023-02-02T13:58:00.623

Angular Universal can be leveraged for both Dynamic SSR (server-side rendering) and Static Pre-rendering

Dynamic SSR (server-side rendering) cannot be achieved with static file hosting like AWS S3. It needs a server side Javascript engine (nodejs) to pre-render the page before handing it over to the client bowser; Amazon S3 simply doesn't have any capability than serving some static files.

On the other hand, for Static Pre-rendering with angular universal, AWS S3 can be leveraged as it's all static html/js/css files. There is a catch though, every time the static file content changes, you have to kickoff your build/CI-CD process so that the resultant static files will get deployed to S3 bucket. If that's ok for you, this is no different than deploying any other static sites to S3.

For example,

aws s3 sync ./dist/<your_awesome_ng_project> s3://<your_awesome_bucket_name>/ --delete.

You can refer this circle CI config where I am building an angular project and deploying to S3 bucket https://github.com/jaisonpjohn/dbeaver-password-retriever-ng/blob/master/.circleci/config.yml

More on Dynamic SSR (server-side rendering) & Static Pre-rendering

Please refer this article to know a bit more about it. I am quoting relevant parts here

Dynamic SSR (server-side rendering) & Static Pre-rendering

Dynamic SSR is the concept that there will be a live Node server spun up that whenever a Route is hit, it will dynamically generate and serialize the application — returning that HTML to the browser.

Static Pre-rendering is when we want to pre-render a list of routes, and create static files, (ie: index.html, about-us.html, etc) and then use a server of our choosing to serve up those files later on.

So how do we know which one to choose and when?

Pre-rendering will typically give you better performance since we’re not waiting for a server to hit all the necessary APIs within your application, and nothing has to be “serialized”, it already has all the serialized HTML of your application outputted for each one of the Routes files.

Here’s the points you need to consider before deciding which route you need to take.

When to use Static Pre-Rendering:

Your application itself is rather Static. (or at least the Routes you’re trying to pre-render) For example: homepage | about us | contact us
Very dynamic portions of your site (and ones that are behind a Login/Auth barrier) can be pointed to the normal Client-side rendered (CSR) version of your application, and Angular can bootstrap itself normally.
Your application doesn’t update very often. Whenever some changes are needed on the static routes, you can simply run the build script again and republish the /dist folder containing all of your pre-rendered files.

When to use Dynamic SSR:

Your application (and the routes you need to SSR) are very dynamic
You have a list of “trending products” | “live data” | etc, that you need populated correctly for every server-side render.
Your applications structure is rendered based on JSON files or a CMS where anything could change at any given moment.

Typically most applications will need static pre-rendering (since any routes behind an authentication-wall don’t gain much/any benefit from utilizing SSR, since one of the main purposes is the SEO gains, and improved perceived performance. Remember, you can always have certain aspects of your application not render during SSR, and have those dynamic portions populated during CSR!

A similar question (this question is about another static file server nginx, instead of S3): https://github.com/angular/universal/issues/554

BTW, Angular Universal is part of the main ng project now

This answer is a bit late, I don't know whether you got your answer yet or not. But I am adding it here anyway to help fellow SO users.

score 5 · Answer 2 · answered Jan 31 '17 at 10:06

Using a prerendered HTML is the same as uploading a static website. Assuming that you have aws cli installed and configured (using aws configure), you can run the following command on the directory to upload the file to a s3 bucket.

This will only upload/update those files which have changed from the existing bucket files.

aws s3 sync my_local_dir s3://my_s3_bucket_name

Additionally, if you want to set cache then you can add the following option

aws s3 sync my_local_dir s3://my_s3_bucket_name --cache-control max-age=604800

score 5 · Answer 3 · answered Jul 26 '17 at 17:05

I have implemented it in my current organization. difference in my case was that Our content was dynamic because of inventory. Hence, we used to send pre-rendered pages to All crawlers only and not to real users. This was done for following reasons:

Not send crawlers to real server else it will impact our analysis.
Why to trouble our servers for crawlers which ONLY need static data.
Most importantly MOST engines cannot render Angular tags..Basically they do not execute javascript on the page before showing search result. If we do not do this; search results for our website will look horrible.

How we did it: On our nginx; we configured the rule if user-agent is any of search engines transfer request to a pre-render server ( an independent server) having https://github.com/prerender/prerender installed.

Most importantly on this pre-render server s3HtmlCache plugin was configured..This plugin firstly checks if page is available in S3 ; if not it creates the page on run-time --> saves in s3 --> sends to client.

So, to solve your problem: In your nginx; just transfer ALL requests to pre-render server.

Let me know if you face any issues. I have implemented it and I know this will work for sure. All the best.