Web - Backend integration (API|Multi Zone)

Frontend frameworks that manage the rendering of a page need fill them with data that comes from an external API generally a Rest API.

Use environment variables to inject the right server host and port into your app.

• Creating a custom variable holding the hostname and port of the API server based on Node env

React script do that by injecting them into the application via the DefinePlugin of Webpack. It allows to create global constants which can be configured at compile time.

Example:

const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'

where: Node - Node Env (Prod,Dev,Test,..)

When the front-end and the API are served from the same host, port, you can create a local proxy to redirect the HTTP request. Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

Example of production deployment

/             - static server returns index.html with the frontend framework (React, Next, ...)
/todos        - static server returns index.html with the frontend framework (React, Next, ...)
/api/todos    - server handles any /api/* requests using the backend implementation

See Proxy implementation

usage example:

• React - Proxy to a backend
• WebPack - Proxy
• Next multizone with micro-proxy