How can I host multiple apps under one domain name?

Something along the lines of below should get you started if you decide to use nginx. This is a very basic setup. You may need to tweak it quite a bit to suit your requirements.

apps.domain.com will serve index.html from /var/www

apps.domain.com/app1 will server index.html from /var/www/app1

apps.domain.com/app2 will server index.html from /var/www/app2

apps.domain.com/app3 will server index.html from /var/www/app3

http {  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                  '$status $body_bytes_sent "$http_referer" '                  '"$http_user_agent" "$http_x_forwarded_for"';  access_log  /var/log/nginx/access.log  main;  sendfile            on;  tcp_nopush          on;  tcp_nodelay         on;  keepalive_timeout   65;  types_hash_max_size 2048;  include             /etc/nginx/mime.types;  default_type        application/octet-stream;  index               index.html;  include /etc/nginx/conf.d/*.conf;  server {    listen       80 default_server;    listen       [::]:80 default_server;    server_name  apps.domain.com;    root         /var/www;    # Load configuration files for the default server block.    include /etc/nginx/default.d/*.conf;    location / {    }    location /app1 {    }    location /app2 {    }    location /app3 {    }        error_page 404 /404.html;        location = /40x.html {    }    error_page 500 502 503 504 /50x.html;        location = /50x.html {    }}

I initially solved this problem using nginx. But, I was very unhappy with that because I needed to pay for a server, and needed to set up the architecture for it etc.

The easiest way to do this, that I know of today, is to make use of URL rewrites. E.g. Netlify rewrites, Next.js rewrites.

Rewrites allow you to map an incoming request path to a different destination path.

Here is an example usage in my website.

Just one addition: if you're hosting the apps on an external server you might want to setup nginx and use the proxy plugin to forward incoming requests from your nginx installation to the external webserver:

web-browser -> nginx -> external-web-server

And for the location that needs to be forwarded:

location /app1 {   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   proxy_set_header Host $http_host;   proxy_redirect off;   proxy_pass https://url-of-external-webserver;}