gatsby-theme | M O N O R E P O for Gatsby themes | Theme library

Once you clone the repository you need to install the dependencies. cd to the root of your project and run npm install or yarn install.

gatsby build and gatsby develop, like all Gatsby commands, must be run in the root of your project, where the package.json is located. Otherwise, it will throw an exception.

In your case, run the following in order:

Then I added a 404.html page to the demo/public directory since

The /public folder is the one that is automatically generated in each build from the code from the source (/src) folder. You must not place code there, otherwise, in each build, it will be lost. Take a look at the docs:

/public Automatically generated. The output of the build process will be exposed inside this folder. Should be added to the .gitignore file if not added already.

If you want to create a custom 404 page, you can create one by creating a 404.js file inside src/pages.

Regarding your main issue, the fact that the output spots a localhost:9000 (port 9000) indicates that you used gatsby build, not gatsby develop (otherwise the port would be the 8000). Using the first one (gatsby build) you'll need to rebuild the whole site to see the changes while running gatsby develop you'll see instantly the changes you made (unless you change the data sources) because of the hot reload feature.

Your issue appears because there's no socket.io.js file, so it throws a 404 error (not found).

I'd suggest:

• Refresh the cache by running gatsby clean
• Make sure the yarn install or the npm install finished without errors (all dependencies installed properly)
• Run gatsby develop
• Make some "live" changes and once you feel comfortable enough proceed with the following commands.
• Run again gatsby build
• Serve the site by gatsby serve (this will make your site live locally under localhost:9000)

More recommendations can be found in this GitHub thread.

I'd recommend you, as I pointed in your previous answer, read the gatsby-cli docs to know what you are doing in each command.

First off, I see that you've used sudo in your code block above, which could cause issues, and is probably not what you want.

It seems likely to me that the issue is with peer dependency resolution. Though npm audit will flag potential vulnerabilities, but your application shouldn't fail because you haven't run it. The peer dependencies required by gatsby-theme-apollo-docs@v5.3.1 are gatsby@^2.13.80, react@>=16.9.0, and react-dom@>=16.9.0. But it seems as though you have other packages installed which have incompatible requirements on these libraries (specifically the react). For instance:

Try to clean .cache folder and re-run the dev. Every time you "shadow" or change the components in theme folder, you should do it.

Just run gatsby clean or npm run clean - I saw that script in your repo.

You are mixing configurations between gatsby-node.js and gatsby-config.js. webpack-related configuration must be placed in gatsby-node.js while all plugin-related stuff must be placed in gatsby-config.js. Your final configuration should look like this:

In your gatsby-node.js:

Your data, when using page queries, is always under props.data so your nesting should look like:

As you can see in Shadowing in Gatsby themes docs:

This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.

The shadowing API uses a deterministic file structure approach to know which component should or shouldn't be rendered. In your case, you just can override the CSS props to display it as none, or you just shadow and return an empty component, since shadowing is used to extend Gatsby themes. Create a src/gatsby-theme-blog/components/Switcher/Switcher.js in your project and do something like:

The HTML on the question's page shows that the GIF images for figure 6(a) and 6(b) are not responsive.

Here is the HTML for figure 6(a):

Based on the template of the i18next official documentation you need to provide the locale in your template query: