search

99x / serverless-react-boilerplate

A serverless react boilerplate for offline development
MIT License
260 stars 75 forks source link
hacktoberfest

readme

serverless-react-boilerplate

serverless license Join the chat at https://gitter.im/99xt/serverless-react-boilerplate

Sample Todo App

screen shot 2017-08-29 at 4 49 58 am

Requirements

Features

How to develop and test offline?

We have used serverless-offline plugin and serverless-dynamodb-local plugin in this boilerplate. You can declare your table templates and seeds in api/todo/offline/migrations/ folder just like the todo.json template. When you spin up the offline server, these tables will be used as the datasources for your lambda functions.

Production vs Offline

Thanks to the offline plugin's environment variable IS_OFFLINE we can select between local dynamodb and aws dynamodb. 

var dynamodbOfflineOptions = {
        region: "localhost",
        endpoint: "http://localhost:8000"
    },
    isOffline = () => process.env.IS_OFFLINE;

var client = isOffline() ? new AWS.DynamoDB.DocumentClient(dynamodbOfflineOptions) :  new AWS.DynamoDB.DocumentClient();

Directory structure

|──api
|  |──todo
|  |  |──lib
|  |  |  |──todo.js
|  |  |  |──helper.js
|  |  |  |──response.js
|  |  |──handler.js
|  |  |──database
|  |  |──dynamodb.js
|  |  |──offline
|  |  |  |──migrations
|  |  |  |  |──todo.yml
|  |  |  |  |──todo-seed.json
|  |  |──config.yml
|  |  |──serverless.yml
|  |  |──package.json
|──web
|  |──src
|  |  |──components
|  |  |──index.js
|  |──public
|  |  |──index.html
|  |──package.json
|──gulpfile.js
|──package.json

Installation & Usage

Deploying to AWS

When you are ready to deploy your database and api to AWS, you can create multiple APIGateways for different service level stages. For example you can create "dev" and "production" stages. When you deploy to a specific stage, it will create a separate database tables for that stage.

Following command will deploy your lambda functions and APIGateway onto 'prod' stage.

cd api
cd todo
serverless deploy --stage prod

If you want to test your React app with the online API and Database, you may have to change the, BASE_URL of the react app found in web/src/App.js. Change its value from http://localhost:3000 to your APIGateway uri.

Application Secrets Keys

You can define application secret keys in config.yml file. For example if you need to have a database connection string and use it in your lambda function, define it as follows.

prod:
  DB_STRING: <my-db-connection-string>

Then in the serverless.yml file, 

custom:
  DB_STRING: ${file(./config.yml):${self:custom.stage}.DB_STRING}

This will corretly select the DB_STRING corresponding to the defined stage.

You should NOT commit config.yml to your version control system

Deploying react web app

Once you have setup a S3 bucket with static web hosting enabled you can simply build your react app and deploy to that bucket. Make sure to change BASE_URL to refer your production APIGateway endpoint.

On the root level package.json file add that bucket name and your AWS profile name on the deploy-s3 task. After that run the following command.

  npm run deploy-s3

See following vidoes for a step by step guide to create a s3 bucket and configure static web hosting.

Video 01 - Hosting a website on AWS with S3, CloudFront and Route53

Video 02 - Hosting Angular, React and Vue.js applications on AWS

Contribution

Your contributions are much appriciated.

Release Log

Links

License

MIT