Backend and Frontend on same port
I recommend you to separate your service Endpoints in Subdomains
Service Endpoint
The endpoint is a connection point where HTML files or active server pages are exposed. Endpoints provide information needed to address a Web service endpoint. The endpoint provides a reference or specification that is used to define a group or family of message addressing properties and give end-to-end message characteristics, such as references for the source and destination of endpoints, and the identity of messages to allow for uniform addressing of "independent" messages. The endpoint can be a PC, PDA, or point-of-sale terminal Reference: Definition of service endpoint.
For your Frontend endpoint the recommended subdomain is:
- http://
www.example.com - http://example.comFor this case you have to redirect to subdomain
www
For your Backend endpoint you can use whatever you want, but the recommended subdomains for Backend are:
- http://
api.example.com (The most used) - http://
backend.example.com
So, in your case the recommendations are:
- Frontend: http://www.example.com
- Backend: http://api.example.com
You can accomplish that using either a Reverse Proxy like Nginx or getting the Subdomain from the request object in NodeJs.
Nginx is a web server which can also be used as a reverse proxy, load balancer, and HTTP cache. The software was created by Igor Sysoev and first publicly released in 2004. A company of the same name was founded in 2011 to provide support.
First approach
Using Nginx as HTTP load balancer
You can configure Nginx to balance the requests to your server as follow:
http { upstream backend { server localhost:5000; } upstream frontend { server localhost; } server { listen 80; server_name api.example.com; location / { proxy_pass http://backend; } } server { listen 80; server_name www.example.com example.com; location / { proxy_pass http://frontend; } }}Second approach
Use expressjs to get the subdomain from request object.
An array of subdomains in the domain name of the request.
Documentation:
// Host: "tobi.ferrets.example.com"req.subdomains// => ["ferrets", "tobi"]In your case your possible subdomains are: www or api
// Host: "www.example.com"req.subdomains// => ["www"]Or
// Host: "api.example.com"req.subdomains// => ["api"]This is how you have to process the request within your server.js
var subDomain = req.subdomains[0]; if (subdomain === 'api') { processBackendRequest();} else { processFrontendRequest();}
Sure, it's trivial to host both on the same port(s), it's just a question of routing.
For example, using express.js and having static files (CSS, images, HTML, etc) in a folder named public:
const express = require('express')const app = express()app.use('/', express.static('public'))app.get('/backend', (req, res) => res.send('Hello World!'))app.listen(80, () => console.log('Example app listening on port 80!'))If you make a file public/index.html:
<html>HI</html>Then you can get it (the "frontend") by running curl 'localhost:80/':
$ curl 'localhost:80/'<html>HI</html>$You can also access your 'backend':
$ curl 'localhost:80/backend'Hello World!$
The only real way to prevent having to specify a port number is use post 80 for HTTP, or 443 for HTTPS.
If you're running IIS you can have your front end running as a website called "example.com", and then under that website have another "application" called "backend".
All HTTP requests for www.example.com would go to the root website. Requests to www.example.com/backend would route to the "backend" application under the example.com website.
ServerFault may be a more appropriate place to ask IIS questions however.