GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hoppula → React Apig Lambda

hoppula / React Apig Lambda

Render React.js on-demand with CDN caching

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactaws-lambdaapi-gatewaycdns3-bucketcloudfront

Projects that are alternatives of or similar to React Apig Lambda

Serverless Sharp
Serverless image optimizer for S3, Lambda, and Cloudfront
Stars: ✭ 102 (+9.68%)
Mutual labels:  api-gateway, aws-lambda, s3-bucket, cloudfront
Serverless Next.js
⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
Stars: ✭ 2,977 (+3101.08%)
Mutual labels:  api-gateway, aws-lambda, cloudfront
Vandium Node
AWS Lambda framework for building functions using Node.js for API Gateway, IoT applications, and other AWS events.
Stars: ✭ 377 (+305.38%)
Mutual labels:  api-gateway, aws-lambda
Serverless Express
Run Node.js web applications and APIs using existing application frameworks on AWS #serverless technologies such as Lambda, API Gateway, Lambda@Edge, and ALB.
Stars: ✭ 4,265 (+4486.02%)
Mutual labels:  api-gateway, aws-lambda
Workshop Donkeytracker
Workshop to build a serverless tracking application for your mobile device with an AWS backend
Stars: ✭ 27 (-70.97%)
Mutual labels:  api-gateway, cloudfront
Aws Cognito Apigw Angular Auth
A simple/sample AngularV4-based web app that demonstrates different API authentication options using Amazon Cognito and API Gateway with an AWS Lambda and Amazon DynamoDB backend that stores user details in a complete end to end Serverless fashion.
Stars: ✭ 278 (+198.92%)
Mutual labels:  api-gateway, aws-lambda
This Repo Has 350 Stars
Yes, it's true 💕 This repository has 350 stars.
Stars: ✭ 350 (+276.34%)
Mutual labels:  api-gateway, aws-lambda
Lambda Api
Lightweight web framework for your serverless applications
Stars: ✭ 929 (+898.92%)
Mutual labels:  api-gateway, aws-lambda
simply-static-deploy
WordPress plugin to deploy static sites easily to an AWS S3 bucket.
Stars: ✭ 48 (-48.39%)
Mutual labels:  s3-bucket, cloudfront
Serverless Es Logs
A Serverless plugin to transport logs to ElasticSearch
Stars: ✭ 51 (-45.16%)
Mutual labels:  api-gateway, aws-lambda
Aws Serverless Java Container
A Java wrapper to run Spring, Jersey, Spark, and other apps inside AWS Lambda.
Stars: ✭ 1,054 (+1033.33%)
Mutual labels:  api-gateway, aws-lambda
Aws Power Tuner Ui
AWS Lambda Power Tuner UI is an open source project creating a deployable easy to use website built on a layered technology stack allowing you to optimize your Lambda functions for cost and/or performance in a data-driven way via an easy to use UI.
Stars: ✭ 52 (-44.09%)
Mutual labels:  api-gateway, aws-lambda
Aegis
Serverless Golang deploy tool and framework for AWS Lambda
Stars: ✭ 277 (+197.85%)
Mutual labels:  api-gateway, aws-lambda
Zappa
Serverless Python
Stars: ✭ 224 (+140.86%)
Mutual labels:  api-gateway, aws-lambda
Claudia
Deploy Node.js projects to AWS Lambda and API Gateway easily
Stars: ✭ 3,690 (+3867.74%)
Mutual labels:  api-gateway, aws-lambda
hyperform
⚡ Lightweight serverless framework for NodeJS
Stars: ✭ 156 (+67.74%)
Mutual labels:  aws-lambda, api-gateway
Mangum
AWS Lambda & API Gateway support for ASGI
Stars: ✭ 475 (+410.75%)
Mutual labels:  api-gateway, aws-lambda
Scandium
🚀 Easily deploy any Node.js web server to AWS Lambda
Stars: ✭ 61 (-34.41%)
Mutual labels:  api-gateway, aws-lambda
aws-lambda-edge-basic-auth-terraform
A Terraform module that creates AWS Lambda@Edge resources to protect CloudFront distributions with Basic Authentication.
Stars: ✭ 18 (-80.65%)
Mutual labels:  aws-lambda, cloudfront
Helios
An open source and easy-to-use monitoring tool for your AWS serverless applications.
Stars: ✭ 51 (-45.16%)
Mutual labels:  aws-lambda, api-gateway
View All Similar Projects ➔

react-apig-lambda

Render React.js on-demand with CDN caching.

Minimal example on how to render React & React Router v4 with Amazon API Gateway, AWS Lambda and CloudFront.

Online demo

https://test.es6.fi

Basic example app from React Router documentation. Initial server-side render and acts as SPA from there.

Dependencies

Deploying to AWS

  1. Edit project.json and set proper lamdba execution role.

  2. Replace s3://test.es6.fi/assets/ in package.json with your S3 bucket, e.g. s3://your-bucket/assets/.

  3. npm run build to build front-end code

  4. npm run deploy to deploy lambda and upload front build to S3

Setting up API Gateway

  1. In API Gateway home, click Create API

  2. Choose New API and enter some API name, click Create API.

  3. Choose Actions -> Create resource

  4. Check Configure as proxy resource and click Create resource

  5. 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.

  6. Choose Actions -> Deploy API, set Deployment stage as [New Stage], enter stage name and click Deploy

  7. Now you should be able to invoke the lambda renderer by navigating to https://your-invoke-url/your-stage-name/index

Setting up CloudFront

  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.

  2. Set your custom domain in Alternate Domain Names (CNAMEs)

  3. You can leave other settings as they are if you don't want to customize anything, click Create distribution.

  4. Go to your distribution, navigate to Origins, click Create origin

  5. Choose your S3 bucket (you should create it now if you haven't already. Make sure there's assets directory). Click Create.

  6. Go to your distribution, navigate to Behaviors, click Create Behavior.

  7. Set Path Pattern as assets/*, choose your S3 origin and click Create.

  8. In your domain's DNS management interface, point your domain's CNAME to your CloudFront distribution.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].