Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MrHertal/react-admin-amplify-demo
React Admin Amplify demo app.
https://github.com/MrHertal/react-admin-amplify-demo
aws-amplify demo react-admin
Last synced: about 2 months ago
JSON representation
React Admin Amplify demo app.
- Host: GitHub
- URL: https://github.com/MrHertal/react-admin-amplify-demo
- Owner: MrHertal
- License: mit
- Created: 2020-06-23T13:41:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-10T23:27:29.000Z (about 1 year ago)
- Last Synced: 2024-08-02T07:22:13.094Z (5 months ago)
- Topics: aws-amplify, demo, react-admin
- Language: JavaScript
- Homepage: https://master.d3os44oci7szj2.amplifyapp.com
- Size: 2.53 MB
- Stars: 45
- Watchers: 3
- Forks: 19
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-aws-amplify - React Admin Amplify Demo
README
# React Admin Amplify Demo
This project aims to demonstrate the use of [React Admin Amplify](https://github.com/MrHertal/react-admin-amplify).
The demo is accessible here: .
Feel free to play with it!
## About React Admin Amplify
[React Admin Amplify](https://github.com/MrHertal/react-admin-amplify) is a module that connects a react-admin frontend to an Amplify backend.
It includes the data and auth providers, but also some components that make things easier to set up.
## About this demo
The schema used in this demo is a variant of the [schema with 17 patterns related to relational designs](https://docs.amplify.aws/cli/graphql-transformer/dataaccess).
## How to clone this project
If you want to use this project as a bootstrap. Follow these steps:
```sh
git clone https://github.com/MrHertal/react-admin-amplify-demo.git && cd react-admin-amplify-demo
```
Install dependencies:
```sh
yarn
```
Init Amplify project:
```sh
amplify init
```
Push project to the cloud:
```sh
amplify push
```
Do not retrieve demo user avatar and remove the custom login page:
```jsx
// in App.js
// Get the demo user avatar
// authProvider.getIdentity = async () => {
// try {
// const userData = await API.graphql(
// graphqlOperation(queries.getUser, { id: "demo" })
// );
// const url = await Storage.get(userData.data.getUser.picture.key);
// return {
// id: "demo",
// fullName: "Demo",
// avatar: url,
// };
// } catch (e) {
// console.log(e);
// }
// };
function App() {
return (
);
}
```
Create a user using the cognito console for example. If you want to change the status `FORCE_CHANGE_PASSWORD` of your newly created user, use the AWS cli as explained [here](https://stackoverflow.com/a/56948249/4140356).
Finally, add the user to the `admin` group.
Start the project:
```sh
yarn start
```
You should be able to login with your user.
## Learn More
See [react-admin](https://marmelab.com/react-admin/Readme.html) and [Amplify](https://docs.amplify.aws).