Example how to create multiple shop applications and share components between them. This setup is recommended for large projects with multiple teams working on different parts of the application or agencies, which builds their own system for client deployments and want to share logic and components between them.
Starter example contains 2 example shop applications, using different Frontends templates to show that you can create applications with completly different stack, and still reuse the parts which can be reused.
Run the following command:
pnpm installto install dependencies and then to run specific application run command with its name:
pnpm run dev --filter=my-shop.comThis example includes the following packages/apps:
Apps are meant to be deployable applications, You can use Vite, Nuxt, Next.js, or any other framework to build your application.
Packages are meant to be as a reusable parts:
- shared UI components
- shared composables
- shared logic and utils
- shared Nuxt layers
- shared CMS components
...and so on. It is recommended first to develop the application and abstract the parts which can be reused into packages, unless you already have the experience with monorepos and you know what you are doing. Putting your code as a package is not a requirement, but it is recommended to keep your code clean and reusable. And also putting everything into the packages could also be overused if the packages are not reusable and tailored for specific application.
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
As packages you can also share configuration files between packages and applications, it is a very powerful tool.
To build all apps and packages, run the following command:
pnpm buildTo build specific app or package, run the following command (with changed name):
pnpm build --filter=my-shop.comThis is how you also should configure deployment - to build only what's specific application needs.
To develop all apps and packages, run the following command:
pnpm dev --filter=my-shop.comShopware Frontends documentation:
Learn more about the power of Turborepo: