{"id":13880953,"url":"https://github.com/sbstjn/cra-serverless","last_synced_at":"2025-04-21T22:33:28.915Z","repository":{"id":137670782,"uuid":"237771074","full_name":"sbstjn/cra-serverless","owner":"sbstjn","description":"Serverless pre-rendering (SSR) for React SPA using AWS Lambda, S3, and CloudFront.","archived":false,"fork":false,"pushed_at":"2020-06-15T20:43:31.000Z","size":1395,"stargazers_count":166,"open_issues_count":4,"forks_count":31,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-01T16:24:20.407Z","etag":null,"topics":["aws","aws-cdk","aws-lambda","cra","cra-serverless","create-react-app","react","serverless","ssr"],"latest_commit_sha":null,"homepage":"https://sbstjn.com/serverless-create-react-app-server-side-rendering-ssr-lamda.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sbstjn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-02T12:55:43.000Z","updated_at":"2025-03-22T21:41:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a94b7e70-d582-4f97-8274-0c5646971611","html_url":"https://github.com/sbstjn/cra-serverless","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbstjn%2Fcra-serverless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbstjn%2Fcra-serverless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbstjn%2Fcra-serverless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbstjn%2Fcra-serverless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sbstjn","download_url":"https://codeload.github.com/sbstjn/cra-serverless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250145354,"owners_count":21382398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","aws-cdk","aws-lambda","cra","cra-serverless","create-react-app","react","serverless","ssr"],"created_at":"2024-08-06T08:03:41.884Z","updated_at":"2025-04-21T22:33:23.895Z","avatar_url":"https://github.com/sbstjn.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Serverless SSR for [create-react-app][cra]\n\n[![MIT License](https://badgen.now.sh/badge/License/MIT/blue)](https://github.com/sbstjn/cra-serverless/blob/master/LICENSE.md)\n[![sbstjn.com](https://badgen.now.sh/badge/by/sbstjn/purple)](https://sbstjn.com/serverless-create-react-app-server-side-rendering-ssr-lamda.html)\n[![superluminar.io](https://badgen.now.sh/badge/by/superluminar/red)](https://superluminar.io/2020/02/07/react-spa-und-server-side-rendering-ssr-mit-aws-lambda-cloudfront-und-dem-cdk/)\n\n\u003e Full-featured AWS architecture to use [**Server-Side Rendering**][ssr] for any [**create-react-app**][cra] project using **Lambda**, **API Gateway**, **CloudFront**. All infrastructure is configured using the [**AWS Cloud Development Kit**][cdk] and can be deployed using [**AWS CodePipeline**][pipeline] and [**AWS CodeBuild**][codebuild].\n\u003e\n\u003e Have fun, and be a nice **anti-fascist** human being!\n\u003e\n\u003e https://d31tuk9nqnnpkk.cloudfront.net/\n\u003e \n\u003e **Guide (EN):** [React with server-side rendering on AWS Lambda](https://sbstjn.com/serverless-create-react-app-server-side-rendering-ssr-lamda.html) on [sbstjn.com](https://sbstjn.com) \\\n\u003e **Guide (DE):** [React und server-side rendering mit AWS Lambda und CloudFront](https://superluminar.io/2020/02/07/react-spa-und-server-side-rendering-ssr-mit-aws-lambda-cloudfront-und-dem-cdk/) on [superluminar.io](https://superluminar.io)\n\nWhenever you search for **server-side rendering** of React applications, you will read it's hard to accomplish. **But why?** Most probably, you'll end up with frameworks like [razzle](https://github.com/jaredpalmer/razzle) or [Next.js](https://nextjs.org/) only because you wanted a little bit of pre-rendered HTML for your React application.\n\nThe idea of **cra-serverless** is pretty simple: Use your existing, un-ejected, and unpatched [**create-react-app**][cra] and replace **`BrowserRouter`** with **`StaticRouter`**, deploy it to [**AWS Lambda**][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 like [**styled-components**][sc] or [**apollo client**][apollo] for using [**GraphQL on AppSync**][appsync].\n\n![React SPA with serverless pre-rendering](./aws/overview.png)\n\nYes, this is **serverless server-side rendering**, so let's call it **serverless pre-rendering for React**. 🤯\n\n##### Extended Guides:\n\n- [React with server-side rendering on AWS Lambda](https://sbstjn.com/serverless-create-react-app-server-side-rendering-ssr-lamda.html) (**English**)\n- [React und server-side rendering mit AWS Lambda und CloudFront](https://superluminar.io/2020/02/07/react-spa-und-server-side-rendering-ssr-mit-aws-lambda-cloudfront-und-dem-cdk/) (**German**)\n\n## Architecture\n\n- **TypeScript**, for God's sake\n- Basic **un-ejected** [create-react-app][cra] stored `./src`\n- **SSR** using `react-dom/server` and [koa][koa] in `./server`\n- **Infrastructure as Code** using [AWS Cloud Development Kit][cdk] in `./aws`\n- [AWS Lambda][lambda] for server-side (pre-)rendering of **React SPA**\n- [Amazon CloudFront][cloudfront] to **cache pre-rendered HTML** and serve assets from S3\n- [AWS CodePipeline][pipeline] and [AWS CodeBuild][codebuild] for **Continious Deployments**\n\n## Usage\n\nThe primary goal for [cra-serverless](https://github.com/sbstjn/cra-serverless) is to use a default [create-react-app][cra] setup without any changes and avoid to eject it from react-scripts.\n\n```bash\n# Start your local environment as always\n$ \u003e yarn start\n\n# Build your static SPA as always\n$ \u003e yarn build\n```\n\nYou can develop and build SPA with the usual flow. Afterwards, you can run a local HTTP server with [koa][koa] 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.\n\n```bash\n# Start local server-side rendering service\n$ \u003e yarn run:local\n\n# Build Node.js service for server-side rendering\n$ \u003e yarn build:server\n```\n\nAll full-featured pipeline using AWS CodePipeline and AWS CodeBuild using the  [AWS Cloud Development Kit][cdk] is included to [support continious deployments](#deployments-and-configuration). (*Jump to [Deployments and Configuration](#deployments-and-configuration)*)\n\n## How it Works - In a Nutshell\n\nMost React applications use the `react-router-dom` with `BrowserRouter` :\n\n```tsx\nimport React from 'react'\nimport { BrowserRouter } from 'react-router-dom'\n\nReact.render(\n  \u003cBrowserRouter\u003e\n    \u003cApp /\u003e\n  \u003c/BrowserRouter\u003e,\n  document.getElementById('root'),\n)\n```\n\nLucky us, a `StaticRouter` exists as well and `react-dom` has a function called `renderToString` :\n\n```typescript\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router-dom'\n\nconst markup = renderToString(\n  \u003cStaticRouter location={path}\u003e\n    \u003cApp /\u003e\n  \u003c/StaticRouter\u003e,\n)\n```\n\nNext, the value of `markup` will be injected into your `index.html` file and that's it. In a Nutshell, [**cra-serverless**][cra-serverless] uses existing features of the frameworks you already use and wraps them in a serverless architecture with AWS Lambda.\n\n## Deployments and Configuration\n\nBased on [cra-pipeline][cra-pipeline], all you need is a [personal GitHub Access Token][token] and your own fork of this repository. If you have both things in place, store the token in [AWS Systems Manager][sm]:\n\n```bash\n$ \u003e aws secretsmanager create-secret \\\n    --name GitHubToken \\\n    --secret-string abcdefg1234abcdefg56789abcdefg \\\n    --region us-east-1\n\n{\n  \"ARN\": \"arn:aws:secretsmanager:us-east-1:123456789001:secret:GitHubToken-uNBxTr\",\n  \"Name\": \"GitHubToken\",\n  \"VersionId\": \"4acda3d1-877f-4032-b38e-17bc50239883\"\n}\n```\n\nAs everything is configured using [AWS Cloud Development Kit][cdk], you need to prepare (_aka bootstrap_) your AWS account once for the usage of the **CDK** in your desired AWS region:\n\n```bash\n$ \u003e yarn cdk bootstrap --region us-east-1\n\n⏳  Bootstrapping environment aws://123456789001/us-east-1...\n\n0/2 | 5:06:49 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket\n0/2 | 5:06:50 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket Resource creation Initiated\n1/2 | 5:07:11 PM | CREATE_COMPLETE      | AWS::S3::Bucket | StagingBucket\n\n✅  Environment aws://123456789001/us-east-1 bootstrapped.\n```\n\nNext, have a look at the `./config.ts` file in the root folder and configure at least the `github` section of the file.\n\n```typescript\nexport const config = {\n  name: 'cra-serverless',\n  github: {\n    owner: 'sbstjn',\n    repository: 'cra-serverless',\n  },\n  env: { region: 'us-east-1' },\n}\n```\n\nAfter changing the GitHub repository information, just deploy the CloudFormation stack for the included [AWS CodePipeline][pipeline] and all resources will be created for you.\n\n```bash\n$ \u003e yarn cdk deploy cra-serverless-pipeline\n\nPipeline: deploying...\nPipeline: creating CloudFormation changeset...\n\n✅  Pipeline\n```\n\nHead over to the [AWS Management Console][console] and watch the beauty of a deploy pipeline and CloudFormation stacks. All resources will be created for you, and after a while a [CloudFront Distribution][cloudfront] is available for the included example application.\n\n## Further Reading\n\n- [**sbstjn.com**](https://sbstjn.com) for a detailed guide in English\n- [**superluminar.io**](https://superluminar.io) for a detailed guide in German\n\n## License\n\nFeel free to use the code, it's released using the [MIT license](LICENSE.md).\n\n## Contribution\n\nYou are welcome to contribute to this project! 😘\n\nTo make sure you have a pleasant experience, please read the [code of conduct](CODE_OF_CONDUCT.md). It outlines core values and beliefs and will make working together a happier experience.\n\n[cloudfront]: https://aws.amazon.com/cloudfront/\n[console]: https://aws.amazon.com/console/\n[sm]: https://aws.amazon.com/systems-manager/\n[token]: https://github.com/settings/tokens\n[cra-pipeline]: https://github.com/sbstjn/cra-pipeline\n[cra-serverless]: https://github.com/sbstjn/cra-serverless\n[lambda]: https://aws.amazon.com/lambda/\n[appsync]: https://aws.amazon.com/appsync/\n[apollo]: https://www.apollographql.com/docs/react/\n[sc]: https://styled-components.com\n[cra]: https://create-react-app.dev/\n[ssr]: https://reactjs.org/docs/react-dom-server.html\n[cdk]: https://docs.aws.amazon.com/cdk/latest/guide/home.html\n[koa]: https://koajs.com/\n[codebuild]: https://aws.amazon.com/codebuild/\n[pipeline]: https://aws.amazon.com/codepipeline/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbstjn%2Fcra-serverless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbstjn%2Fcra-serverless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbstjn%2Fcra-serverless/lists"}