Notes.md

Hosting

Redwood is pretty easy (and free) to host using Vercel (FE) and Heroku (databse). Check out the hosting tutorial.

How I built this

For this app, I used this tutorial Using RedwoodJs to create an Ethereum app as a starting point.

yarn create redwood-app nifty-chess-app
cd nifty-chess-app

yarn workspace api add @ethersproject/providers

# Make it pretty :)
yarn rw setup tailwind

yarn rw setup auth ethereum

Complete auth setup by reading the docs for @oneclickdapp/ethereum-auth

# Optional if you will be host. Currently RedwoodJS may have some bugsversion for hosting
yarn add -D @redwoodjs/[email protected] --registry=https://npm.patrickgallagher.dev:443 -W

yarn workspace api add @redwoodjs/[email protected] @redwoodjs/[email protected] @redwoodjs/[email protected] --registry=https://npm.patrickgallagher.dev:443

Now we are cooking. I'll create my Game entity and add some elements to it in schema.prisma.

model User {
  address    String  @id
  authDetail AuthDetail
  gamesMinted Game[] @relation(name:"gamesMinted")
}

model Game {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  playedAt DateTime
  mintedAt DateTime
  moves String
  movesHash String
  black String
  white String
  minter User?  @relation(name:"gamesMinted", fields: [minterAddress], references: [address])
  minterAddress String
}

Now we will start scaffolding. Before you run scaffold command, you may need to remove the relations value. Be sure to add them back after the scaffold!

yarn rw g scaffold game

And make some pages / layouts

yarn rw generate layout default
yarn rw generate page home /
yarn rw g page Login

Now let's add some <Private> routes to ensure we have the user's address before they do things like mint a new NFT

<Private unauthenticated="login">
  <Route path="/flows/{to}/new" page={NewFlowPage} name="newFlow" />
</Private>

We can also cleanup some pages we won't need like newUser.

Now let's set up our DefaultLayout. Since we are wrapping Routes, we need to pass down props for auth from the AuthProvider.

// web/index.js
import DefaultLayout from 'src/layouts/DefaultLayout'

ReactDOM.render(
  ...
  <RedwoodApolloProvider>
    <DefaultLayout>
      <Routes />
    </DefaultLayout>
  </RedwoodApolloProvider>
  ...,
  document.getElementById('redwood-app')
)


// Then in web/layouts/DefaultLayout.js use some React hackz, eg.
{React.cloneElement(children, { useAuth })}

Perfect, we are ready to spin up our app.

yarn rw db save
yarn rw db up
yarn rw dev

Now lets copy some frontend code from an example repo. I found GatsbyJS Tailwind Starter which looks cool.

Hosting

Now before we get too deep, lets set up our hosting, so out teammates can test out the app as we push up our changes. I'm using the vercel hosting guide with Heroku for the Postgres database.

yarn rw setup deploy vercel

In order to seed our database, we need to make sure the local migrations match the production migrations.

yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up