TL;DR

For gatsby you will need to specify the hostname by -H and a port -p so that it is not by default running on localhost thus you can access the server from another device that is on the same LAN.

I Have a PC Now

I built a PC recently, mostly for gaming and I placed it on my another table downstairs. I really like it and want to spend more time when I don't play games, which is very good for continue my web developemnt.

pc

The Idea is SIMPLE

The idea is very simple, I can

  • ssh to my Mac laptop running upstairs. (How to setup Linux on Windows? Check this). In this case it is even simpler, powershell can use ssh directly.
  • Use tmux to have a bunch of windows within one session (optional but it is very convenient)
  • Finally I just need a browser to access the started web server to see the rendered page.

1. Enable ssh on Mac

I'd say Mac has a better support for such a need. Unlike Linux that you need to start ssh server by command lines, in Mac:
Go to System Preference -> Share -> Remote login to enable it.

2. Know your host name

Either go to System Preference -> Sharing, you will see it in the field.

Or I assume you have basic command line knowledge that you can just type hostname in a terminal. For example, this is what my mac says:

> hostname
nahnuj-m1.lan

3. Run the Gatsby develop server

Easy:

> gatsby develop
...

Note that if no flags are specified, Gatsby starts the server on localhost and it will say something like this when started successfully:

You can now view <your website name> in the browser.
        http://localhost:8000/

4. Access from another device in browser

Theoritically, you should be able to access the running server from another device that is in the same LAN via a browser.

Normally, we just need to note that the "localhost" is a relative term, it means "this host", in our context, becasue it is the Mac machine upstairs that runs the server, I can visit it in browser via http://localhost:8000, however if I type http://localhost:8000 in the browser that runs on my Windows machine downstairs, it won't work, because there is no such a server running in the Windows.

Yeah, I know it, right? I just need to place the localhost with the hostname I got in step 3, let's go!

Access from Another Device is NOT SIMPLE

OK, normally, either use the hostname or get the assigned ip of the host machine, will just work.

However, it doesn't. Initially I thought it is some firewall settings so I tried following:

  • Turn off firewall, restart Mac
  • Restart my router
  • Turn off Wifi and re-connect

Nothing worked. Until I found this post

Then turns out the fix is really easy now, instead of running gatsby develop, run

> gatsby develop -H $(hostname) -p 8000

then go to http://$(hostname):8000, booom!

What I Learned

DO NOT take localhost for granted, actually I shouldn't simply assume things I already know. Sometimes they just don't work the way supposed to.