Built with Turborepo!
This Turborepo includes the following apps/packages:
app: a Next.js app for our Web3 dashboards at app.niftyleague.comdocs: a Docusaurus app for our company docs at niftyleague.com/docssmashers: a Next.js app for our game's website niftysmashers.comweb: a Next.js app for our company's website niftyleague.com
@nl/eslint-config: global eslint configurations (includeseslint-plugin-nextandeslint-config-prettier) for code analysis/linting@nl/imx-passport: an Immutable Passport instance to connect apps to the Immutable zkEVM blockchain@nl/playfab: a PlayFab client API for our game services. Includes auth UI components for PlayFab login.@nl/prettier-config: global Prettier config overrides for code formatting@nl/theme: a common theme wrapper for Next.js apps using Material-UI@nl/typescript-config: global TypeScript configstsconfig.json@nl/ui: a stub React component library shared by all applications. Includes global Tailwind CSS styles.
Note: Each package/app strictly uses TypeScript
app: http://localhost:3001docs: http://localhost:3002smashers: http://localhost:3003web: http://localhost:3000
This Turborepo has several tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for opinionated code formatting
- Turbo for parallelizing and caching your build steps
- Syncpack for managing dependencies
- Tailwind CSS for style utility classes
To install turbo globally for ease of use:
pnpm install turbo --global
Note: All commands are run from the root directory!
cd nifty-fe-monorepo
We use pnpm to manage dependencies.
pnpm install
Please install dependencies only where they're used.
To add a dependency to a specific app directory use --filter
pnpm add PACKAGE_NAME --filter=DIRECTORY_NAME
To build all apps and packages, run the following command:
turbo build
To develop all apps and packages, run the following command:
turbo dev
To lint all apps and packages, run the following command:
turbo lint
Note: you can also use
turbo lint:fixto run linting with --fix
To format all apps and packages, run the following command:
turbo format
To check TypeScript in all apps and packages, run the following command:
turbo type-check
To run all of the above test commands together, run the following command:
turbo test
We use Syncpack to ensure consistent dependency versions.
syncpack lint
Lint all versions and ranges and exit with 0 or 1 based on whether all files match your Syncpack configuration file.
syncpack fix-mismatches
Fix all mismatches in your dependencies uncovered by syncpack lint.
syncpack format
Format all package.json files to match our Syncpack configuration file .syncpackrc.ts.
syncpack list
Query and inspect all dependencies in our project, both valid and invalid.
syncpack update
Update all dependencies to the latest versions on the npm registry.
This covers dev, prod, and peer dependencies and updates all apps/packages recursively.
--recursive, -r
Concurrently runs update in all subdirectories with a package.json (excluding node_modules).
--latest, -L
Update the dependencies to their latest stable version as determined by their latest tags.
--workspace
Tries to link all packages from the workspace. Versions are updated to match the versions of packages inside the workspace.
--interactive, -i
Show outdated dependencies and select which ones to update
Recusively update all packages (does not pull latest major releases):
pnpm up -r --workspace
Recusively show latest dependencies and select which ones to update:
pnpm up -r -L -i
Filtering allows you to restrict commands to specific subsets of packages.
Selectors may be specified via the --filter (or -F) flag:
pnpm --filter <app/package_selector> <command>
App Selectors:
appdocssmashersweb
Package Selectors:
eslint-configimx-passportplayfabprettier-configthemetypescript-configui
We have several GitHub Actions workflows pre-configured to run tests such as linting, formatting, and type checking on pull requests to main or staging. All tests must pass before a pull request can be merged.
If you want to run the CI tests locally, you can use act to run the workflows.
On MacOS, you can install act using Homebrew:
brew install act
On Windows, you can install act using Chocolatey:
choco install act
After you have act installed, you can run the following command to run the all CI tests locally via Docker:
pnpm act-ci
Note: GitHub automatically provides a
GITHUB_TOKENsecret when running workflows inside GitHub. With act, you need to mannually provide yours each run. The above command will automatically prompt you to input your GitHub personal access token!
Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:
npx turbo login
This will authenticate the Turborepo CLI with your Vercel account.
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
npx turbo link
Learn more about the power of Turborepo:
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Email andy@niftyleague.com
OR
Join the Nifty League Discord Server and message an admin