{"id":19691547,"url":"https://github.com/99x/serverless-react-boilerplate","last_synced_at":"2025-04-06T18:17:11.181Z","repository":{"id":42362193,"uuid":"63075997","full_name":"99x/serverless-react-boilerplate","owner":"99x","description":"A serverless react boilerplate for offline development","archived":false,"fork":false,"pushed_at":"2023-01-07T02:19:17.000Z","size":12843,"stargazers_count":261,"open_issues_count":44,"forks_count":75,"subscribers_count":10,"default_branch":"aws-react","last_synced_at":"2025-03-30T17:08:54.732Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/99x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-11T14:42:18.000Z","updated_at":"2024-11-22T02:01:31.000Z","dependencies_parsed_at":"2023-02-06T10:31:17.986Z","dependency_job_id":null,"html_url":"https://github.com/99x/serverless-react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Fserverless-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Fserverless-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Fserverless-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Fserverless-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/99x","download_url":"https://codeload.github.com/99x/serverless-react-boilerplate/tar.gz/refs/heads/aws-react","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526768,"owners_count":20953143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-11-11T19:09:45.640Z","updated_at":"2025-04-06T18:17:11.148Z","avatar_url":"https://github.com/99x.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"serverless-react-boilerplate\n============================\n\n[![serverless](http://public.serverless.com/badges/v3.svg)](http://www.serverless.com)\n[![license](https://img.shields.io/npm/l/serverless-dynamodb-local.svg)](https://opensource.org/licenses/MIT)\n[![Join the chat at https://gitter.im/99xt/serverless-react-boilerplate](https://badges.gitter.im/99xt/serverless-react-boilerplate.svg)](https://gitter.im/99xt/serverless-react-boilerplate?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Sample Todo App\n\u003cimg width=\"964\" alt=\"screen shot 2017-08-29 at 4 49 58 am\" src=\"https://user-images.githubusercontent.com/2338919/29805880-e14eb17c-8ca9-11e7-9b3d-a171238e880c.png\"\u003e\n\n## Requirements\n* Java Runtime Engine (JRE) version 6.x or newer to run dynamodb locally.\n\n## Features\n* Support serverless v1.26.0\n* Support offline development with dynamodb, lambda and API Gateway\n* Support local dynamodb seeds/migrations\n* Build automation in client and server to ease local development\n* Deploy to multiple API Services \n* Use of Environment variables \n* Lambda CRUD operations for a Todo application with live reload\n* React web application to utilize the API\n\n\n## How to develop and test offline?\nWe have used [serverless-offline plugin](https://github.com/dherault/serverless-offline) and [serverless-dynamodb-local plugin](https://github.com/99xt/serverless-dynamodb-local) 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.\n\n## Production vs Offline\nThanks to the offline plugin's environment variable `IS_OFFLINE` we can select between local dynamodb and aws dynamodb. \n```\nvar dynamodbOfflineOptions = {\n        region: \"localhost\",\n        endpoint: \"http://localhost:8000\"\n    },\n    isOffline = () =\u003e process.env.IS_OFFLINE;\n\nvar client = isOffline() ? new AWS.DynamoDB.DocumentClient(dynamodbOfflineOptions) :  new AWS.DynamoDB.DocumentClient();\n```\n\n### Directory structure\n```\n|──api\n|  |──todo\n|  |  |──lib\n|  |  |  |──todo.js\n|  |  |  |──helper.js\n|  |  |  |──response.js\n|  |  |──handler.js\n|  |  |──database\n|  |  |──dynamodb.js\n|  |  |──offline\n|  |  |  |──migrations\n|  |  |  |  |──todo.yml\n|  |  |  |  |──todo-seed.json\n|  |  |──config.yml\n|  |  |──serverless.yml\n|  |  |──package.json\n|──web\n|  |──src\n|  |  |──components\n|  |  |──index.js\n|  |──public\n|  |  |──index.html\n|  |──package.json\n|──gulpfile.js\n|──package.json\n\n\n```\n## Installation \u0026 Usage\n* Clone this repo.\n* Make sure AWS credentials are setup properly. Otherwise refer [this document](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html)\n```\n  aws configure --profile peter\n```\n* Add the aws cli profile name and region on to serverless.yml file located at **/api/todo/serverless.yml**\n```\n  ...\n  provider:\n  name: aws\n  runtime: nodejs6.10\n  profile: peter\n  stage: dev\n  region: eu-west-2\n  ...\n```\n\n* Install serverless globally\n```\n npm i -g serverless\n ```\n* Install project dependencies. `cd serverless-react-boilerplate` and type,\n```\n  npm install \n```\n* Install dynamodb local. (Make sure you have Java runtime 6.x or newer)\n```\n  npm run db-setup\n```\n* Run the app with the local server\n```\n  npm run app\n```\n* Browser will open the todo app at `http://localhost:3001`\n\n## Deploying to AWS\nWhen you are ready to deploy your database and api to AWS, you can create multiple \nAPIGateways for different service level stages. For example you can create \"dev\" and \"production\" stages.\nWhen you deploy to a specific stage, it will create a separate database tables for that stage.\n\nFollowing command will deploy your lambda functions and APIGateway onto 'prod' stage.\n```\ncd api\ncd todo\nserverless deploy --stage prod\n```\n\nIf 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\nfound in **web/src/App.js**. Change its value from **http://localhost:3000** to your **APIGateway uri**.\n\n## Application Secrets Keys\nYou can define application secret keys in **config.yml** file. For example if you need to have a database \nconnection string and use it in your lambda function, define it as follows.\n\n```\nprod:\n  DB_STRING: \u003cmy-db-connection-string\u003e\n```\n\nThen in the serverless.yml file, \n```\ncustom:\n  DB_STRING: ${file(./config.yml):${self:custom.stage}.DB_STRING}\n```\nThis will corretly select the DB_STRING corresponding to the defined stage.\n\nYou should **NOT** commit config.yml to your version control system \n\n## Deploying react web app\nOnce you have setup a S3 bucket with static web hosting enabled you can simply build your react app and deploy to that bucket.\nMake sure to change **BASE_URL** to refer your production APIGateway endpoint.\n\nOn 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.\n```\n  npm run deploy-s3\n```\n\nSee following vidoes for a step by step guide to create a s3 bucket and configure static web hosting.\n#### [Video 01 - Hosting a website on AWS with S3, CloudFront and Route53 ](https://youtu.be/D6qB7MEFOe0)\n#### [Video 02 - Hosting Angular, React and Vue.js applications on AWS](https://youtu.be/f20XOaQ3JDA)\n\n## Contribution\nYour contributions are much appriciated. \n\n## Release Log\n* Release v4.1.0 - Updated boilerplate to support Lambda Proxy\n* Release v4.0.0 - Added support for serverless@1.x \n* Release v3.0.0 - Added environment variables for database table names \u0026  Feature to deploy in multiple APIGateway service level stages.\n* Release v2.2.0 - Added foundation css framework for the react client\n* Release v2.1.1 - Improvements in react web app\n* Release v2.0.1 - Dynamodb local table creation bug fix\n* Release v2.0.0 - Added support for serverless v1.0 and Issues #24 #25\n* Release v1.0.3 - Fixed local dynamobd get packaged for deployment\n* Release v1.0.2 - Added support for serverless@1.0.0-rc.2\n\n## Links\n* [serverless-dynamodb-local plugin](https://github.com/99xt/serverless-dynamodb-local)\n* [serverless-offline plugin](https://github.com/dherault/serverless-offline)\n\n\n## License\n  [MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99x%2Fserverless-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F99x%2Fserverless-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99x%2Fserverless-react-boilerplate/lists"}