diff --git a/.babelrc b/.babelrc
index 892af96..da5566f 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,10 @@
{
- "presets": [["airbnb", { "modules": false }]],
- "plugins": ["syntax-dynamic-import"]
-}
+ "sourceMaps": "both",
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ],
+ "plugins": [
+ "@babel/plugin-syntax-dynamic-import"
+ ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index b947077..592a3b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
node_modules/
dist/
+.webpack
+.serverless
diff --git a/README.md b/README.md
index 380bc89..fa77b9c 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,76 @@
-# Code Splitting + SSR with RRv4 demo
+# Code Splitting + SSR + Serverless + DynamoDB with React Router demo
-This is a demo repository set up to demo code splitting by route on React Router v4 with server rendered React components.
+Forked from https://github.com/gdborton/rrv4-ssr-and-code-splitting.
-Running the demo:
+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
```
-git clone git@github.com:gdborton/rrv4-ssr-and-code-splitting.git
-cd rrv4-ssr-and-code-splitting/
+
+## Running the demo
+
+```bash
+git clone https://github.com/huksley/todo-react-ssr-serverless
+cd todo-react-ssr-serverless
npm install
-npm start
+npm run build
+AWS_REGION=eu-west-1 npm start
open http://localhost:3000
```
-## What's async loaded?
+## Running in serverless local
+
+Runs `serverless offline` with webpack support.
-The list of todos that exists between the input bar and the footer of stack of todos. If you open your network tab before navigating between All/Active/Completed, you'll notice requests for `0.index.bundle.js`, `1.index.bundle.js`, and `2.index.bundle.js` respectively.
+```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 domain in/to Route53
+ * Verify domain ownership
+ * Create *.domain certificate request in CloudFront Global (N. Virginia)
+ * Wait for it verifaction
+
+```
+CUSTOM_DOMAIN=todo.domain.com CUSTOM_DOMAIN_ENABLED=yes API_URL=https://todo.domain.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.
+
+
## 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).
- - We're using babel-eslint to enable `import()`.
- - We're using the Airbnb dynamic import plugins, webpack's `import()` creates references to `window` that don't work in node:
- - [babel-plugin-dynamic-import-webpack](https://github.com/airbnb/babel-plugin-dynamic-import-webpack) for client side code.
- - [babel-plugin-dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node) for server side code.
- - We have two webpack configs:
- - One for server (`libraryTarget = commonjs2` and `babel-plugin-dynamic-import-node`).
- - Another for client (`babel-plugin-dynamic-import-webpack`).
- - The server, starts with some static data, **and is never updated**, you'll lose your changes if you reload the page.
+ - 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.
diff --git a/async-highlight.png b/async-highlight.png
deleted file mode 100644
index da6848d..0000000
Binary files a/async-highlight.png and /dev/null differ
diff --git a/css/README.md b/css/README.md
new file mode 100644
index 0000000..144cfa9
--- /dev/null
+++ b/css/README.md
@@ -0,0 +1,10 @@
+The following files in this directory are taken verbatim from TodoMVC project:
+
+ - base.css
+ - index.css
+
+https://github.com/tastejs/todomvc
+
+Following files are taken from http://tobiasahlin.com/spinkit/
+
+ - spinner.css
diff --git a/css/spinner.css b/css/spinner.css
new file mode 100644
index 0000000..350d9eb
--- /dev/null
+++ b/css/spinner.css
@@ -0,0 +1,28 @@
+.spinner {
+ width: 30px;
+ height: 30px;
+ background-color: red;
+
+ margin: 100px auto;
+ -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+ animation: sk-rotateplane 1.2s infinite ease-in-out;
+ }
+
+ @-webkit-keyframes sk-rotateplane {
+ 0% { -webkit-transform: perspective(120px) }
+ 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+ 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
+ }
+
+ @keyframes sk-rotateplane {
+ 0% {
+ transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+ } 50% {
+ transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+ } 100% {
+ transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+ -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+ }
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index ba3eb5f..e02f41c 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,11 @@
React • TodoMVC
+
+
+
@@ -12,8 +15,10 @@
+ Fork me on GitHub