DEV Community

Cover image for Serverless Server Side Rendering with Angular on AWS Lambda@Edge

Serverless Server Side Rendering with Angular on AWS Lambda@Edge

eelayoubi on December 14, 2020

In this article we will look at how we can enable server side rendering on a Angular application and make it run serverless on 'AWS Lambda@Edge'. ...
Collapse
 
rui_zhou_baec714bb96461ef profile image
RayZ

I registered a dev account just to applause this article.

Rarely do I see a guide that is filled with useful information and flawless to follow.

Way to go, buddy!

Collapse
 
achraflaakissi profile image
LAAKISSI Achraf • Edited

Thanks for your article,

everything works good but the root route (/) is not rendered ssr, it s just render the file index.html. I check for your app I found the same thing.
dev-to-uploads.s3.amazonaws.com/up...
Thanks.

Collapse
 
eelayoubi profile image
eelayoubi

If you search for something, or directly access the animal route such as 'd2htk1pm9r9gbg.cloudfront.net/anim...' you will see that it is server side rendered.

Collapse
 
seanvm profile image
Sean • Edited

Love this post, and nice work on getting this all working with Lambda@Edge. Only issue is I'm also seeing this same problem as the above person in my app with SSR on the root route. Any idea how to get SSR working for the root route? I'd rather not have to redirect to another page like you're doing.

SSR is working on all routes except for the root route. When running on localhost using the default server.ts file it works fine...

Thread Thread
 
achraflaakissi profile image
LAAKISSI Achraf

I solved the problem,It was with the Default root object CloudFront, it should be empty, the default value was index.html that's why I receive just the content of this file in SSR. also I check for the empty route on my lambda function. you can find more details here : stackoverflow.com/questions/704282...

Collapse
 
eugenesergio profile image
Gio • Edited

Great article!

I am able to execute the deployment in AWS for the serverless-distribution.yml, but not able to set it up correctly. Two things I noticed: S3 didn't upload any dist files and CloudFront didn't have an Origin. What could be wrong?

For the serverless-distribution.yml, what are the other lines that I need to change for the AWS config? A sample file would really help. Thanks a lot!

Collapse
 
rajanpanchal profile image
Rajan Panchal

Where the angular app hosted?

Collapse
 
eelayoubi profile image
eelayoubi • Edited

The application is deployed using the serverless framework. In the 'Deploying to AWS' section of the blog. We deploy the serverless-distribution.yml stack. That creates a cloudfront distribution and an S3 bucket that will host and serve the application.

Collapse
 
rajanpanchal profile image
Rajan Panchal

Oh so it's hosted on S3 bucket.. gotcha.

Collapse
 
chriswi profile image
Chris

I am new to all this but using this article do I still get to setup the AWS Lambda, Cognito, DynamoDB, ElasticCache, and API Gateway in the AWS console with my anuglar 13 app and then do the the deploy with AWS CLI?

I want to control everything though the AWS Console but new to the serverless framework (just learning today) but my Angular app does need SSR for SEO and so far to be truly servverless AWS doesn't seem to have a way to do that.

I want this approach but a way to do SSR in angular:
docs.aws.amazon.com/whitepapers/la...

Collapse
 
choroshin profile image
Alex Choroshin

Thanks for the great article,
everything works good but for some reason only the root route (/) is not rendered, do you have any clue?

Thanks.

Collapse
 
eelayoubi profile image
eelayoubi

Hello Alex,

What is not working exactly? I just went here: d2htk1pm9r9gbg.cloudfront.net/ and you will be redirected to d2htk1pm9r9gbg.cloudfront.net/search