AngularJS SEO for static webpages (S3 CDN)

Question

I\'ve been looking into ways to improve SEO for angularJS apps that are hosted on a CDN like Amazon S3 (i.e. simple storage with no backend). Most of the solutions out there

Answer 1

As AWS is offering Lambda@Edge as a service we can handle this issue without grunt or anything else. (Atleast for basic stuff)

I tried Lambda@Edge and it worked as expected, in my case I just had all the routes set to "/" in Lambda@Edge (Except for the files are present in s3 like css, images etc).

The event for the Lambda that I set to is "viewerRequest" and following is the code.

'use strict';

exports.handler = (event, context, callback) => {
    console.log("Event received is", JSON.stringify(event));
    console.log("Context received is", context);
    const request = event.Records[0].cf.request;
    if (request.uri.endsWith(".rt")) {
        console.log("URI is matching with .rt, the URI is ", request.uri);
        request.uri = "/";
    } else {
        console.log("URI is not ending with rt so letting it go URI is", request.uri);
    }
    console.log("Final request URI is", request.uri);
    callback(null, request);
};

Logs in the cloudwatch are little difficult to check as the logs are populated in the region of the cloudwatch which is nearer to the edge location which is handling the request.

For ex. Though this Lambda is deployed/written for us-east I see this in ap-south region as I am accessing the cloudfront from Singapore. Checked it in Google webmaster tools 'Fetch as google' options and the page is being rendered and viewed as expected.