forked from lambstatus/lambstatus.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpath---set-up-the-development-environment-2c29e288fa15f32cdfe3.js.map
1 lines (1 loc) · 29.8 KB
/
path---set-up-the-development-environment-2c29e288fa15f32cdfe3.js.map
1
{"version":3,"sources":["webpack:///path---set-up-the-development-environment-2c29e288fa15f32cdfe3.js","webpack:///./.cache/json/set-up-the-development-environment.json"],"names":["webpackJsonp","1041","module","exports","data","allPostTitles","edges","node","frontmatter","title","group","type","fields","slug","postBySlug","html","timeToRead","excerpt","pathContext"],"mappings":"AAAAA,cAAc,iBAERC,KACA,SAAUC,EAAQC,GCHxBD,EAAAC,SAAkBC,MAAQC,eAAiBC,QAAUC,MAAQC,aAAeC,MAAA,eAAAC,MAAA,YAAAC,KAAA,OAAwDC,QAAWC,KAAA,oBAA2BN,MAAQC,aAAeC,MAAA,0BAAAC,MAAA,iBAAAC,KAAA,OAAwEC,QAAWC,KAAA,+BAAsCN,MAAQC,aAAeC,MAAA,cAAAC,MAAA,cAAAC,KAAA,OAAyDC,QAAWC,KAAA,mBAA0BN,MAAQC,aAAeC,MAAA,uBAAAC,MAAA,iBAAAC,KAAA,OAAqEC,QAAWC,KAAA,4BAAmCN,MAAQC,aAAeC,MAAA,gBAAAC,MAAA,YAAAC,KAAA,OAAyDC,QAAWC,KAAA,qBAA4BN,MAAQC,aAAeC,MAAA,mCAAAC,MAAA,iBAAAC,KAAA,OAAiFC,QAAWC,KAAA,uCAA8CN,MAAQC,aAAeC,MAAA,qCAAAC,MAAA,YAAAC,KAAA,OAA8EC,QAAWC,KAAA,0CAAiDN,MAAQC,aAAeC,MAAA,0CAAAC,MAAA,iBAAAC,KAAA,OAAwFC,QAAWC,KAAA,+CAAsDN,MAAQC,aAAeC,MAAA,wBAAAC,MAAA,cAAAC,KAAA,OAAmEC,QAAWC,KAAA,6BAAoCN,MAAQC,aAAeC,MAAA,uBAAAC,MAAA,cAAAC,KAAA,OAAkEC,QAAWC,KAAA,6BAAoCN,MAAQC,aAAeC,MAAA,4BAAAC,MAAA,iBAAAC,KAAA,OAA0EC,QAAWC,KAAA,kCAAwCC,YAAeC,KAAA,61VAA0qQC,WAAA,EAAAC,QAAA,8IAAAT,aAAsjGC,MAAA,sCAA6CG,QAAWC,KAAA,yCAA+CK,aAAgBL,KAAA","file":"path---set-up-the-development-environment-2c29e288fa15f32cdfe3.js","sourcesContent":["webpackJsonp([223490184532182],{\n\n/***/ 1041:\n/***/ (function(module, exports) {\n\n\tmodule.exports = {\"data\":{\"allPostTitles\":{\"edges\":[{\"node\":{\"frontmatter\":{\"title\":\"Contributing\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/contributing\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Create a New Admin User\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/create-a-new-admin-user\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Get Started\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/get-started\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Custom Domain\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-custom-domain\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Cost Estimate\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/cost-estimate\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Custom HTTP(S) Monitoring\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-custom-http-s-monitoring\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up the development environment\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-the-development-environment\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Integrate with Other Monitoring Systems\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/integrate-with-other-monitoring-systems\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Supported AWS Regions\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/supported-aws-regions\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Upgrading LambStatus\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/upgrading-lamb-status\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Email Notification\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-email-notification\"}}}]},\"postBySlug\":{\"html\":\"<p>This page describes how to set up the development environment. Also, the project structure is explained as it is helpful to understand the codebase.</p>\\n<ul>\\n<li><a href=\\\"#set-up\\\">Set up the development environment</a></li>\\n<li><a href=\\\"#project-structure\\\">Project structure</a></li>\\n</ul>\\n<p><strong>If you have any question, feel free to open <a href=\\\"https://github.com/ks888/LambStatus/issues/new\\\">a new issue</a> or ask at <a href=\\\"https://gitter.im/ks888/LambStatus\\\">the chat room</a>.</strong></p>\\n<h3 id=\\\"set-up\\\"><a href=\\\"#set-up\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Set up</h3>\\n<h4 id=\\\"prerequisite\\\"><a href=\\\"#prerequisite\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Prerequisite</h4>\\n<ul>\\n<li>Node.js (v10.16.3)</li>\\n<li>AWS CLI</li>\\n</ul>\\n<h4 id=\\\"create-a-cloudformation-stack\\\"><a href=\\\"#create-a-cloudformation-stack\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Create a CloudFormation stack</h4>\\n<ol>\\n<li>Clone the repository and go to the cloned directory</li>\\n</ol>\\n<p><code>git clone https://github.com/ks888/LambStatus && cd LambStatus</code></p>\\n<ol start=\\\"2\\\">\\n<li>Install all dependencies</li>\\n</ol>\\n<p><code>npm run install</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Add a '.env' file at the root of this repo based on <code>.env-example</code>. At least, you need to write your email address to the 'USER_EMAIL' line because the initial login information will be sent to the address.</p>\\n</li>\\n<li>\\n<p>Launch CloudFormation stack</p>\\n</li>\\n</ol>\\n<p><code>npm run cloudformation:create</code></p>\\n<p>If the command returns an error, make sure you properly configured <a href=\\\"http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html#cli-quick-configuration\\\">the AWS credentials</a>.</p>\\n<ol start=\\\"5\\\">\\n<li>Now the process to create the stack is ongoing. When the stack is created, the email will be sent to the email address.</li>\\n</ol>\\n<h4 id=\\\"change-aws-resources-created-by-cloudformation\\\"><a href=\\\"#change-aws-resources-created-by-cloudformation\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change AWS resources created by CloudFormation</h4>\\n<ol>\\n<li>\\n<p>Make your change.</p>\\n</li>\\n<li>\\n<p>Update the CloudFormation stack</p>\\n</li>\\n</ol>\\n<p><code>npm run cloudformation:update</code></p>\\n<h4 id=\\\"change-server-side-code\\\"><a href=\\\"#change-server-side-code\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change server-side code</h4>\\n<ol>\\n<li>Go to the 'lambda' directory</li>\\n</ol>\\n<p><code>cd packages/lambda</code></p>\\n<ol start=\\\"2\\\">\\n<li>Make sure the tests pass</li>\\n</ol>\\n<p><code>npm run test</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Make your change. Add tests for your change. Make the tests pass</p>\\n</li>\\n<li>\\n<p>(If necessary, deploy your functions)</p>\\n</li>\\n</ol>\\n<p><code>npm run deploy</code></p>\\n<p>Note: LambStatus depends on <a href=\\\"http://apex.run/\\\">apex</a> to deploy lambda functions. <a href=\\\"http://apex.run/#installation\\\">Please install it</a> if the <code>apex</code> command is not found.</p>\\n<h4 id=\\\"change-client-side-code\\\"><a href=\\\"#change-client-side-code\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change client-side code</h4>\\n<ol>\\n<li>Go to the 'frontend' directory</li>\\n</ol>\\n<p><code>cd packages/frontend</code></p>\\n<ol start=\\\"2\\\">\\n<li>Make sure the tests pass</li>\\n</ol>\\n<p><code>npm run test</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Make your change. Add tests for your change. Make the tests pass</p>\\n</li>\\n<li>\\n<p>Run the local server</p>\\n</li>\\n</ol>\\n<p><code>npm run start # Run the admin page server at localhost:3000</code></p>\\n<p><code>npm run start:status # Run the status page server at localhost:3002</code></p>\\n<h3 id=\\\"project-structure\\\"><a href=\\\"#project-structure\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Project Structure</h3>\\n<p>\\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 790px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 59.31919642857143%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsSAAALEgHS3X78AAABXElEQVQoz4WSy05CMRCGz/vKzq0bEx/BhQt9CZe4MNHERAIRUDBcggZEQAXOtZ1Ob/7nIOqCy6zaznz9+08n8DvDWGuMcW5zNtiGOee01qy1oowpYeO0sfvhHDOW89DMFuLeL2v1+vVdbZXdDOPYFJhSkrW3OvU0eaje9jrNXq/faDStc3jLL/8HW8OaYhjMJdM3kS5mH1Pv9cnx0cX5We7faP4JbQoLwdqeYZYyHj/dVKN5aJ2lbFkqHZTLVyhQilGl1iTEiUgSBeiKUvk5eEkcfi2xVJSCeR+PR8MhFlEctl9mqECQUkJKIJAMYAModkhkWXZfqQhssrkIR4/P/dnnAsKdwevh6SUKJEkpqWjhP8/wAHki1Wq1oygGj4u6/cFkOiXFaSaSJAEHfvNXFa3GPLjCAkwYNMNai3fC3iq1559RDRZPKD6MhRDojdsyYsG28VJFYyC4Y3i/AXUct2UlIlzgAAAAAElFTkSuQmCC'); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"Architecture\\\"\\n title=\\\"\\\"\\n src=\\\"/static/Architecture-4768433e49daeb4603018da2afa2f461-ffc88.png\\\"\\n srcset=\\\"/static/Architecture-4768433e49daeb4603018da2afa2f461-d16f8.png 198w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-f21b1.png 395w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-ffc88.png 790w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-81e7e.png 1185w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-7cfeb.png 1580w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-4e638.png 1792w\\\"\\n sizes=\\\"(max-width: 790px) 100vw, 790px\\\"\\n />\\n </span>\\n </span>\\n </p>\\n<p>These 3 directories under the repository are especially important for this system:</p>\\n<ul>\\n<li><code>./cloudformation</code>: the CloudFormation template. It describes all the AWS resources including Lambda, API Gateway, DynamoDB, etc.</li>\\n<li><code>./packages/lambda</code>: server-side code. All the server-side code runs as the Lambda Functions.</li>\\n<li><code>./packages/frontend</code>: client-side code. These are deployed to the S3 and served via CloudFront.</li>\\n</ul>\\n<p>Here is the contents of each directory:</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-none\\\"><code>.\\n├── cloudformation\\n| ├── bin --- the scripts to create the CloudFormation stack\\n| └── lamb-status.yml --- the CloudFormation template file\\n└── packages\\n ├── lambda\\n | ├── bin --- the scripts to build and deploy the lambda functions\\n | ├── config --- the webpack config file to build the codes\\n | ├── src\\n | | ├── api --- the entrypoints of Lambda functions. Handles the event from the API Gateway\\n | | ├── aws --- the classes to access AWS resources\\n | | ├── db --- the classes to access the database\\n | | ├── model --- the models\\n | | └── utils --- the utilities\\n | ├── test --- tests. Same structure as ./src\\n | └── package.json --- package.json file for lambda functions\\n └── frontend\\n ├── bin --- the scripts to build and deploy the frontend\\n ├── build --- the webpack config file to build the codes\\n ├── config --- the environment-dependent config files\\n ├── src\\n | ├── actions --- Redux actions\\n | ├── components --- React components\\n | ├── reducers --- Redux reducers\\n | ├── utils --- the utilities\\n | ├── admin-page.js --- the entrypoint of the admin page\\n | └── status-page.js --- the entrypoint of the status page\\n ├── test --- tests. Same structure as ./src\\n └── package.json --- package.json file for frontend</code></pre>\\n </div>\",\"timeToRead\":3,\"excerpt\":\"This page describes how to set up the development environment. Also, the project structure is explained as it is helpful to understand the…\",\"frontmatter\":{\"title\":\"Set up the development environment\"},\"fields\":{\"slug\":\"/set-up-the-development-environment\"}}},\"pathContext\":{\"slug\":\"/set-up-the-development-environment\"}}\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// path---set-up-the-development-environment-2c29e288fa15f32cdfe3.js","module.exports = {\"data\":{\"allPostTitles\":{\"edges\":[{\"node\":{\"frontmatter\":{\"title\":\"Contributing\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/contributing\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Create a New Admin User\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/create-a-new-admin-user\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Get Started\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/get-started\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Custom Domain\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-custom-domain\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Cost Estimate\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/cost-estimate\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Custom HTTP(S) Monitoring\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-custom-http-s-monitoring\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up the development environment\",\"group\":\"Internals\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-the-development-environment\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Integrate with Other Monitoring Systems\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/integrate-with-other-monitoring-systems\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Supported AWS Regions\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/supported-aws-regions\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Upgrading LambStatus\",\"group\":\"Basic Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/upgrading-lamb-status\"}}},{\"node\":{\"frontmatter\":{\"title\":\"Set up Email Notification\",\"group\":\"Advanced Usage\",\"type\":\"doc\"},\"fields\":{\"slug\":\"/set-up-email-notification\"}}}]},\"postBySlug\":{\"html\":\"<p>This page describes how to set up the development environment. Also, the project structure is explained as it is helpful to understand the codebase.</p>\\n<ul>\\n<li><a href=\\\"#set-up\\\">Set up the development environment</a></li>\\n<li><a href=\\\"#project-structure\\\">Project structure</a></li>\\n</ul>\\n<p><strong>If you have any question, feel free to open <a href=\\\"https://github.com/ks888/LambStatus/issues/new\\\">a new issue</a> or ask at <a href=\\\"https://gitter.im/ks888/LambStatus\\\">the chat room</a>.</strong></p>\\n<h3 id=\\\"set-up\\\"><a href=\\\"#set-up\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Set up</h3>\\n<h4 id=\\\"prerequisite\\\"><a href=\\\"#prerequisite\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Prerequisite</h4>\\n<ul>\\n<li>Node.js (v10.16.3)</li>\\n<li>AWS CLI</li>\\n</ul>\\n<h4 id=\\\"create-a-cloudformation-stack\\\"><a href=\\\"#create-a-cloudformation-stack\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Create a CloudFormation stack</h4>\\n<ol>\\n<li>Clone the repository and go to the cloned directory</li>\\n</ol>\\n<p><code>git clone https://github.com/ks888/LambStatus && cd LambStatus</code></p>\\n<ol start=\\\"2\\\">\\n<li>Install all dependencies</li>\\n</ol>\\n<p><code>npm run install</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Add a '.env' file at the root of this repo based on <code>.env-example</code>. At least, you need to write your email address to the 'USER_EMAIL' line because the initial login information will be sent to the address.</p>\\n</li>\\n<li>\\n<p>Launch CloudFormation stack</p>\\n</li>\\n</ol>\\n<p><code>npm run cloudformation:create</code></p>\\n<p>If the command returns an error, make sure you properly configured <a href=\\\"http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html#cli-quick-configuration\\\">the AWS credentials</a>.</p>\\n<ol start=\\\"5\\\">\\n<li>Now the process to create the stack is ongoing. When the stack is created, the email will be sent to the email address.</li>\\n</ol>\\n<h4 id=\\\"change-aws-resources-created-by-cloudformation\\\"><a href=\\\"#change-aws-resources-created-by-cloudformation\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change AWS resources created by CloudFormation</h4>\\n<ol>\\n<li>\\n<p>Make your change.</p>\\n</li>\\n<li>\\n<p>Update the CloudFormation stack</p>\\n</li>\\n</ol>\\n<p><code>npm run cloudformation:update</code></p>\\n<h4 id=\\\"change-server-side-code\\\"><a href=\\\"#change-server-side-code\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change server-side code</h4>\\n<ol>\\n<li>Go to the 'lambda' directory</li>\\n</ol>\\n<p><code>cd packages/lambda</code></p>\\n<ol start=\\\"2\\\">\\n<li>Make sure the tests pass</li>\\n</ol>\\n<p><code>npm run test</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Make your change. Add tests for your change. Make the tests pass</p>\\n</li>\\n<li>\\n<p>(If necessary, deploy your functions)</p>\\n</li>\\n</ol>\\n<p><code>npm run deploy</code></p>\\n<p>Note: LambStatus depends on <a href=\\\"http://apex.run/\\\">apex</a> to deploy lambda functions. <a href=\\\"http://apex.run/#installation\\\">Please install it</a> if the <code>apex</code> command is not found.</p>\\n<h4 id=\\\"change-client-side-code\\\"><a href=\\\"#change-client-side-code\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Change client-side code</h4>\\n<ol>\\n<li>Go to the 'frontend' directory</li>\\n</ol>\\n<p><code>cd packages/frontend</code></p>\\n<ol start=\\\"2\\\">\\n<li>Make sure the tests pass</li>\\n</ol>\\n<p><code>npm run test</code></p>\\n<ol start=\\\"3\\\">\\n<li>\\n<p>Make your change. Add tests for your change. Make the tests pass</p>\\n</li>\\n<li>\\n<p>Run the local server</p>\\n</li>\\n</ol>\\n<p><code>npm run start # Run the admin page server at localhost:3000</code></p>\\n<p><code>npm run start:status # Run the status page server at localhost:3002</code></p>\\n<h3 id=\\\"project-structure\\\"><a href=\\\"#project-structure\\\" aria-hidden=\\\"true\\\" class=\\\"anchor\\\"><svg aria-hidden=\\\"true\\\" height=\\\"16\\\" version=\\\"1.1\\\" viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\"><path fill-rule=\\\"evenodd\\\" d=\\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\\"></path></svg></a>Project Structure</h3>\\n<p>\\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 790px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 59.31919642857143%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsSAAALEgHS3X78AAABXElEQVQoz4WSy05CMRCGz/vKzq0bEx/BhQt9CZe4MNHERAIRUDBcggZEQAXOtZ1Ob/7nIOqCy6zaznz9+08n8DvDWGuMcW5zNtiGOee01qy1oowpYeO0sfvhHDOW89DMFuLeL2v1+vVdbZXdDOPYFJhSkrW3OvU0eaje9jrNXq/faDStc3jLL/8HW8OaYhjMJdM3kS5mH1Pv9cnx0cX5We7faP4JbQoLwdqeYZYyHj/dVKN5aJ2lbFkqHZTLVyhQilGl1iTEiUgSBeiKUvk5eEkcfi2xVJSCeR+PR8MhFlEctl9mqECQUkJKIJAMYAModkhkWXZfqQhssrkIR4/P/dnnAsKdwevh6SUKJEkpqWjhP8/wAHki1Wq1oygGj4u6/cFkOiXFaSaSJAEHfvNXFa3GPLjCAkwYNMNai3fC3iq1559RDRZPKD6MhRDojdsyYsG28VJFYyC4Y3i/AXUct2UlIlzgAAAAAElFTkSuQmCC'); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"Architecture\\\"\\n title=\\\"\\\"\\n src=\\\"/static/Architecture-4768433e49daeb4603018da2afa2f461-ffc88.png\\\"\\n srcset=\\\"/static/Architecture-4768433e49daeb4603018da2afa2f461-d16f8.png 198w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-f21b1.png 395w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-ffc88.png 790w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-81e7e.png 1185w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-7cfeb.png 1580w,\/LambStatus-website/static/Architecture-4768433e49daeb4603018da2afa2f461-4e638.png 1792w\\\"\\n sizes=\\\"(max-width: 790px) 100vw, 790px\\\"\\n />\\n </span>\\n </span>\\n </p>\\n<p>These 3 directories under the repository are especially important for this system:</p>\\n<ul>\\n<li><code>./cloudformation</code>: the CloudFormation template. It describes all the AWS resources including Lambda, API Gateway, DynamoDB, etc.</li>\\n<li><code>./packages/lambda</code>: server-side code. All the server-side code runs as the Lambda Functions.</li>\\n<li><code>./packages/frontend</code>: client-side code. These are deployed to the S3 and served via CloudFront.</li>\\n</ul>\\n<p>Here is the contents of each directory:</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-none\\\"><code>.\\n├── cloudformation\\n| ├── bin --- the scripts to create the CloudFormation stack\\n| └── lamb-status.yml --- the CloudFormation template file\\n└── packages\\n ├── lambda\\n | ├── bin --- the scripts to build and deploy the lambda functions\\n | ├── config --- the webpack config file to build the codes\\n | ├── src\\n | | ├── api --- the entrypoints of Lambda functions. Handles the event from the API Gateway\\n | | ├── aws --- the classes to access AWS resources\\n | | ├── db --- the classes to access the database\\n | | ├── model --- the models\\n | | └── utils --- the utilities\\n | ├── test --- tests. Same structure as ./src\\n | └── package.json --- package.json file for lambda functions\\n └── frontend\\n ├── bin --- the scripts to build and deploy the frontend\\n ├── build --- the webpack config file to build the codes\\n ├── config --- the environment-dependent config files\\n ├── src\\n | ├── actions --- Redux actions\\n | ├── components --- React components\\n | ├── reducers --- Redux reducers\\n | ├── utils --- the utilities\\n | ├── admin-page.js --- the entrypoint of the admin page\\n | └── status-page.js --- the entrypoint of the status page\\n ├── test --- tests. Same structure as ./src\\n └── package.json --- package.json file for frontend</code></pre>\\n </div>\",\"timeToRead\":3,\"excerpt\":\"This page describes how to set up the development environment. Also, the project structure is explained as it is helpful to understand the…\",\"frontmatter\":{\"title\":\"Set up the development environment\"},\"fields\":{\"slug\":\"/set-up-the-development-environment\"}}},\"pathContext\":{\"slug\":\"/set-up-the-development-environment\"}}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/json-loader!./.cache/json/set-up-the-development-environment.json\n// module id = 1041\n// module chunks = 223490184532182"],"sourceRoot":""}