How to Debug Netlify CMS project locally with connecting to GitHub backend

Netlify + GitHub logo - my design

When I contribute to the Netlify CMS project, I usually need to debug the code to understand it better. Netlify CMS project provides a test server for local development, but if you need to connect to a real Github backend and test your features you need to do some configuration.

So how can you do that?

First of all, you need to create a sample project with Gatsby. In the end, you should have a gatsby project deployed on Netlify cloud and source code in your local development environment.

1- You need to find the netlify-cms/dev-testdirectory. Under this directory, you can see the config.ymlfile.

dev-test/config.yml

In the dev-test/config.ymlfile, the backend name is test-repo. To connect to GitHub, just copy the gatsby starter project’s config.yml file and paste it to the dev-test/config.yml file.

/gatsby-starter-netlify-cms/static/admin/config.yml

2- Run yarn start command in your terminal.

3- Go to localhost:8080 with a browser. (The port can be different. You can see the proper link on the terminal when you run the yarn start command)

4- Add a local storage entry netlifySiteURL of the deployed site URL on Netlify.

For this step;

• Open a console in the browser
• Write the below command and press enter:

localStorage.setItem('netlifySiteURL', 'https://nilaysecretnotebook.netlify.app/');

• To be sure, you can run this command as well:

localStorage.getItem('netlifySiteURL');

5- You should be able to log in via your Netlify Identity email/password.

If you haven’t set any password for your website users (like me.. because I used GitHub login), you should do these steps additionally;

• Login to Netlify and select your gatsby starter project.
• In the Identity section find your user and set the password.

When you go to localhost:8080 , you will see the login form. Enter your credentials. When you checked the console, you might see some errors like this:

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

For the solution, I used the CORS unblock Chrome extension. When you activate it and refresh the site, voilà! now the project works properly.

Enjoy 😉