serve 2 different applications with the same codebase

[qdouble]

serve 2 different applications with the same codebase

[qdouble]

@maku for dev, I'd just use CORS and run them on different ports, if you make changes that should be shared between the two of them, you can just git cherry-pick those changes...that's how I manage to update different branches easily.

If you're looking for something more specific to handle a particular situation, let me know.

[maku]

@qdouble what I mean is to get 2 different html files (e.g. index.html for consumer functionality and admin.html for admin functionality). Both should reference a different bundle.js which contains only the functionality needed...

In a former webpack (1) project I did this with HtmlWebpackPlugin and different entry definitions and so on.

Now I am a little bit uncertain (because of AOT and so on) which parts of the webpack config has to be changed to achieve this behaviour....

[qdouble]

@maku yes, you'd need to use two different entries...as far as the html, HtmlWebpackPlugin is used for the dev server, but the copy plugin is use otherwise (https://github.com/qdouble/angular-webpack2-starter/blob/master/webpack.config.ts#L105). It could get a little bit more tricky with AOT... you'd probably need two tsconfigs and one would probably need to exclude the files of the other.

I'd personally prefer to do it as two different repos or two different branches, but if you set the entry point, the html and copy plugin right, then create two different aot configs, and some additional scripts, it should be workable.

[maku]

@qdouble thank you for the info. The 2 app versions share much code so it would be beneficial to keep it in the same code base.... I will give it a try. Probably the harder part is AOT...

[qdouble]

@maku One potential bug area is AOT may complain about certain things being declared multiple times if it's being referenced separately by both of your apps...so make sure to test for those issues along the way.. best of luck.

[maku]

@qdouble Another question: I saw that the AotPlugin will be supported in the future. Maybe it is wise to wait for this before I try to support 2 apps...

[qdouble]

Yeah, I will add it on soon, it just has a few bugs... so I said let me wait to see if they release any patches next week.

There will be some configuration and script changes...which wouldn't be a big deal if you're just working on one app, but if you're going to start hacking the webpack.config to work with two app, then yeah, it may be better to wait.

[maku]

@qdouble Thank you

[maku]

@qdouble Another idea would be to pass in the name of the app_asset (in this case hard coded with "main.browser") -> would this be an idea in general to make the stuff more reuseable? So I could manage the build from the outside...

[DzmitryShylovich]

See https://github.com/mgechev/angular-seed#how-to-start

# dev build of multiple applications (by default the value of --app is "app")
npm start -- --app baz
npm start -- --app foo
npm start -- --app bar

mb u will find something useful

[maku]

@DzmitryShylovich the idea is the same. but of course angular-seed is not based on webpack...

[DzmitryShylovich]

I meant u can see how it's implemented so u can recreate it n your project with webpack.

[maku]

@DzmitryShylovich yeah but the problem is the more I change the webpack config myself the more difficult is it to follow the enhancements which happen in qdouble/angular-webpack2-starter. I did this in a former project which was based on AngularClass/angular2-webpack-starter and it was a nightmare to handle it...

[DzmitryShylovich]

I don't think @qdouble will support multi project build here so...

[maku]

@DzmitryShylovich could be true - but it would be a very useful enhancement :-)

[qdouble]

I could change this seed to support multi-projects, but then that would make all of the branches more complex, so I don't think that would make a lot of sense. Beyond that, even if I did do that, I don't think there is a clear way you can satisfy all needs.

Once you come to the point where you want a multi-application app, you should hack the starter project yourself, as the setup becomes very specific instead of general.

[maku]

@qdouble I understand your arguments - for someone who has to build an ng2 app today (like me) it is not easy because of the rapid change of ng2. Especially when you have to focus to getting things done on an app functional level vs. system infrastructure.

Maybe you have some hints what the critical parts of a multi-app approach would be (based on the current webpack config)?

To change webpack.config.js and make the entry point 'main.browser' variable should not be the big challenge, right? The config.output.path has than also to be variable.
For AOT it seems more complicated. But here I would wait until the AotPlugin is established....

[qdouble]

@maku honestly, when I first started looking into my own builds, I spent a lot of time working on multi-app solutions...but from my experience, you run into way more problems than you solve by having it that way. I don't think it's a good way to build your applications.

So I will refrain from offering too much advice on it as I think it is essentially bad practice, at least for right now.

[maku]

@qdouble I see, but both apps has ca. 30 % of the code in common (one part is the consumer app and the other for admins)

Maybe I think about another approach: based on lazy loading and routes and to keep it in 1 application...

[qdouble]

@maku well the problem isn't just creating the initial shared project, it's the maintenance issue and complex configuration issues that are the problem. If the code base is similar, you could easily share that between different branches or repos and just cherry-pick. Very easy to maintain and simple configuration.

[qdouble]

@maku the main flaw to me is what you are experiencing now. Multi-project apps will be extremely difficult to switch between builds... while with more singular apps, you could switch between projects more effortlessly. Any advantage you think you gain by keeping it all in one will start to be diminished by the extra headache you get from trying to maintain that type of setup.

[maku]

@qdouble thank you for your thoughts. Although I have not really an idea how I can solve my problem with git tools (branches or repos and cherry-pick).

To be honest I decided to go the quick and dirty way for now (which means I try to hack webpack.config.ts) because I have a medium size ng2 code base and I have to proceed develop business func.

Maybe in the future something comes up which is able to maintain more app entry points per codebase (maybe angular-cli or somehting else)

[qdouble]

@maku when the ngtools plugin is working fully, I may take a look at it again (it's been months since I played with that type of setup)... if it seems like something that can be a general use solution, then I'll either add a branch or create a repo... but otherwise, it will have to remain an individual solution

[maku]

@qdouble thank you...

From my point of view, a solution like the one used in https://github.com/mgechev/angular-seed seems good enough to me.

So in the meantime I try it this way (hacking the webpack.config.ts to pass in the name of an entry-point or stay with main.browser when nothing is passed in) e.g. npm ... -- --app admin.browser

[alvipeo]

Keep [this repo] simple and stay focused. That's what makes it valuable.

[qdouble]

@maku yeah... creating a setup that works with multiple apps is not the issue, it's the long term maintenance issues that are concerning.

@alvipeo definitely. I don't think multi-apps should be part of this repo... I may create a different branch or another repo if I see it as something to do, but for right now, I don't see a reason to add that extra complexity and maintenance nightmare.

[ajay458]

Sorry for jumping again on this thread after a year. Thanks for great discussion.
I know the pain of maintaining two branches for similar application. Mine is also same situation - consumer application and admin application similar, almost varies just 5% (95% matches). So i am trying to maintain a single code with a flag during the build process. This is my first thread after the task being started. @maku Any best approach noticed?

[maku]

@ajay458 I switched to angular/cli a long time ago (And I don't regret it). It also supports more than one app (although I changed my app so that admin parts of the app are only lazy loaded and part of the main app)