0

So before I begin full on coding going down the wrong path, I'm looking into Angular Universal be the SSR and reading on AWS docs to do it. The SSR is mainly for speed and for Googlebot/SEO.

I am reading the white paper here:

AWS Serverless Multi-Tier Architectures with Amazon API Gateway and AWS Lambda

I love this approach but I am missing two things in the diagram that I need research on:

  1. I want to have my own auth with AWS Cognito (and maybe a third-party identity manager like Google or GiHub added latter)
  2. Where does the SSR pages go?

enter image description here

The AWS docs I've read say push it to AWS Lambda with the AWS CLI which includes some TS files (lambda.ts) and such.

  • does this make the bucket obsolete and not used for the SPA?
  • can Webpack be used in any way in this AWS methodology to make things easier?

Side note: I haven't use AWS in this full capacity yet and trying to figure out how to integrate the enviornment I want based on my needs outlined above.

Improve this question
3
  • "The AWS docs I've read say push it to AWS Lambda with the AWS CLI which includes some TS files (lambda.ts) and such." Can you add a link to this documentation, if possible? Commented Feb 5, 2022 at 17:05
  • I think what I saw was part of the serverless framework package. I am still looking for a way to add in the SSR (Angular Universal) to the diagram above. Commented Feb 6, 2022 at 2:19
  • Why does the classic ng add @nguniversal/express-engine not work? Also do you need to pass data to angular during SSR? Commented Feb 11, 2022 at 20:17

1 Answer 1

Reset to default
1

I want to have my own auth with AWS Cognito (and maybe a third-party identity manager like Google or GiHub added latter)

AWS API gateway supports integration with AWS Cognito.

For REST API Gateways: Control access to a REST API using Amazon Cognito user pools as authorizer

For HTTP API Gateways: Controlling access to HTTP APIs with JWT authorizers (You can use Amazon Cognito as a JWT issuer: Reference)

Where does the SSR pages go?

The most conventional architecture is to build your Angular project and convert it to static files (using Webpack or other means), upload the static output files to S3, and then serve the static files via CloudFront (recommended) or directly from S3. This is the architecture depicted in the linked AWS Whitepaper and the diagram.

The AWS docs I've read say push it to AWS Lambda with the AWS CLI which includes some TS files (lambda.ts) and such.

  • does this make the bucket obsolete and not used for the SPA?

Yes, if you use the approach you are describing here, you won't be using S3. Instead, you would be serving your SPA through API Gateway.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I have 2 questions about part two you mentioned as "where does the SSR pages go": 1. So if I have a site like this one and there are new questions added that is a new page, do I have to update the static files for every new question or does webpack or something else make them on the fly? 2. So webpack will turn them into HTML source files that are served to the client and can be added to the sitemaps.xml file?
Unless you are using the API to get you the questions dynamically, you will have to rebuild the application and update the HTML source files. Any change in Angular source code => requires update of files in S3
The api will be getting them dynamically. So the SSR will remain on S3 and the dynamic questions through the gateway will still allow for static pages? I am worried about SEO related issues mainly that's why.
Reading the angular docs says SSR cannot be done on S3 as it needs node.js running: angular.io/guide/universal so not sure how this will work in this case
@cdub I misunderstood your question, SSR indeed cannot be done on S3. You will need to use the Lambda based approach for SSR. In that case as the answer mentions, you won't be using S3.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.