Oldie totpenet

• include the CMS, advertise it and name it "totpenet"
• user roles: client | admin
• score keeping
• ...
• game/s
• chat
• notes / lists

This monorepo uses uses Turborepo (from Facebook) and Yarn as a package manager. It includes the following packages/apps:

Apps and Packages

• host-tpn: a React.js app created with Vite
• ¹ ui: a stub React component library shared by the host-tpn application
• ¹ eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• ¹ tsconfig: tsconfig.jsons used throughout the monorepo
• ¹ named store: localStorage persisted store with Zustand & suport for React's native Context API
• ¹ for managing general website settings: theme, language, authentication
• ¹ for working with Google Firebase firebase_package

Utilities

This turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Develop

To develop all apps and packages, run the following command:

cd totpenet
yarn install
yarn dev

Remote Caching

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:

cd totpenet
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

Useful Links

Learn more about the power of Turborepo:

• Pipelines
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

. . .

. . .

Development. Steps I took / how to reproduce.

Set up the monorepo with turborepo: npx create-turbo@latest

Turborepo will cache localy by default. For an aditional speed boost, enable Remote Caching with Vercel:

• npx turbo login
• npx turbo link

(to disable Remote Caching run npx turbo unlink)

yarn install

Test that everything is good and your new monorepo runs as expected: yarn run dev.
You should be able to access hhttp://127.0.0.1:5173/.

Scope down any command to certain app

yarn [script] --scope=[name] where name is the 'name' from package.json. This will only execute the script for the selected package.

Development

#1 Creating package store

In the terminal navigate to /packages and create folder named store. Inside folder store:

• yarn init -y
• yarn add zustand
• yarn install to install the dependencies
• create a file (custom hook) named useStore.ts and add the store details specific to zustand
• create a file index.ts and add the export options

(apparently zustand allows use of redux toolkit by using devtools. TODO: test this vs. implementing Redux toolkit without Zustand)

dev++

Build & deploy

To build all apps and packages, run the following command:

cd totpenet
yarn run build

Using Vercel for hosting, SSL & automatic deployments.
I've already set up my account with Vercel to automatically deploy on every update on git repo branch main.

Extra care to specific monorepo problems

package hoisting - strict management of versions & imports

Footnotes

1. micro frontend package ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶