Repository files navigation

Full-featured AWS architecture to useServer-Side Rendering for anycreate-react-app project usingLambda,API Gateway,CloudFront. All infrastructure is configured using theAWS Cloud Development Kit and can be deployed usingAWS CodePipeline andAWS CodeBuild.

Have fun, and be a niceanti-fascist human being!

https://d31tuk9nqnnpkk.cloudfront.net/

Guide (EN):React with server-side rendering on AWS Lambda onsbstjn.com
Guide (DE):React und server-side rendering mit AWS Lambda und CloudFront onsuperluminar.io

Whenever you search forserver-side rendering of React applications, you will read it's hard to accomplish.But why? Most probably, you'll end up with frameworks likerazzle orNext.js only because you wanted a little bit of pre-rendered HTML for your React application.

The idea ofcra-serverless is pretty simple: Use your existing, un-ejected, and unpatchedcreate-react-app and replaceBrowserRouter withStaticRouter, deploy it toAWS Lambda, and finally put a CDN in front of it. You'll have your same React SPA, but now you can have pre-rendered HTML content for all routes in your application. This even works fine with frameworks likestyled-components orapollo client for usingGraphQL on AppSync.

Yes, this isserverless server-side rendering, so let's call itserverless pre-rendering for React. 🤯

• React with server-side rendering on AWS Lambda (English)
• React und server-side rendering mit AWS Lambda und CloudFront (German)

• TypeScript, for God's sake
• Basicun-ejectedcreate-react-app stored./src
• SSR usingreact-dom/server andkoa in./server
• Infrastructure as Code usingAWS Cloud Development Kit in./aws
• AWS Lambda for server-side (pre-)rendering ofReact SPA
• Amazon CloudFront tocache pre-rendered HTML and serve assets from S3
• AWS CodePipeline andAWS CodeBuild forContinious Deployments

The primary goal forcra-serverless is to use a defaultcreate-react-app setup without any changes and avoid to eject it from react-scripts.

# Start your local environment as always$> yarn start# Build your static SPA as always$> yarn build

You can develop and build SPA with the usual flow. Afterwards, you can run a local HTTP server withkoa to test-drive your server-side rendering. The built project is intended to be uploaded to AWS Lambda, but you can deploy the Node.js application to other services as well.

# Start local server-side rendering service$> yarn run:local# Build Node.js service for server-side rendering$> yarn build:server

All full-featured pipeline using AWS CodePipeline and AWS CodeBuild using theAWS Cloud Development Kit is included tosupport continious deployments. (Jump toDeployments and Configuration)

Most React applications use thereact-router-dom withBrowserRouter :

importReactfrom'react'import{BrowserRouter}from'react-router-dom'React.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'),)

Lucky us, aStaticRouter exists as well andreact-dom has a function calledrenderToString :

import{renderToString}from'react-dom/server'import{StaticRouter}from'react-router-dom'constmarkup=renderToString(<StaticRouterlocation={path}><App/></StaticRouter>,)

Next, the value ofmarkup will be injected into yourindex.html file and that's it. In a Nutshell,cra-serverless uses existing features of the frameworks you already use and wraps them in a serverless architecture with AWS Lambda.

Based oncra-pipeline, all you need is apersonal GitHub Access Token and your own fork of this repository. If you have both things in place, store the token inAWS Systems Manager:

$> aws secretsmanager create-secret \    --name GitHubToken \    --secret-string abcdefg1234abcdefg56789abcdefg \    --region us-east-1{"ARN":"arn:aws:secretsmanager:us-east-1:123456789001:secret:GitHubToken-uNBxTr","Name":"GitHubToken","VersionId":"4acda3d1-877f-4032-b38e-17bc50239883"}

As everything is configured usingAWS Cloud Development Kit, you need to prepare (aka bootstrap) your AWS account once for the usage of theCDK in your desired AWS region:

$> yarn cdk bootstrap --region us-east-1⏳  Bootstrapping environment aws://123456789001/us-east-1...0/2| 5:06:49 PM| CREATE_IN_PROGRESS| AWS::S3::Bucket| StagingBucket0/2| 5:06:50 PM| CREATE_IN_PROGRESS| AWS::S3::Bucket| StagingBucket Resource creation Initiated1/2| 5:07:11 PM| CREATE_COMPLETE| AWS::S3::Bucket| StagingBucket✅  Environment aws://123456789001/us-east-1 bootstrapped.

Next, have a look at the./config.ts file in the root folder and configure at least thegithub section of the file.

exportconstconfig={name:'cra-serverless',github:{owner:'sbstjn',repository:'cra-serverless',},env:{region:'us-east-1'},}

After changing the GitHub repository information, just deploy the CloudFormation stack for the includedAWS CodePipeline and all resources will be created for you.

$> yarn cdk deploy cra-serverless-pipelinePipeline: deploying...Pipeline: creating CloudFormation changeset...✅  Pipeline

Head over to theAWS Management Console and watch the beauty of a deploy pipeline and CloudFormation stacks. All resources will be created for you, and after a while aCloudFront Distribution is available for the included example application.

• sbstjn.com for a detailed guide in English
• superluminar.io for a detailed guide in German

Feel free to use the code, it's released using theMIT license.

You are welcome to contribute to this project! 😘

To make sure you have a pleasant experience, please read thecode of conduct. It outlines core values and beliefs and will make working together a happier experience.