Gatsby: Default host 127.0.0.1 instead 0.0.0.0

[Necmttn]

in develop mode when you style component with CSS modules background image. it's compress with image webpack loader and in develop mode it's assign to link

.someClass {
    background-image: url(http://0.0.0.0:8000/c93cfad7a3084aa1f3556b351f314ea5.jpg);
    align-items: center;
}

when i'm in develop mode images are not loading from 0.0.0.0:8000 i got error;

Access Denied

You are not allowed to access this page.

after poking around a bit i found if i change host with gatsby develop -H 127.0.0.1 0.0.0.0 to 127.0.0.1 i have no issue.

i think it should be default.

[KyleAMathews]

Are you on windows? It should be using localhost there. See https://github.com/gatsbyjs/gatsby/pull/171

You shouldn't be denied access to 0.0.0.0 generally — curious more about your OS and other setup? Are you on some sort of locked-down corporate device?

[Necmttn]

Nope i'm on OSX siera 10.12 , maybe it's fault of latest macOS update.

[KyleAMathews]

Hmmm... yeah not on Sierra yet.

0.0.0.0 was picked as default as then Gatsby is reachable by non-localhost machines e.g. you're developing on a cloud VM you'd be able to reach your Gatsby instance.

[MoOx]

On Phenomic we listen by default to 0.0.0.0 but open up tabs when starting using localhost, so flexibility for external devices + windows compat.

[michaeljdeeb]

I have a clean install of Sierra (Node v7.1.0 installed via Homebrew) as of last week and followed these steps to attempt to recreate the issue.

1. gatsby new https://github.com/gatsbyjs/gatsby-starter-default
2. Add an image to /pages/
3. Create a rule in /css/markdown-styles.css that references the image for the background
4. Create an element in /pages/markdown.md that is styled by the rule
5. Install image-webpack-loader and add to gatsby-node.js loosely following Usage
6. gatsby develop
7. Open http://0.0.0.0:8000/markdown/ in a browser.

Following these steps I was able to see the image, but I would be happy to test out your site if it's publicly available @Necmttn.

[Necmttn]

I have almost same setup except node -v6.9.1 and step 5. I'm using gatsby's baked loader...

I believe it's something related to Siera 10.12 (16A323)
because I'm also not able to access 0.0.0.0:XXXX with other projects of mine

Seems like there's a new update to Sierra, i will update it tonight and feedback to you guys.

Sorry, I'm not able to open it publicly @michaeljdeeb it's client website.
btw I don't recommend to upgrade to sierra yet it's still buggy and a lot of things get slower 😢

[vinnymac]

I am on Node v6.9.1 and macOS Sierra 10.12.1 and I have no issues with this.
👍 for 0.0.0.0

@Necmttn have you tried creating a new fresh gatsby project with the gatsby new command? Does the problem still occur outside of the one you are working on?

[Necmttn]

Even after updating my macOs. the port 0.0.0.0 still "Access Denied". i guess it's related to my mac settings.

in case someone else faced this problem.
change develop script in package.json

...
"develop": "gatsby develop -H 127.0.0.1",
...

than in your terminal

npm run develop

I'm closing this issue. 🎤 (drops the mic.)

[KyleAMathews]

Strange... but glad there's an easy work around!

[mboudreau]

So, using -H 0.0.0.0 worked for me to access the static website on the network, however, there is an edge case when it comes to webfonts. I have this css:

@font-face {
    font-family: 'Some-Font';
    src: url('Some-Font.eot');
    src: url('Some-Font.woff') format('woff'), url('Some-Font.ttf') format('truetype'), url('Some-Font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

When using it locally, no problem, since webpack (I'm guessing? I'm using gatsby-plugin-sass to compile my css) seems to be prepending the server url in front of the fonts, so it looks like this:

@font-face {
    font-family: 'Some-Font';
    src: url(http://0.0.0.0:8000/static/Some-Font.5d291b72.eot);
    src: url(http://0.0.0.0:8000/static/Some-Font.8017d226.woff) format('woff'), url(http://0.0.0.0:8000/static/Some-Font.9cbbe67e.ttf) format('truetype'), url(http://0.0.0.0:8000/static/Some-Font.a0074379.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

This works in localhost, no issue, but breaks when trying to access it from another device on the network because it will point to a file that doesn't exist on the localhost. I think this could be fixed by simply using relative pathing instead of absolute.

[mawburn]

@mboudreau You posted this a few months ago, were you ever able to find a solution for accessing the images over the local network?

[mboudreau]

@mawburn nope. I've yet to deploy my project to production or used it much over the network, mostly my localhost. It's still annoying though.