BigNom/serverless-stack-demo-client

Source for the demo app client in Serverless-Stack.com

Serverless Stack Demo React App

Serverless Stack is a free comprehensive guide to creating full-stack serverless applications. We create a note taking app from scratch.

This repo is for the frontend React app that we build over the course of the tutorial. You can find the repo for the backend serverless API here. And the repo for the tutorial here.

Steps

To support the different chapters and steps of the tutorial; we use branches to represent the project codebase at the various points. Here is an index of the various chapters and branches in order.

• Create a New React.js App
• Add App Favicons
• Set up Custom Fonts
• Set up Bootstrap
• Handle Routes with React Router
• Create Containers
• Adding Links in the Navbar
• Handle 404s
• Create a Login Page
• Login with AWS Cognito
• Add the Session to the State
• Load the State from the Session
• Clear the Session on Logout
• Redirect on Login and Logout
• Give Feedback While Logging In
• Create the Signup Form
• Signup with AWS Cognito
• Add the Create Note Page
• Call the Create API
• Upload a File to S3
• Clear AWS Credentials Cache
• List All the Notes
• Call the List API
• Display a Note
• Render the Note Form
• Save Changes to a Note
• Delete a Note
• Create a Route That Redirects
• Use the Redirect Routes
• Redirect on Login
• Update the App
• Code Splitting in Create React App

Usage

This project is created using Create React App.

To use this repo locally, start by cloning it and installing the NPM packages.

$ git clone https://github.com/AnomalyInnovations/serverless-stack-demo-client
$ npm install

Run it locally.

$ npm run start

To deploy, replace the following in the package.json with your S3 bucket and CloudFront distributions.

"deploy": "aws s3 sync build/ s3://notes-app-client",
"postdeploy": "aws cloudfront create-invalidation --distribution-id E1KTCKT9SOAHBW --paths '/*' && aws cloudfront create-invalidation --distribution-id E3MQXGQ47VCJB0 --paths '/*'",

And run.

$ npm run deploy

Maintainers

Serverless Stack is authored and maintained by Frank Wang (@fanjiewang) & Jay V (@jayair). Subscribe to our newsletter for updates on Serverless Stack. Send us an email if you have any questions.