What are possible backend integrations method? API , Multi Zone,


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

Possibilities Support different host Support same host Description
Environment variables only Yes Yes cors must be relaxed on the backend
Proxy No Yes Emulate as if the backend and frontend requests are served from the same host (hostname+port)


Environment variables

You can use environment variables to inject the right configuration at build time.


  • With Javascript, all building engine set the node env variable to define the target environment. For example to inject a server host and port into your app.
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
  • Your building engine also allows injecting environment variables, check their documentation

HTTP Proxy

You can create a local proxy to redirect the HTTP request to your API HTTP server. You stay on the same origin and you avoid the cross-origin mechanism.

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

All building engine allows the configuration of a proxy with their development server, check their documentation. Example:

In production, see Proxy implementation

Discover More
Node - Node Env (Prod,Dev,Test,..)

NODE_ENV is a environment variable that contains the type of environment the code run on. NODE_ENV=development NODE_ENV=production NODE_ENV=test Example within the script of package.json...
React - Fetch

in react that fetch data from an API endpoint Class Component: see Function Component: see
React - Proxy to a backend

How to proxy request to a backend in React. To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example: ...
Testing Infrastructure
Testing - Mock server (Mock Backend)

mock server are backend application that mocks a real one by responding to request with pre-defined result. They are used mainly in the development of web application in order to mock a Web service (such...
Web - Single page application (SPA)

A Single Page Applications (SPAs) isone HTML page where the modification due to user interaction is completely managed by the browser script (ie javascript) Static web apps that require only a single...
WebPack - Proxy

The proxy configuration of the dev server is useful for backend integration. Because Webpack passes all the proxy configuration to http-proxy-middleware,...
Card Puncher Data Processing
What is the web ? (www, w3)

This page explains the history and the technologies made THE web.

Share this page:
Follow us:
Task Runner