loading...

How to check the operation of Gatsby on a smartphone or other device that is under development in a local network

konyu profile image @kon_yu ・1 min read

First things first

I'll show you how to check the Gatsby site that is under development on an actual smartphone or other device.

Prerequisites.

gatsby: 2.19.2

The IP address of the development machine may be different for each OS because it has been tested on mac.

Get the IP address of the development machine

Get an IP address by ifconfig command

> ifconfig
.
....
....
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    options=400<CHANNEL_IO>
    ether xx:xx:xx:xx:xx:xx
    inet6 fe80::18e8:b8eb:c36b:8185%en0 prefixlen 64 secured scopeid 0x6
    inet 192.168.1.xxx netmask 0xffffff00 broadcast 192.168.1.255
    nd6 options=201<PERFORMNUD,DAD>
    media: autoselect
    status: active
... ...
....
....

The above shows that the IP address in the LAN is 192.168.1.xxx.

Add the -H option to Gatsby's development mode

Add 0.0.0.0.0 to the host's options

Defaults to localhost  -H, --host  Set host.

ref: https://www.gatsbyjs.org/docs/gatsby-cli/

> gatsby develop -H 0.0.0.0

Accessing Gatsby's development mode from your smartphone

After confirming that it is running on localhost:8000, you can use a browser on a smartphone connected to Wifi in the LAN to
Based on the IP address acquired earlier, you can access the terminal where the development mode of Gatsby is running on the default 8000 port.

http://192.168.1.xxx:8000

Discussion

pic
Editor guide