"ui": "workspace:*" in all the package.json means, get the ui package from the workspace(pnpm-workspace). It is actuall the pnpm-workspace that allows sharing packages between the applications and th eother packages in the monorepo. npm and yarn also have this workspaces idea, but they all have a bit different implementation
Install any required library inside the packages/ui the apps or the components don't know that they will be using all these packages or libraries, but only the AppShell knows about it and it will take care of everything
Renaming the start script to dev, so running pnpm dev at a high level will start the dev scripts on all the apps, as NextJS apps have a dev script and not a start script
ts-config => contains all the TS configurations for all the next apps that were craeted in boilerplate turborepo, but it also worksout well for the react apps too
Running pnpm/npm install after everychange made in package.json or tsconfig.json, rebuilds all the dependencies from the newly created react app games, to get it ready for the monorepo and also make the linkage between the tsconfig and the games app.
packages/ui/package.json => "dev": "tsc --watch --outDir dist" & "build": "tsc --outDir dist" => these scripts are added as teh NextJS way of how the webpack is configured does not work with teh CRA's way. The CRA's way does not support building TS from external modules, so these 2 scripts are added to prebuild the TS in the library.
After adding the scripts cd => packages/ui => pnpm build => creates index.d.ts, index.js....etc. replace main: "index.js" & types: "index.d.ts" in /ui/package.json = this change => the app is not exporting TS or built version of TS, built typings woukd be available under types: "index.d.ts". This furthermore makes sure that the apps do noy get to do the compilation of the code that are in the /packages.
ModuleFederationPlugin Config : React is shared singleton as the hooks are shared globally, not having singleton: true kinda messesup the hooks
Webpack looks at the package.json of the corrseponding MFE and shares the dependenciens. Webpack throws error on libraries/packages imported from workspace like card: "workspace:*" as it has no clue about the workspace created by npm/yarn/pnpm. That is why the card is shared under shared instead of exposes as card: { singleton: true }, meaning that this MFE has and is sharing only one instance of card.
This is an official starter Turborepo.
Run the following command:
npx create-turbo@latestThis Turborepo includes the following packages/apps:
docs: a Next.js appweb: another Next.js appui: a stub React component library shared by bothwebanddocsapplicationseslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-config-prettier)tsconfig:tsconfig.jsons used throughout the monorepo
Each package/app is 100% TypeScript.
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
To build all apps and packages, run the following command:
cd my-turborepo
pnpm build
To develop all apps and packages, run the following command:
cd my-turborepo
pnpm dev
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 my-turborepo
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: