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:

npm run sls:deploy

Running the demo

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.

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)

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 originally written by Pete Hunt.
• 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.