Search code examples
web-deploymentreact-fullstack

Images upload in React ,Nodejs changing from localhost to production in deployment

In dev mode i stored some photos and i get them buy using img tag with image link as src. also , the api request from server using server url.

how should i make react use the correct url while using in deployment site and not "localhost"

//api 
const url = "http://localhost:5000"
const exampleRouter= axios.create({
  baseURL: `${url}/recipes/public`,
});


//In React components - img work fine 
<img src={http://localhost:5000/users/${user._id}/avatar`} alt"avatr">

its worked perfectly in localhost, now i should deploy to heroku but i dont know how to treat this links ( i have tame many in my project)

I am using in React as FE and Node as BE with (using Express libary)

Solution

  • If it is frontend code

    const l = window.location;
const url=`${l.protocol}//${l.host}:${l.port}`;

    should do the trick. Also, relative paths are a thing.