https://github.com/huksley/todo-react-ssr-serverless
Todo app example with ReactJS + Server Side Rendering + Serverless
https://github.com/huksley/todo-react-ssr-serverless
aws aws-lambda dynamodb reactjs serverless ssr webpack
Last synced: 8 months ago
JSON representation
Todo app example with ReactJS + Server Side Rendering + Serverless
- Host: GitHub
- URL: https://github.com/huksley/todo-react-ssr-serverless
- Owner: huksley
- Created: 2018-09-08T18:44:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-21T09:44:32.000Z (about 7 years ago)
- Last Synced: 2025-04-10T12:50:07.034Z (about 1 year ago)
- Topics: aws, aws-lambda, dynamodb, reactjs, serverless, ssr, webpack
- Language: JavaScript
- Homepage: https://todo.ruslan.org
- Size: 282 KB
- Stars: 11
- Watchers: 2
- Forks: 31
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Code Splitting + SSR + Serverless + DynamoDB with React Router demo
Forked from https://github.com/gdborton/rrv4-ssr-and-code-splitting.
This is a demo repository set up to demo code splitting by route on React Router
with server rendered React components.
After you fetch server rendered HTML routes start fire __locally__.
## Preparing for demo
Before running the demo, you must install a number of components
* AWS cli & proper credentials
* servlerless (`npm install -g serverless`)
Also, either create DynamoDB table manually or execute first time deploy:
```bash
npm run sls:deploy
```
## Running the demo
```bash
git clone https://github.com/huksley/todo-react-ssr-serverless
cd todo-react-ssr-serverless
npm install
npm run build
AWS_REGION=eu-west-1 npm start
open http://localhost:3000
```
## Running in serverless local
Runs `serverless offline` with webpack support.
```bash
npm run sls
```
## Running in AWS
Creates DynamoDB table, IAM role, deploys Lambda and sets up API Gateway. If custom domain specified, deploys app under this custom domain (first deploy might take some time)
```bash
npm run sls:deploy
```
For proper paths, you __MUST__ define custom domain.
* Create/transfer yourdomain.com in/to Route53
* Verify yourdomain.com ownership
* Create *.yourdomain.com certificate request in CloudFront Global (N. Virginia)
* Wait for it verification
Run once to deploy domain:
```
CUSTOM_DOMAIN=todo.domain.com CUSTOM_DOMAIN_ENABLED=true API_URL=https://todo.yourdomain.com/api npm run sls create_domain
```
To properly serve assets you can use bucket for static files (created automatically by serverless)
```
PUBLIC_PATH=https://s3-eu-west-1.amazonaws.com/todocdn.yourdomain.com/ \
CDN_BUCKET=todocdn.yourdomain.com \
CUSTOM_DOMAIN=todo.yourdomain.com \
CUSTOM_DOMAIN_ENABLED=true \
API_URL=https://todo.yourdomain.com/api \
npm run sls:deploy
```
## Isomorphic!
Thanks to matchRoutes/renderRoutes from `react-router-config` after HTML is received, route state are restored and
all links start to work client side.
FIXME: This isomorphic/universal stuff should be updated according to recent improvements in react-router.
## Things of note:
- The contents of this repo were based on the [TodoMVC code](https://github.com/tastejs/todomvc/tree/master/examples/react) originally written by [Pete Hunt](https://github.com/petehunt).
- Upgraded to webpack v4 comparing to upstream repo
- We have 3 webpack configs:
- One for server
- Another for client
- Third one (./webpack.serverless.js) for running in serverless
- The server starts with empty data. Run `curl -X POST http://localhost:3000/api/init` to load initial data.