This project aims to demonstrate the use of React Admin Amplify.
The demo is accessible here: https://master.d3os44oci7szj2.amplifyapp.com.
Feel free to play with it!
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.
The schema used in this demo is a variant of the schema with 17 patterns related to relational designs.
If you want to use this project as a bootstrap. Follow these steps:
git clone https://github.com/MrHertal/react-admin-amplify-demo.git && cd react-admin-amplify-demo
Install dependencies:
yarn
Init Amplify project:
amplify init
Push project to the cloud:
amplify push
Do not retrieve demo user avatar and remove the custom login page:
// 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 (
<Admin
authProvider={authProvider}
dataProvider={dataProvider}
// loginPage={LoginPage}
dashboard={Dashboard}
></Admin>
);
}
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.
Finally, add the user to the admin
group.
Start the project:
yarn start
You should be able to login with your user.
See react-admin and Amplify.