SPA and REST API as one service

Serverless Architectures
1

Has somebody already tried to combine the aws-node-rest-api-with-dynamodb (REST API) and aws-node-single-page-app-via-cloudfront (Single Page Application) exemple as one service?
Both could be placed behind Cloudfront.

2

I’ve been keeping my SPA and API separate. I started that way because I typically need different packages, config files and deployment scripts for each.

For personal projects I’m using the same repo but different folders for each. For professional projects I’ve been using one repo for the API and another for the SPA. That reflects me being the only person working on the personal stuff while the professional projects will probably have different teams on them.

3 Likes
3

+1 for keeping them separate.

As the thread topic shows, they’re two separate applications and should be treated as such. It seems like people get confused just because they can write them in the same language…

2 Likes
4

Thanks @buggy for the answer.
Is there a way to integrate both API and SPA behind Cloudfront without having to do it manually?

5

I agree completely, @rowanu: I’m already working at it separately.
I just wanted to deploy both automatically behind Cloudfront.

6

Once you add the requirement of ‘manually’ no, it can be done, but you have to manually configure CloudfFont to do it. With a different behavior for each ‘resource’ routing appropriately to the different origin’s.

7

Ah, OK. I misunderstood the question. You will have to configure the CloudFront distributions yourself, but you can (and should) be using CloudFormation to set these distributions up. I would keep them out of your Serverless service definitions, because you won’t want to deploy changes to it very often (and CF changes take aaaaaaages) - either create a resource-only service, or just do native CFN.

Setting up the CF > S3 connection is pretty trivial. The CF > API GW is a bit more involved, but still do-able. I have a draft blog post for doing this, but then again I have a lot of drafts… :no_mouth:

8

Involved! You nailed it, @rowanu. A while ago, I’ve got some headache with the Pattern Path and Origin Path (Serving a S3 bucket and an API Gateway through CloudFront).