Illust.space

The monorepo for the Illust Space marketplace and WebAR map webapp.

Local Development

Dev Environment

Install:

• Node 16

• Yarn

• Java (for the database emulator)

You can use asdf to install the versions in the .tool-versions file.

You may also want to install the current version of bash with brew install bash, to fix issues with running pre-commit hooks.

Lerna

This monorepo uses Lerna and Yarn Workspaces to manage shared node packages. Most commands should be run from the root of the project. See the package.json for available commands, and Lerna for other useful commands.

Set up Credentials for Firebase Admin SDK

Download a Service Account JSON file see docs). Then move it to packages/api/serviceAccountKey.json

Add .env and other secret files.

Download the folders in Google Drive.

Then copy over the .env and .runtimeconfig.json files to the matching packages/package-name directories.

You can also manually generate keys from the different services:

Firebase

https://console.firebase.google.com/project/illust-marketplace-staging/settings/general

Portis

https://dashboard.portis.io

Formatic

https://dashboard.fortmatic.com

Infura

https://infura.io/dashboard/ethereum

Dependencies

Install

Install npm dependencies for all packages. This uses Lerna and Yarn Workspaces, so most dependencies will be installed in the root node_modules:

yarn install
yarn bootstrap

Generate Contract types

Generate TypeScript files and types for the marketplace contract ABIs.

yarn contracts

Add

To add a dependency to a particular package:

yarn lerna add dep-name --scope=@illust/package-name

Add a dependency to all packages:

yarn lerna add dep-name

Add a dev dependency to the root only:

yarn add dep-name --dev -M

Rebuild node_modules

If there's a problem with your node_modules and you need to delete them all and start over:

yarn lerna clean
yarn bootstrap

Start the dev servers

When setting up the local project for the first time, you will need to build the API server:

yarn build:api

And also run the following command to set the default firebase project:

yarn firebase use staging

After running those commands once, you can run the following command to start the firebase emulator for the cloud functions and webpack-dev-server for the marketplace and webar frontends:

yarn start

marketplace will run on localhost:3000, webar on localhost:3001, scraper on localhost:3002, pvnp on localhost:3003, and api on localhost:5000. You can see the firebase function logs at localhost:4000.

You can also run these in separate terminals, which can make debugging easier:

yarn start:api
yarn start:marketplace
yarn start:webar
yarn start:scraper

Use flag --https for when needed. ex: yarn start:webar --https Use a chrome flag chrome://flags/#allow-insecure-localhost to remove https warnings

Linting

Note that in general you should set up your code editor to show eslint errors and to format with prettier. The pre-commit hooks also should catch any linting errors. But if you want to manually auto-format the codebase with eslint --fix and prettier:

yarn format

To check that everything is linted correctly and should pass CI:

yarn lint

Pre-commit hooks

We're using Husky and lint-staged to automatically format and lint files during a git commit. This should automatically install when you yarn bootstrap, and will run prettier, eslint, and tsc only on changed files.

Build & Deploy

In general, you should rely on the Github Actions CI to build and deploy the apps. Merging to development will deploy to staging, and merging to main will deploy to production.

You can manually build and deploy the api functions, marketplace frontend, and webar frontend to Firebase.

yarn build
yarn firebase deploy

Versioning

When doing a release to production, you want to generate new version numbers on the release/ branch before merging to main. To do that on public packages that have changed since the last release, run:

yarn version:bump