Can gatsby develop *not* include host and port for images?

[achekulaev]

I have Gatsby 1.1.51 development server running like this in the docker container

gatsby develop --host=0.0.0.0 --port=80

I access the site by another IP.
The site is not accessible by 0.0.0.0 from my host.

The problem is all the assets that I use

import pic01 from '../assets/images/pic01.jpg'

...

<img src={pic01} alt="" />

are rendered with hostname in them.

Like this pic01 will get rendered as http://0.0.0.0:80/static/pic01.b9959e16.jpg

---

Question:

Can I tell gatsby develop to not include that hostname and just use relative paths for all assets i.e. /static/pic01.b9959e16.jpg ?

[pieh]

I'm not sure why (and if) this is needed - but if You would like to try changing it - I think here's place where host is added to paths -

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 90 to 92 in fcc5019

	publicPath: `${program.ssl ? `https` : `http`}://${
	program.host
	}:${webpackPort}/`,

[achekulaev]

@pieh
Let me know if I can describe the issue better, because I thought my explanations were pretty detailed.

Re-capping what I said above, it is needed because for gatsby develop (Gatsby CLI) the host is 0.0.0.0, while for my browser the host is something.locahost and it's IP is different. This is how Docker or any other Virtual Machine works, it has different IP addresses on the "inside" and on the "outside" (example image that shows how it works for Docker). You have related issues in the issue queue and an issue to track possible creation of a Docker image for Gatsby. It will never be possible unless current issue is resolved.

Regarding the solution. I have taken a look at the piece of code you mentioned. It seems to be related to the JS files, while I have issues with image:

import pic01 from '../assets/images/pic01.jpg'

in gatsby develop mode will get rendered as http://0.0.0.0:80/static/pic01.b9959e16.jpg while I want it to render as /static/pic01.b9959e16.jpg

Correct me if I'm wrong but changing the line 91 in webpack.config.js will not help me with image paths.

[achekulaev]

For the time being I changed the line that pieh advised above.
From

publicPath: `${program.ssl ? `https` : `http`}://${program.host}:${webpackPort}/`,

to

publicPath: `/`,

It seems to cover all assets including images.

[dgopsq]

I have this problem as well. Instead of changing an internal file, a better (but still a workaround I think) solution is adding this piece of code in the gatsby-node.js file in the root directory of your project:

exports.modifyWebpackConfig = ({config, stage}) => {
  switch(stage) {
    case 'develop':
      config._config.output.publicPath = `/`;
      break;
  }
};

[frankf-cgn]

I think this is solved in v2 by setting an environment variable GATSBY_WEBPACK_PUBLICPATH

[hsribei]

Thanks @dgopsq and @frankf-cgn for the tips. I got it to work by adding this to gatsby-node.js:

if (process.env.NODE_ENV === 'development') {
  process.env.GATSBY_WEBPACK_PUBLICPATH = '/'
}

[hugo-marques-m3]

@frankf-cgn That flag is also in V1 afaik.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[ivanoats]

Thank you all for the solutions. I am just commenting in case anyone else searches for this problem. It is the solution I needed to run gatsby develop on a cloud server that I connect to from my iPad for development.

[kennu]

This is still happening to me when I use gatsby develop --host 0.0.0.0 to bind the listener to the local network. It doesn't really make sense to load images from http://0.0.0.0 by default in that situation. The workaround by @hsribei works (thanks), but I think the default should be fixed.

[DSchau]

@kennu this is likely something different with your personal environment setup.

Does this issue also persist in something like e.g. create-react-app?

[kennu]

I realized the project was using an older version of Gatsby, sorry for the trouble. Images are working fine with 2.3.16.

If anyone else stumbles here from google because of the 0.0.0.0 issue, make sure you upgrade Gatsby first.