Turborepo - React, Next.js, Vue 3, Angular, Express

• What is this?
  • Embedded with tutorials and simple apps for various modern js frameworks.
• This turborepo including:
  • Next.js, Angular tutorial.
  • Vue 3 & Vuetify custom component and various pages.
  • Node/Express backend server.

Will include more apps than you might imagine.

Commands used to init apps

npx create-turbo@latest
npx create-next-app@latest
npm create vite@latest
npm create vue@latest
ng new angular-app
npm init express@latest

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

apps

• app-vuetify-custom: a Vue & Vueitfy app
• next-tutorial: another Next.js app
• angular-app: an Angular app
• server: a Node.js & Express

packages

• @repo/ui: a stub React component library shared by both web and docs applications
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Vue 3

• app-vuetify-custom is a Vue 3 app with Vuetify.
  • Implemented vue-router and vuetify
  • Introduced vuetify-custom components
  • Several pages including business components
  • Git link

Next.js

• next-tutorial is a Next.js app with simple dashboard.
  • come from Next.js doc
  • Give knowledge of developing next.js app with best practice.
  • Git link
  • Live link

Angular

• angular-app is an Angular app including:
  tutorial (housing)
  kanbanboard page
  chat page

  • Git link

  Kanbanboard

  • Angular 18, Angular Material - CDK, Bootstrap 5
  • Implemented drag and drop functionality
  • Utilized Bootstrap library
  • Integrated with express server

  Chat app

  • Websocket client
  • TODO: Link

Node/Express

• server is a Node.js & Express server.
  • Composed kanban router

Utilities

This Turborepo has some additional tools already setup for you:

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

Build

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

cd my-turborepo
pnpm build

Develop

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

cd my-turborepo
pnpm 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 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

Useful Links

Learn more about the power of Turborepo:

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