Skip to content

Commit ebe77c8

Browse files
committed
Added README
1 parent 893c8d0 commit ebe77c8

File tree

2 files changed

+61
-1
lines changed

2 files changed

+61
-1
lines changed

README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# react-apig-lambda
2+
3+
> Render React.js on-demand with CDN caching.
4+
5+
> Minimal example on how to render React & React Router v4 with Amazon API Gateway, AWS Lambda and CloudFront.
6+
7+
## Online demo
8+
[https://test.es6.fi](https://test.es6.fi)
9+
10+
Basic example app from [React Router documentation](https://react-router.now.sh/basic). Initial server-side render and acts as SPA from there.
11+
12+
## Dependencies
13+
14+
* [AWS CLI](https://aws.amazon.com/cli/) for S3 deployment
15+
* [Apex](https://github.com/apex/apex) for Lambda deployment
16+
17+
## Deploying to AWS
18+
19+
1) Edit `project.json` and set proper lamdba execution `role`.
20+
21+
2) Replace `s3://test.es6.fi/assets/` in `package.json` with your S3 bucket, e.g. `s3://your-bucket/assets/`.
22+
23+
3) `npm run build` to build front-end code
24+
25+
4) `npm run deploy` to deploy lambda and upload front build to S3
26+
27+
## Setting up API Gateway
28+
29+
1) In API Gateway home, click `Create API`
30+
31+
2) Choose `New API` and enter some `API name`, click `Create API`.
32+
33+
2) Choose `Actions -> Create resource`
34+
35+
3) Check `Configure as proxy resource` and click `Create resource`
36+
37+
4) In `/{proxy+} - ANY - Setup`, choose `Integration type` as `Lambda Function Proxy`, select your lambda's AWS region and enter name of your uploaded lambda function (`react-apig-lambda_render-react` if you didn't change name in `project.json`). Click `Save`.
38+
39+
5) Choose `Actions -> Deploy API`, set `Deployment stage` as `[New Stage]`, enter stage name and click `Deploy`
40+
41+
6) Now you should be able to invoke the lambda renderer by navigating to `https://your-invoke-url/your-stage-name/index`
42+
43+
## Setting up CloudFront
44+
45+
1) Create distribution, paste your API Gateway url as `Origin domain name`, e.g. `https://your-invoke-url/your-stage-name/index`. Make sure to include `/index`.
46+
47+
2) Set your custom domain in `Alternate Domain Names
48+
(CNAMEs)`
49+
50+
3) You can leave other settings as they are if you don't want to customize anything, click `Create distribution`.
51+
52+
4) Go to your distribution, navigate to `Origins`, click `Create origin`
53+
54+
5) Choose your S3 bucket (you should create it now if you haven't already. Make sure there's `assets` directory). Click `Create`.
55+
56+
6) Go to your distribution, navigate to `Behaviors`, click `Create Behavior`.
57+
58+
7) Set `Path Pattern` as `assets/*`, choose your S3 origin and click `Create`.
59+
60+
8) In your domain's DNS management interface, point your domain's `CNAME` to your CloudFront distribution.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"deploy:s3": "aws s3 cp ./dist/ s3://test.es6.fi/assets/ --recursive",
1010
"deploy": "npm run deploy:lambda && npm run deploy:s3"
1111
},
12-
"author": "",
12+
"author": "Lari Hoppula",
1313
"license": "MIT",
1414
"devDependencies": {
1515
"babel-core": "^6.14.0",

0 commit comments

Comments
 (0)