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

About

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

Environment variables

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

Example:

• 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
  • For example, Webpack has the DefinePlugin

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:

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

In production, see Proxy implementation