How can I get rid of a URL in a fetch (to use kind of a variable instead)?

Question

I have this function for submitting code (see gist https://gist.github.com/constantinscum/4ed753dcd681b4758a8500e4b53d925c) and I don't want to write that //https: in every source file. I was thinking about a global variable but it might be a more elegant solution for this. Do you have any idea how to do that? I want to get rid of the localhost domain URL because it will change after the app will be deployed on a server. Thank you!

Answer 1

You should use a proxy to the backend api url, this will allow you to just write the api url without adding server name / domaine

in development you can create setupProxy.js and use http-proxy-middleware to redirect all api calls to the server

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = app => {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    }),
  );
};

and your fetch call will look something like this

 fetch('/api/code/add')

you can read more about setup proxy Here

and for production it will depend on the tools you will use, (Nginx, Node, ...)