Update docs on split deployment about boot-vue HOT 5 CLOSED

Thanks a lot for your answer! After pocking a bit with dynamic routes as per your advice and talking to the team 👀 , we decided to do a full split and use nginx to reverse proxy by path 🎖️ . So we ended up with:

/admin/* - admin service
/* - main service
And deploy both services as docker and reverse proxy. nginx -> admin:5001 and nginx -> service:5000.

Thanks a lot for your help and advice 🤝 . We'll have those options as an alternative.

Greetings from Russia 🇷🇺 🤝 🇨🇳

from boot-vue.

Hi,

Thank you for reaching out! To better assist you, could you please clarify which type of service splitting you are referring to? Based on your message, there are several possibilities:

Front-end layout splitting: If you are looking to split a large Vue.js front-end project into smaller sub-projects, you could consider using the Vue Router to enable independent development and deployment of different pages and features. By creating different routes for each sub-project, you can easily navigate between them and maintain a clear separation of concerns.

Front-end microservice splitting: If you are looking to decompose a front-end application into a series of small, independent services, you could consider using tools like Qiankun to create micro frontends. This would allow each service to focus on its own business logic and enable easier horizontal scaling.

Monorepo splitting: If you are looking to split a monorepo into smaller, independent repositories for better management and deployment, you could consider using a tool like pnpm. This would allow you to share dependencies across different projects while still maintaining a clear separation of concerns.

Back-end microservice splitting: If you are looking to decompose a large back-end application into a series of small, independent services, you could consider using tools like Docker, Kubernetes, or Spring Cloud. This would allow each service to focus on its own business logic and enable easier horizontal scaling.

In general, service splitting can make an application easier to manage, scale, and deploy. However, it's important to carefully consider the boundaries and communication protocols for each service to ensure that they can work together effectively.

Please let me know if you have any further questions or if there is anything else I can help you with.

from boot-vue.

Hello again, thanks for your response. It was a bit too broad, perhaps since my question wasn't specific enough 🙄
Let's put it in some ctx 💭

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    meta: { layout: "pub" },
    children: [
      {
        path: "",
        component: Home,
      },
      {
        path: "foo",
        component: Foo,
      },
    ],
  },
  {
    path: "/admin",
    meta: { layout: "admin" },
    children: [
      {
        path: "",
        component: Admin,
      },
      {
        path: "bar",
        component: Bar,
      },
    ],
  }
];

Here I have 2 layouts for Public and Admin access. And I have two families of routes, like /foo and /admin/bar.
As the project grows, I'm getting more and more those routes. The idea is to split all /admin routes to a separate project.

Which is the best way to do that? 🤔

The reason I'm asking this HERE is because I saw smth like in your projects a month ago. It was called smth like deploying multiple microservices in your docs. I'm looking for that again 👀

Yes, only FRONTEND is relevant.

from boot-vue.

Thank you for your feedback

To split your admin routes into a separate project and load them lazily, I recommend using the Vue Router's dynamic route matching feature, as documented here: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html.

In summary, you can create a separate Vue.js project for the admin routes and components, export the admin routes as a separate module, and then import and use them dynamically in your main project. This will allow you to load the admin routes and components only when they are needed, reducing the initial page load time and improving the performance of your application.

from boot-vue.

In addition, you may also find the Vue Router's dynamic routing feature useful for splitting your routes into separate projects. You can read more about this feature here: https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html.

Dynamic routing allows you to generate routes based on data or other factors at runtime, instead of defining them in advance. This can be useful for creating modular, reusable route components that can be used across different parts of your application.

I hope this additional information is helpful! Please let me know if you have any further questions or if there is anything else I can help you with.

from boot-vue.