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