Serve many apps in the same port

[heltonalves99]

Hi guys, thanks for the attention!

So, I'm trying to serve locally a workspace with 2 apps in the same port, 4200.
I know that I need to pass which app I want to serve.

but if I run that way:
ng serve --project=app1 --port 4200 | ng serve --project=app2 --port 4201

I keeping with the same doubt, running 2 apps in different ports, can access app2 just if a get in 4201 port.

I'm trying by proxy file, when access ':4200/app2' to get into app2.

there is any simplest way to serve many apps just in 4200 port and access them by different routes ?

[Yonet]

@heltonalves99 sounds like you want to have multiple apps access from the same base url example.com/app1,example.com/app2, it that correct?
You can do that by having each app in a library and by creating a main application to route from.

I have created an example for you.You can see the diff here: fe2bed8
You can run the app by running

npm run teach
//or
yarn teach

[pixeldublu]

@Yonet
Small question... is it also possible to move the sub apps in the apps instead of libs like in the sample ?

Thanks in advance!

[ektasawant]

I am trying to run sample app on my local machine. Not able to serve Cart and Product app on same port.
Could any one guide how we can load both apps on same port to access routes of Product app from Cart app?

[Yonet]

@pixeldublu you should be able to but I haven't used nx for a long time now. @FrozenPandaz can answer your questions.

[npmirajkar]

Hi Looking for same solution that @ektasawant has posted. @FrozenPandaz can you help on how we can have two apps served from common port. we do not want to go the lib approach.

[dsjellz]

I would also love to be able to serve multiple apps from the same port.

[gamunax]

Hello everyone,

I had the same question, but I solved it with nginx and docker.

I show you an example.

I have 3 Apps with Angular in nx and run locally:

• App1 => localhost:4200
• App2 => localhost:4100
• App3 => localhost: 4300

As you can see, each project is located in different ports, but what I want is to show the 3 projects in a single port, for this I supported myself with ngnix and docker.

Steps:
1. Open package.json, create scripts for compilation:
(--configuration=(dev, qa or prod for enviroment of endpoints))
(--base-href base for the router and config at nginx)
scripts:{
build-app1: "ng build --project=app1 --configuration=dev",
build-app2: "ng build --project=app2 --configuration=dev --base-href /nameProject2/",
build-app3: "ng build --project=app3 --configuration=dev --base-href /nameProject3/"
}

2. file ngnix:

server {
  listen 80;

  location / {
    alias   /usr/share/nginx/html/app1/;
    index   index.html index.htm;
    try_files   $uri /index.html;
  }

  location /app2 {
    alias   /usr/share/nginx/html/app2;
    index	  index.html index.htm;
    try_files 	$uri $uri/ /app2/index.html;
  }

  location /app3 {
    alias   /usr/share/nginx/html/app3;
    index	  index.html index.htm;
    try_files 	$uri $uri/ /app3/index.html;
  }
}

3. Compile the projects
Using the package.json

• npm run build-app1
• npm run build-app2
• npm run build-app3

4. Config Dockerfile

FROM node:12.18.2 AS builder

COPY . .

RUN npm install

RUN npm run build-app1 && npm run build-app2 && npm run build-app3

FROM nginx:alpine

COPY nginx/*.conf /etc/nginx/conf.d/

COPY --from=builder /**app/dist/apps*** /usr/share/nginx/html/

EXPOSE 8080

CMD ["nginx", "-g", "daemon off;"]

5. Run Docker
step1- Create image: docker build -t local:frontend-0 .
step2 - Run: docker run --name apps-container -d -p 80:80 local:frontend-0

6. Open browser:
input url: localhost and it will show you the main app.
localhost -> app1
localhost/app2 -> app2
localhost/app3 -> app3

That was my solution for me :D

[guilhermepontes]

We solved with a "zones" app with http-proxy-middleware + concurrently

[StallionV]

@guilhermepontes can you share an example

[mwamufiya]

Based on @guilhermepontes suggestion, I was able to get this working in my angular workspace using node express + http-proxy-middleware and modifying my angular projects to run with the --base-href in ng serve

in case this is helpful for anyone else here is what

node express configuration (in your main/index file)
Note: this is using typescript, you you'll need to compile it to javascript prior to starting the express server.
i.e. tsc main.ts/index.ts then node main.js/index.js;

import * as express from 'express';
import { createServer } from 'https';
import { readFileSync} from 'fs';
import { createProxyMiddleware, Filter, Options, RequestHandler } from 'http-proxy-middleware';

// if you require ssl for your setup
const key = readFileSync('[pathToSSLKey');
const cert = readFileSync('[pathToSSLCert]);

const app1Options: Options = { 
  ws: true,
  changeOrigin: true,
  target: 'https://[insertYourAppDomain]:[InsertYourAppPort',  // i.e. https://localhost:4200...
  secure: false,
  ssl: {
    key,
    cert
  },
  followRedirects: true,
};

const app2Options: Options = { 
  ws: true,
  changeOrigin: true,
  target: 'https://[insertYourAppDomain]:[InsertYourAppPort',  // i.e. https://localhost:4201...
  secure: false,
  ssl: {
    key,
    cert
  },
  followRedirects: true,
};

const app = express();

const app1Proxy = createProxyMiddleware(app1Options);
const app2Proxy = createProxyMiddleware(app2Options);
// Define the paths on which you wish to proxy. 
// in my case two different apps, one on 'app1' and one one 'app2' going to different apps served by `ng-serve` 
app.use('/app1', app1Proxy );
app.use('/app2', app2Proxy );

// if you want the server to default to one of the apps on the base "/' path, include the following
app.use( (req, res, next) => {
  if(req.url === '/') {
    res.redirect('app1');
  }
});

//If you aren't using ssl, then don't pass the `{key, cert}` object in `createServer` 
const server = createServer({ key, cert}, app);

// if your your apps that use cookies for sessionId, then ensure you are listening on the same domain as your applications.
// otherwise cookies won't get set
server.listen(3000, '[yourdomain]');  // i.e. localhost or yourcustomdomain.com....

start your angular applications with --base-href to match proxy settings
You will need to ensure you pass the --base-href to match the path defined in the proxy configuration

ng-serve [app1] --base-href=/app1/ 
ng-serve [app2] --base-href=/app2/

Test out your configurations in the browser
go to the domain defined in the your expxress settings and it works

https://[yourDomain]:3000/app1
https://[yourDomain]:3000/app2

Configure your baseUrl in cypress
Update your baseUrl in cypress.json to match the proxy servers path.
https://[yourDomain]:3000

Modifying your cypress request/visit commands to pass the app you need
Now that the proxy server is setup, the final step is updating your cypress commands to pass the app you wish to use

// with redirect request to https://[app1domain]/[additionalPath]
cy.visit('/app1/[additionalPath]');  
cy.request('/app1/[additionalPath]');

// with redirect request to https://[app2domain]/[additionalPath]
cy.visit('/app2/[additionalPath]'); 
cy.request('/app2/[additionalPath]');