High level architectural decision help - multiple SPAs for enterprise web app

I’m relatively inexperienced with vue. I’ve read the docs, done a tutorial, looked at some git repos, etc. but that’s as far as it goes so far.

I’m currently in the process of upgrading a legacy php/filemaker stack to a new microservice/noSql architecture on AWS.

I will be moving the stack from old to new one service at a time (There’s about 30 services). My goal is to create a single page app as the front end for each service and deliver it out of S3/CloudFront. Each app will be small. 3-4 pages. People using Service ‘A’ will not need service ‘B’. My goal is to NOT have a giant monolithic single page app, rather 30 ‘micro apps’. However, I will need each of these apps to have some common components. (Think java inheritance). For example: I need the same header in all 30 apps. I’d like to be able to change the header in one place and have it take affect in all the apps after rebuilding them all. However if I make a change to something specific to App ‘A’, I won’t need to rebuild all of the apps, only App ‘A’.

Is this kind of thing possible with vue? Are there any resources/frameworks that would be helpful with it?

Hi, there was a question similar to yours here:

I posted a solution there. I don’t know if this is what you are looking for. And also, i think that there should be a much better way to achieve this. But i haven’t found any.

Hope it helps.

You could build the common components/logic as its own NPM module(s). That way you have one repo for all shared code and you can update all dependencies in the micro apps with a few quick npm commands.

Forum discussion: A simple problem about vue component

Older, but still good article: https://medium.com/@arnaudrinquin/build-modular-application-with-npm-local-modules-dfc5ff047bcc

Another method is npm link: http://www.deadcoderising.com/how-to-smoothly-develop-node-modules-locally-using-npm-link/, but it is essentially just a symbolic link and comes with some caveats when deploying for production.

1 Like