The website for the Regen Network decentralized infrastructure.

• Regen Website
  • Table of Contents
  • Installation
    • Prerequisites
      • Mac
    • Install dependencies
  • Environment variables
  • Development
  • Deployment
    • Registry
      • GraphQL Type generation
    • Storybook
    • Deploying the Custom Login form to Auth0
  • Testing
  • Code style
  • Typography
    • Sizing guide
  • Timeout Issue on Slower Connections
  • Netlify
    • Debugging Netlify deploys

This project uses lerna with yarn workspaces to manage multiple packages:

• web-registry: Registry React application
• web-components: React components and material-ui custom theme
• web-storybook: Storybook config
• web-auth: React application used for Auth0 Custom Universal Login

If you haven't already, you can set up system dependencies by running the following commands:

brew install python
sudo ln -s /opt/homebrew/bin/python3 /opt/homebrew/bin/python
brew install vips

Note: python and vips are dependencies via sharp.

yarn install
yarn bootstrap

Prepare some artifacts needed to run in dev mode:

yarn build

Set variables in .env files in web-registry/ and web-storybook/ folders based on provided .env.example files.

For web-auth, follow these setup instructions.

First, run:

yarn watch

It will watch for changes in web-components and rebuild them in web-components/lib directory.

Then, to run the registry app:

yarn start

To run Storybook:

yarn storybook

To run the auth app:

yarn start-auth

Compile web-components and web-registry to web-components/lib and web-registry/build respectively:

yarn build

To generate Type definitions from our GraphQL Schema, as well as custom react hooks, make sure the graphQL server is running locally, cd into the appropriate sub-folder and run (per repo):

For /web-registry there are two commands for the separate sources:

1. yarn graphql:codegen - for registry server graphql types
2. yarn graphql:codegen-sanity - for sanity CMS graphql types

which generates types for any named GraphQL queries and mutations in web-registry/src/graphql/*.graphql (note - it does not generate types for unnamed queries)

yarn graphql:codegen

This should be done anytime a .graphql file is created or modified.

As part of regen-network/regen-server#186, we've added some additional filtering features to our GraphQL server (using postgraphile-plugin-connection-filter), though we restricted the filters to only work on certain fields and operators for now for performance and security reasons: https://github.com/regen-network/registry-server/blob/aa97096c9a8e88e1af97655586e0222e263b8df5/server/Server.ts#L111-L115

If you try to use a filter that is not allowed yet, you'll get the following error when trying to generate types: GraphQLDocumentError: Field "${fieldName}" is not defined by type "${TableName}Filter". In this case, you might want to submit a PR on https://github.com/regen-network/registry-server first to allow more filtering options.

Similarly, types can be generated for Sanity GraphQL Schema (from web-registry/src/graphql/sanity/*.graphql) using:

yarn graphql:codegen-sanity

Compile web-components and web-storybook to web-components/lib and web-storybook/build respectively:

yarn build-storybook

Please, follow these instructions and then:

1. Run yarn build-auth command.
2. Copy the code from ./build/index.html.
3. Paste it into the Universal Login HTML form from Auth dashboard and save.

This could be automated in the future.

yarn test

Launches the test runner in the interactive watch mode. Jest is used as test runner.

We're using StoryShots for snapshots testing. Update web-components snapshots:

yarn test-update-snapshot

Prettier and ESLint are used as code formatter and linter.

Code can be formatted and any auto-fixable errors corrected through the command:

yarn format-and-fix

If you are using VsCode, there are suggested workspace settings in .vscode/settings.json.suggested - copy those over to your workspace settings.json and things should format automatically.

Note: You'll need the VsCode extensions for Prettier and ESLint

This repo utilizes custom MUI Typography components to normalize styles with the mockups based on the typography in figma:

1. <Title /> corresponds to "Header" text in the mockups
2. <Label /> corresponds to "Button Text" in the mockups
3. <Subtitle />
4. <Body />

Responsive styles are generally normalized (e.g. an H1 on desktop translates to an H3 on mobile in most cases), however these can be overridden with variant / mobileVariant (for Titles) and size / mobileSize (for the others). For example:

<Title /> // renders an h1 (default) on desktop, h3 on mobile
<Title variant="h3" /> // renders an h3 on desktop, h4 on mobile
<Title variant="h3" mobileVariant="h3" /> // renders an h3 on desktop & mobile
<Subtitle size="xl" mobileSize="sm" />
<Body mobileSize="md" /> // keep default `md` size on mobile

One small gotcha: due to how styled components and the sx prop function together, if you want to use a custom fontSize through sx, you have to pass responsive values:

<Title sx={{ fontSize: 12 }}> // does not work as expected
<Title sx={{ fontSize: [12] }}> // works
<Title sx={{ fontSize: [12, 18] }}> // works
<Title sx={{ fontSize: { xs: 12 } }}> // works

All of these components also accept MUI's SX Prop.

The <Body> component by default will add styles to child Link and ul/ol elements, which can be overridden through props:

<Body>
  <Link>text</Link> // will render as green w/ bold text
  <ol>
    <li>list text</li> // will render with a green dot and custom positioning
  </ol>
</Body>
<Body styleLinks={false} styleLists={false}>
  <Link>text</Link> // will render as default text
  <ol>
    <li>list text</li> // will render with default list styles
  </ol>
</Body>

some larger packages don't manage to get downloaded in time for yarn's 30 second timeout, you might see an error like this one

info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/jared/Dev/registry/yarn-error.log".

a simple workaround via mui/material-ui#12432 is to run

yarn install --network-timeout 500000

instead of yarn install

Currently we use netlify to deploy this application. Please see the netlify.toml in the project root for information about the different deployment environments.

In case you are seeing a build/deploy failure from Netlify, there is a helpful way to debug. Netlify provides the source code for their build-image. This docker image can be used to run a netlify build worker on your local machine. This allows you to test settings and parameters of the build. Hopefully this allows you to reproduce the error/failure you are dealing with.

git clone https://github.com/netlify/build-image
cd build-images
docker pull netlify/build:focal
./test-tools/start-image.sh ../regen-web/

Make sure that any changes you want to test in the local build are committed. Uncommited changes are ignored by the Netlify build image.

After running the start-image.sh script you will drop into the docker container. Then you will be able to run any commands, i.e. the build:

/opt/build-bin/build yarn build