Skip to content

Contributing

神代類 edited this page Dec 25, 2022 · 2 revisions

Setting up MakoTools locally

  1. Install node.js and NPM. Follow the instructions here depending on your operating system.
  2. Install yarn. In the terminal, run npm install --global yarn.
  3. Run yarn init to install the required packages to your repository.
  4. These next few steps will vary depending on how you want to run the project. Running in development mode will allow you to update the project as you update the code. Meanwhile, running in production mode will create a build by validating the code of the project and run that build.

Running in Production mode

  1. By default, the run environment will be set to production. First, run yarn run build to create a build for the project. If the build process returns any errors, submit an issue.
  2. Run yarn run start to launch the program.

Running in Development mode

  1. Since development mode is not the default for the run environment, set the environment to development.
    In a Unix terminal (MacOS, LinuxOS, etc.), run export NODE_ENV=development .
    In Windows Command Prompt or PowerShell, run set NODE_ENV=development.
  2. To verify this updated NODE_ENV, run echo $NODE_ENV (Unix), or set NODE_ENV (Windows CMD/PowerShell). Either development (Unix) or NODE_ENV=development (Windows CMD) should be returned.
  3. Create an .env.local file at the top level of the repo. Add a field for the Firebase private key by pasting in: FIREBASE_PRIVATE_KEY=
  4. Ask any project admin for the private key, and paste it after the =. You can ask in the Discord server.
  5. Run yarn run dev. If any errors occur, please submit an issue.

Repository Structure

The repository is organized into several main directories:

All the page source files. Can also have a /components directory inside if the page uses more components. Only files ending in .page.tsx are rendered as pages.

Components that are used across multiple pages. Includes common components like PageTitle or Layout.

TypeScript type declaration files.

  • game.d.ts - types for game content, eg. cards, events etc.
  • makotools.d.ts - types for MakoTools' data, eg. users, announcements etc.
  • libraries.d.ts - types for other npm packages

Common TypeScript functions used across the projects, such as Firebase functions, user-related functions, and functions for other libraries such as dayjs.

Binary assets and SVGs.

Static data JSON files.

Development version of the locale strings. See more on Internationalization.

Next.js' public directory for hosting files.

Stylesheets used throughout the site.