Skip to content

Commit 245cf6a

Browse files
author
Ruslan Gainutdinov
committed
Storing todos in DynamoDB. Added spinner. Improved documentation.
1 parent 09f49f7 commit 245cf6a

File tree

10 files changed

+536
-135
lines changed

10 files changed

+536
-135
lines changed

‎README.md‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Code Splitting + SSR with React Router demo
1+
# Code Splitting + SSR + Serverless + DynamoDB with React Router demo
22

33
Forked from https://github.com/gdborton/rrv4-ssr-and-code-splitting.
44

@@ -7,30 +7,55 @@ with server rendered React components.
77

88
After you fetch server rendered HTML routes start fire __locally__.
99

10-
## Running the demo:
10+
## Preparing for demo
1111

12+
Before running the demo, you must install a number of components
13+
14+
* AWS cli & proper credentials
15+
* servlerless (`npm install -g serverless`)
16+
17+
Also, either create DynamoDB table manually or execute first time deploy:
18+
19+
```bash
20+
npm run sls:deploy
1221
```
22+
23+
## Running the demo
24+
25+
```bash
1326
git clone https://github.com/huksley/todo-react-ssr-serverless
1427
cd todo-react-ssr-serverless
1528
npm install
16-
npm start
29+
npm run build
30+
AWS_REGION=eu-west-1 npm start
1731
open http://localhost:3000
1832
```
1933

2034
## Running in serverless local
2135

2236
Runs `serverless offline` with webpack support.
2337

24-
```
38+
```bash
2539
npm run sls
2640
```
2741

2842
## Running in AWS
2943

44+
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)
45+
46+
```bash
47+
npm run sls:deploy
48+
```
49+
3050
For proper paths, you __MUST__ define custom domain.
3151

52+
* Create/transfer domain in/to Route53
53+
* Verify domain ownership
54+
* Create *.domain certificate request in CloudFront Global (N. Virginia)
55+
* Wait for it verifaction
56+
3257
```
33-
npm run sls:deploy
58+
CUSTOM_DOMAIN=todo.domain.com CUSTOM_DOMAIN_ENABLED=yes API_URL=https://todo.domain.com/api npm run sls:deploy
3459
```
3560

3661
## Isomorphic!
@@ -48,4 +73,4 @@ all links start to work client side.
4873
- One for server
4974
- Another for client
5075
- Third one (./webpack.serverless.js) for running in serverless
51-
- The server, starts with some static data, **and is never updated**, you'll lose your changes if you reload the page.
76+
- The server starts with empty data. Run `curl -X POST http://localhost:3000/api/init` to load initial data.

‎css/README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
The files in this directory are taken verbatim from TodoMVC project
1+
The following files in this directory are taken verbatim from TodoMVC project:
2+
3+
- base.css
4+
- index.css
25

36
https://github.com/tastejs/todomvc
7+
8+
Following files are taken from http://tobiasahlin.com/spinkit/
9+
10+
- spinner.css

‎css/spinner.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.spinner {
2+
width: 30px;
3+
height: 30px;
4+
background-color: red;
5+
6+
margin: 100px auto;
7+
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
8+
animation: sk-rotateplane 1.2s infinite ease-in-out;
9+
}
10+
11+
@-webkit-keyframes sk-rotateplane {
12+
0% { -webkit-transform: perspective(120px) }
13+
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
14+
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
15+
}
16+
17+
@keyframes sk-rotateplane {
18+
0% {
19+
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
20+
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
21+
} 50% {
22+
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
23+
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
24+
} 100% {
25+
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
26+
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
27+
}
28+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
77
<link rel="stylesheet" href="css/base.css">
88
<link rel="stylesheet" href="css/index.css">
9+
<link rel="stylesheet" href="css/spinner.css">
910
</head>
1011
<body>
1112
<script id="props" data-props='{{props}}'></script>

0 commit comments

Comments
 (0)