travomic / battle-orb

2-player Hasura powered turn based competitive strategy game.

battle.orb.zone

Hasura powered turn based competitive strategy game. (Work in Progress)

This is a hackathon entry for: Hasura Enterprise GraphQL Conf

Following setup instructions from the following resources:

• Hasura GraphQL One-click App on DigitalOcean
• TypeScript + Vite + ReactJS + urql
• Auth0 JWT Integration with Hasura
• Auth0 "SPA" SDK
• urql with async fetchOptions
• react-urql subscriptionExchange

Things I learned along the way...

• Using Vite as the build-tool, requires that if you want to use environment variables in your code, you must do a couple things. First, they must be prefixed with VITE_ and if using TypeScript, you need to update ./src/react-app-env.d.ts to declare the ones you need, so that the production build doesn't fail with: "... does not exist on type 'ProcessEnv'."
• After struggling quite a bit wondering why my configured DigitalOcean Application Environment Variables weren't getting picked up in the build output, I ended up adding the build-config ENV vars into the .env.production file included in the git repo, and learned Vite requires them to be references them via import.meta.env.VITE_* in the source code. (...and './src/react-app-env.d.ts' needed to have an updated interface for ImportMeta.)
• callbag-basics does not play well with Vite, and needed to be replaced with callbag-basics-esmodules instead.
• @auth0/auth0-react is magical, providing crisp clean React hooks to provide login/authentication flow a breeze.
• urql uses wonka under the hood, which aligns extremely well with the callbags I plan on using for the reactive-event streams.
• Trying to leverage subscriptions-transport-ws for GQL subscriptions within an esmodules ecosystem, leads to a rough time... I have ended up copying the github repo sources, and converting them to typescript local imports by hand. (keeping the source LICENSE files, etc.)

Here's how my Auth0 config settings look...

(To allow for production and local development.)

Setting	Value
Allowed Callback URLs	https://battle.orb.zone/auth,http://localhost:3000/auth
Allowed Logout URLs	https://battle.orb.zone/logout,http://localhost:3000/logout
Allowed Web Origins	https://battle.orb.zone,http://localhost:3000
Allowed Origins (CORS)	https://battle.orb.zone,http://localhost:3000

Some more articles about the technologies I chose to use...

• Comparing Callbags to RxJS

Here was my original plan of attack, with some incomplete TODO items...

TO BE CONTINUED...

If it weren't for this Hackathon challenge, I would have continued to put off trying to build a boiler-plate project with my "ideal" modern development tools and strategies. I will abide by the rules and not commit any more changes to the main branch for the remainder of this week, however I will likely be pushing new commits onto the next topic-branch, as I listen to the presentations and try out more things.

• THANKS! – Trave