running angular multiple apps from one folder

[Tito]

I have my first app in production! but that comes with its own blessing and curse :) now other departments want an app to manage their work from Excel to a web portal.

First app in production was managing virt machines.

So now I either customize this app with permissions and authorizations or write one app per department.

What would you recommend? And is hosting multiple apps on one node server possible?

Thanks!

[Sander Elias]

Hi Tito,

You can host as many apps as you like on a node server.

I would put in authorization anyway, but you can share that among apps.

Regards

Sander

[Tito]

Greetings Sander,

So, how do I do that any write up or reads you recommend. It is windows server. I cannot see myself opening 15 different node js command prompts and running npm start and different ports :)

Thanks!

[Zlatko Đurić]

Hi Tito,

Congratulations on your first production deployment! :)

There are multiple ways to run multiple "apps" from one Node (express) app. You're saying Angular apps, but it seems like Node.js is involved too, so I'll try to address some cases. If you have one very specific 

TL;DR:

- if it's just angular apps, serve app.use('/app-virtual-path', express.static('/path/to/app'))

- if it's Node.js code as well, write those in their own modules, and export their routers (not the whole express apps), than mount the individual routers on a global express server.

If it's just multiple angular apps, than it's pretty simple - serve apps on different routes (or even domains/network interfaces/whatnot).

E.g. simplest way to serve those with Node on different paths, e.g.

server.example.com/app1 -> serves angular app 1

server.example.com/app2 -> serves angular app 2

etc.

app.use('/app1', express.static('/path/to/app1'));

app.use('/app2', express.static('/path/to/app2'));

// ...

app.use('/appN', express.static('/path/to/appN'));

Basically, every app is served in its own virtual path.

Alternatively, you can serve the angular apps on different subdomains, e.g.:

app1.server.com -> serves app1

app2.server.com -> serves app2.

How to do this depends on your server setup. You can route it directly with node, using something like this: https://www.npmjs.com/package/express-subdomain. Alternatively, you can use the simpler version above, but than use some rewrite rule on the reverse proxy that's in front of node (such as nginx, or IIS since you're on windows).

If you also need some server-side specific code, those separate routes handle the stuff, for you. For clarity, maybe just separate those in their own files/folders with their own routers, than mount it all on one global express router and handle routing properly. The added benefit of running it all on a single node instance is that you get to share common middleware like authentication or authorization, which is likely to be useful in an environment that you describe.

Example:

// app1.js

const router = require('express').Router();

router.use('/app-specific-endpoint', (req, res) => {

  res.json({ message: 'Here is something that is specific for this app' });

});

router.use(express.static('/path/to/angular/code'));

module.exports = { router };helps a bit

// app2 -> the same, just for the different angular app.

const router = ...

module.exports = { router };

// global express app file, e.g. server.js

const express = require('express')

const app = express();

const middleware = require('./middleware/'); // optionally, if ou need it.

const router1 = require('./app1').router;

const router2 = require('./app2').router;

app.use(middleware.auth()); 

app.use('/angular-app-1', router1);

app.use('/angular-app-2', middleware.hasRole('admin')); // specific for app2, say, permissions check

app.use('/angular-app-2', router2);

const port = 8080;

app.listen(port, (err) => console.log(err || `Listening on ${port}`));

I hope this gives you ideas on how to start. If you share more details, maybe you can get more specific answers.

[Tito]

Thanks Zlatko Đurić . I think I will try the ngnix route!

[Tito]

ok been a while and now I am ready to dive in. so yes I am using angular code with node.js 

I would also like to use same node_modules for these I do not want node_modules sprawl. Is that possible to have shared modules folder for both to use?

Thanks

On Wednesday, June 21, 2017 at 1:16:28 AM UTC-7, Zlatko Đurić wrote:

[Zlatko Đurić]

Certainly! Personally I would strongly suggest separating the codebases completely (backend is 1 repo, for now, frontend is another completely. Takes care of so much confusing things.)

Anyway, you need a few things set up. Like, you don't wanna let your entire node_modules/ folder public. You might have something that's critical or can even jeopardize the underlaying system (like, exposing the del, rimraf or similar). Which means, angular and other public code is limited to, say, public/ folder.

But, how do you do the sharing then? Well, another thing you should be doing anyway (and luckily it's easy to do) is run a production build. Something like webpack/rollup. You know, tree shaking and all. What it does is it takes your Angular code, and Angular libs from node_modules/, and any other libs your code uses, and bundles it all up in one (or a few) nice file - and you only serve this file to public.

Which again means you'll have to setup to deal with. Say your compilation/build step (what I said above) puts stuff from public/src to public/dist folder. You tell express to use only that code.

And that's basically it. Maybe a few more things, like namespacing your npm scripts better and you should be good.

Of course, while you're developing, you probably have some sort of local angular dev server, which autocompiles your changes in typescript and other files, and reloads the browser. So you could either run that dev server on a separate port or somehow adding tihs compilation step into your dev pipeline for your node server. So you run your node server and whatever's watching for those changes, is also watching for frontend changes to restart or refresh the statically served routes and fire off a browser reload.

That's why I strongly suggest that you take the other, IMHO much better approach. Build the node backend in one folder. Clean and simple, and make tests for your endpoints. Don't bother with unit tests if you don't have those already. Just make sure your GET /api/users returns an array and can do paging and make sure that POST /api/comments asks for proper authentication or permissions.

Than make your frontend app in a separate repository. Also write all the tests and ignore anything on the backend.

That's much easier to reason about. When you're working on backend, you don't care about pixels or form alignment or whatever. Just index the database properly. And when you're done, you go align the pixels and forms and don't have a singlest worry about database indexes. And as a bonus, you could still add another build task to your frontend code, that takes whatever frontend is built currently and copies it to the backend /public folder.

Although I suggest splitting that one too, because again it simplifies deployment and stuff. Don't worry about numbers of servers. You can serve Angular apps off of S3 for probably less than a dolar, or off of a 5$ digital ocean bucket if you really need something advanced. And your node backend is deployed wherever you deploy it anyway. And you sleep much better, trust me.

Also, don't worry about your node_modules sprawling for now. If you have an older android phone, it might be a problem. I mean, if you're developing stuff on it. Because I've just looked at size of all my node modules on this laptop:

find projects -name node_modules -maxdepth 2 | xargs du -shc

...

2.5G total

It has my major work projects, 2 node backends, 3 angular2 projects and some of it is just a copy of itself (for stupid reasons, don't ask), and some random nonrelated stuff.

My main workstation probably has like 6 gigs of node modules. I have a last year's phone and this all could fit on it and still leave ton of space for my photos. Although I don't know what I'd do with it on the phone.

Well, there's my totally oversized and unnecessary, but probably not harmful midnight answer to your question. Just like my node_modules/, oversized and all, but it's not in anybodies' way.

Cheers and ask specific questions if you have them.

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/gR9Yii7oSGQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Zlatko

[Sander Elias]

Hi Tito,

The advice Zlatko gave is solid. Create a separate backend/API server. keep that out of your frontend folder.

Developing nowadays will give you a enormous amount of code in node_modules. For your angular project, this is totally unimportant. Once you build for staging/production, everything is neatly packed in a ./dist folder you can then deploy. No node_modules needed wherever.

That can not be said when you need to deploy a nodejs server. But you only need 1 of those on your production. (and probably also on your dev machine)

While you develop, you can use the CLI, and configure it to proxy all all calls to for example /api/* through to your nodejs Server. This way, you can develop using everything the CLI provides, and still use your nodeJS server for the backend/api calls. 

This has an added bonus, that once you are ready to deploy your app, you can separately host your frontend(for example on AWS S3) from your backend. 

Regards

Sander 

[Tito]

wow this is very thorough, thanks so much.

I am using this repo as my starting point which follows what Sander Elias I think encourages which is following style guide right?

https://github.com/johnpapa/gulp-patterns

 
Thank you so very much!!

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Zlatko

[Tito]

very interesting. so a server dedicated to serving my api. I like that and I used to do that but somewhere in the process of learning angular, I kind of got away from it for some reason. because I was thinking other applications could use the api and it is not tied to one specific application. (consuming application agnostic - caa, make up my own tech acronyms woohoo!) :)

[wax miguel]

I'm 

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Sander Elias]

Hi Tito,

Yes I do encourage programming following the styleguide. At least you should read the guide 2 times or more, even when you disagree with (parts) of it.

Also, even while the gulp-patterns repo is a bit stale, yes it's mostly according to the style-guide. That's not a surprise as my friend John wrote both of those ;)

it is a good way to start your angularJS story. I switched away from gulp to webpack, but getting started is hard enough as it is!

Regards

Sander

[Tito]

Hello,

This is what I currently have. My two apps are ptcmfg and vim. app1 is point at vim and app2 is pointing at ptcmfg. the app.js for vim folder is under vim\src\server and for ptcmfg it is under ptcmfg\src\server. This is where I get cross eyed.

app1.js has

// app1.js

var express = require('express');

const router = require('express').Router();

router.use('/vim', (req, res) => {

res.json({ message: 'Here is something that is specific for this app' });

});

module.exports = { router };

On Wednesday, June 21, 2017 at 1:16:28 AM UTC-7, Zlatko Đurić wrote: