Angular Universal SSR Support

[jbeckton]

Amplify CLI Angular projects should support Server Side Rendering. For SEO purposes we need SSR, I know of other ways to deploy an Angular Universal app into a Lambda Function via the Serverless Framework tooling. I would prefer to use the Amplify tooling so I do not have to mix and match various tool chains.

Thanks

[sammartinez]

@jbeckton Thanks for the feedback! I am marking this as a feature request and moving the issue to our JS repo.

[adrian-goe]

Hello, is there an update on this?
Or how can we support?

[Arunaliyanaarachchi]

Is there any Update on this ..? whole my application is screw because of this.is there any alternative for this ..?. either i can have SSR or No.

[thenetimp]

also looking for an update to this

[sammartinez]

All,

Wanted to give you an update here, we are actively working on an SSR feature for Amplify. While we don't have a date for the feature to be out I wanted to share that we are working on this.

Thanks!

Sincerely,
The Amplify JS team

[rudyhadoux]

Hi,

Maybe with scully.io ?

[vidhyasagarj]

Any update on this item ?

[Mdev303]

@vidhyasagarj I don't know if it also works for angular universal but there is something in preview for nextjs #5435 (comment)

[dahero95]

it was already released for next.js and nuxt.js, will there be support for angular universal?

[ericclemmons]

@dahero95 I'm not an expert on SSR with Angular. Can you give it a go & report back? If it fails, with a sample repo so I can look into specifics? 🙏

[jbeckton]

@sammartinez My original attempt was me trying to run an Angular SSR app inside a Lambda Function, but I think if you guys could support an additional Hosting option so that we could deploy our app inside ECS (Node.js) container then it should work. Previously I was trying to use a Lambda function to host my app but it was really painful given the way Amplify tooling works. If we could just copy the dist folder into a Node.js Container and deploy that then we should be good to go.

[ericclemmons]

@jbeckton Are you having issues with the Amplify JS client library in your Angular SSR app, or are your issues more related to hosting it?

[jbeckton]

I never ended up using Amplify due to the issues around SSR, I absolutely have to have it. My issues were related to hosting since I never actually got my solution deployed I can only assume the library works as expected running in Node.

[ericclemmons]

I understand. I can't speak to the deployment story for Angular with SSR (EC2? Vercel? Serverless?) as well a I can for React/Next.js/etc..

But I don't feel we can close this until we validate withSSRContext behavior works with Angular SSR:

https://angular.io/guide/universal

[vidhyasagarj]

Any update on this?

[abbasaleid-zz]

Any updates?

[bcs-gbl]

+1

[oliverandersencox]

@sammartinez is there any news on this ?

[Boka44]

Looking for an update as well. Has anyone here had success with stuff like prerender?

[oliverandersencox]

@Boka44 we have got it pre rendered and hosted as a universal app - however seems the amplify api doesn't play ball with the auth system and although it works fetching the data, we consistently get this error:

ensure credentials error No Cognito Identity pool provided for unauthenticated access

@sammartinez any ideas?

[Chenzo]

+1

We absolutely need SSR for our app. Amplify is great, but without crawlability it's a no-go for us.

[jbeckton]

@Chenzo You could create your backend with Amplify and then host your Angular SSR frontend in a container. Should be pretty easy to connect your Angular app to the Amplify backend. You can even do a monorepo and from the Amplify console you can check that option and provide the correct folder to build your backend from.

[oliverandersencox]

@jbeckton @Chenzo I have managed to get rid of the earlier issues by moving the amplify initialisation into the constructor of the app main component.

It is running on google app engine as an SSR app - however after reading what you say @Chenzo it seems even with that all working it may not be correct. Are you saying amplify is build in an non SSR friendly way, even if i have got it working without error on server?

[jbeckton]

@oliverandersencox As for Amplify it's the hosting that prevents the SSR. Amplify tooling will deploy your UI bundles to an s3 bucket and serve the static files from there. Once the tooling supports deploying your bundles to a container running node.js then you can get the benefits of SSR. The Google app engine is basically a node.js instance so the SSR works fine there.

[niroshank]

Any updates?

[jbeckton]

yes.... Use NestJs and Docker. https://nestjs.com/

…

On Fri, Apr 30, 2021 at 8:19 PM Niroshan Kumarasinghe < ***@***.***> wrote: Any updates? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3474 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAULYEPY6X2BEFAIBF77ZGDTLNQMBANCNFSM4HYX43VQ> .

[oliverandersencox]

@sammartinez is there any news on this or any solution we can apply ?

[selected-pixel-jameson]

Any updates on this? Really could use this feature. We are hosting our Angular Universal Front-End is not being hosted by Amplify. But we want to use the angular-ui components. Specifically the authentication components.

[samorgill]

Please add support for Angular Universal on Amplify. I love Amplify but I NEED ssr

[catherine-augustine]

Amplify build fails with the error .. The specified command ("build:ssr") is invalid.
Do we have SSR support?

[alambertt]

Any update?? I need this too

[bcs-gbl]

We're buliding a complex microservice based sys with Nuxt/Nodejs and Amplify (from 2019).
Signing up techs with Nuxt and AWS skills, working and spent ~30000 hours. We cannot afford to switch Next.js (SSR available from may).
Our decisions based on an AWS post that says SSR available since Sep 15, 2020 and we can wait for that ~1-2 year.
I hope Angular and Nuxt will be available soon.

[nabbl]

I am in desperate need for this. I want to migrate my application from ECS to Amplify!

[bego-mx]

Any updates?

[abdallahshaban557]

@nabbl - which categories are you using from Amplify?

@bcs-gbl - since this issue is particularly for SSR support for Angular, can you please create a feature request on this repo for Nuxt?

[bcs-gbl]

@bcs-gbl - since this issue is particularly for SSR support for Angular, can you please create a feature request on this repo for Nuxt?

@abdallahshaban557 Thank you, it has been open for two years.

[dr-star]

Any update?

[Medsaad]

Not sure what is the hard part that makes such thing happening, very time consuming! It has been +3 years since this thread has been open!

[bcs-gbl]

AWS is a production environment and costs a huge amount of money (thousand of $$$/month). We have no hobby projects in it, everything was created for enterprise level usage. We can't wait for a "must have" feature for 2-3 years.
That wouldn't have been a problem If they did not share positive informations about SSR support in 2018, but they did.
We can't afford to loose our customers because of lack of SSR + SEO. So our frontends separated from Amplify and goes to Vercel or Netlify.

[myonara]

I have managed to use CSR and SSR in parallel in an angular universal project using prerender and lazy load modules. I will now try to incorporate the amplify auth module as CSR module. I will report, how far I get with that....

[hiroki-gota]

Please provide an estimate for this feature and also provide an alternative recommended option that should work well with Amplify while waiting for this feature.

[saikiranchalla1]

Any update on the feature request?

[myonara]

My workaround is instead of publishing the angular/amplify app creating a docker container, where the prerender of the ssr is producing the distribution and this is then served from node.js, here is the Dockerfile, which I'm using right now:

FROM node:19-slim AS ng-build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install --location=global @angular/cli \
    && npm install

# fetch the angular sources and stuff
COPY . /app/

## create the output of the angular app 
## (here the name of the app is platform1, you have to change it three times below to your own project name)
RUN ng run platform1:prerender

## Use Node Slim image
FROM node:19-slim AS platform1

WORKDIR /app

#fetch the angular distribution for serving from node.js
COPY --from=ng-build-stage /app/dist/ /app/dist/

## Start the application
CMD ["node", "dist/platform1/server/main.js"]

Hopefully that can help someone....

[vuvanthoai]

My workaround is instead of publishing the angular/amplify app creating a docker container, where the prerender of the ssr is producing the distribution and this is then served from node.js, here is the Dockerfile, which I'm using right now:

FROM node:19-slim AS ng-build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install --location=global @angular/cli \
    && npm install

# fetch the angular sources and stuff
COPY . /app/

## create the output of the angular app 
## (here the name of the app is platform1, you have to change it three times below to your own project name)
RUN ng run platform1:prerender

## Use Node Slim image
FROM node:19-slim AS platform1

WORKDIR /app

#fetch the angular distribution for serving from node.js
COPY --from=ng-build-stage /app/dist/ /app/dist/

## Start the application
CMD ["node", "dist/platform1/server/main.js"]

Hopefully that can help someone....

Hello my friend,

Can you give for me way to deploy docker container on Amplify? Thanks !

[LukeSamkharadze]

+1

[lukaseepo]

Any updates?