Develop with Gatsby and Netlify CMS locally

There are a number of story about the above topic, but they are in various places. I am writing this piece to put all in one place. My requirement of local development are:

• Running the server in a head-less Ubuntu server. I have a Windows desktop, but I don’t want the server on the machine.
• Acess the Netlify CMS locally, instead of served from Netlify cloud.

My Ubuntu server is running at IP 192.168.2.194 and my browser is on my Windows desktop. Obviously, pointing the browser to http://localhost:8000 wouldn’t work. Neither pointing to http://192.168.2.194:8000. You will get something like this:

Run this command will do the trick:

gatsby develop -H 0.0.0.0

Now you will see this:

If you want to access to CMS Content Manager and point the browser to http://192.168.2.194:8000/admin, you will get this:

To access the admin page, you need to do the following:

npx netlify-cms-proxy-server

and add these lines to the admin/config.yml file:

local_backend:
  allowed_hosts: ['192.168.2.194']

Then you will see this: