This repo is an example of a fullstack application using Hasura GraphQL engine with some role-based authorization. This is by no means a complete app, it serves as a weekend project to play around with Hasura.
- TypeScript
- Next
- React + ChakraUI
- Express
- Redis
- GitHub as image host
- Hasura Graphql Engine
- Postgres
- Docker
- undraw.co illustrations
-
Install dependencies
yarn install
-
Setup
.envfile for backend- Create a
.env.devfile, use.env.exampleas reference GITHUB_IMAGE_REPO_OWNER,GITHUB_IMAGE_REPO_NAME, andGITHUB_ACCESS_TOKENare needed for image uploads (when creating a new restaurant)- The app upload images into a github repo. See this repo for example
GOOGLE_OAUTH_CLIENTIDandGOOGLE_OAUTH_SECRETare needed for google sign-in to work. Refer to https://developers.google.com/identity/sign-in/web/sign-in on how to get them
- Create a
-
Run the backend
docker-compose up # start everything upNote that if there are changes to Dockerfile.dev or new packages installed, a rebuild is necessary.
docker-compose up --build server
If you encountered an error that says
"Unhandled exception: Filesharing has been cancelled", you need to allow Docker file sharing on your project's directory. -
Run the frontend
cp ./client/env.example ./client/.env # prepare the .env file for frontend app yarn dev # start the frontend dev server on port 3000
-
Setup Postgres DB tables and Hasura graphql engine metadata
yarn global add hasura-cli # hasura-cli is needed to perform this cd hasura hasura migrate apply hasura metadata apply
- This example only supports google sign-in. If you want another sign-in method you can add it on your own.
- To add restaurants, you need to manually set a user's
roleto beowner. To do this, edit the record directly from hasura consolehttp://localhost:8080/console - Everytime a new user signs up, the authentication service insert a new user to the DB. Currently, the authentication service do this via GQL mutation. It could write directly to DB if you want to do so.
- The GQL engine will call the authentication service to authenticate any incoming requests. If you don't want this, you can modify it so the auth service issues a JWT token to the frontend instead. Read more about this in hasura docs
- If you want to use this on production, you would probably want to do some codesplitting in the frontend app. I neglected it because I just wanted to mostly learn about Hasura 😃

