Error message: Error: Failed to load config.yml (404)

[heyalbert]

- Do you want to request a feature or report a bug?
bug

- What is the current behavior?
Not able to load admin panel under localhost:port/admin.

Error loading the CMS configuration
The config.yml file could not be loaded or failed to parse properly.

Error message: Error: Failed to load config.yml (404)

Check your console for details.

console info:

Failed to load resource: the server responded with a status of 404 (Not Found)
cms.js:23510 Uncaught (in promise) Error: Failed to load config.yml (404)
    at cms.js:23510
    at E (cms.js:24281)
    at Generator._invoke (cms.js:24281)
    at Generator.e.(anonymous function) [as next] (http://localhost:8000/cms.js:24281:83648)
    at r (cms.js:23499)
    at cms.js:23499

The config.yml is under public/admin/config.yml but has to be under the public folder in order to be read. This behavior is not correct: He should be able to read the config.yml under /admin as intended. I didn't change anything on my own, this is how it went through installing everything through the https://www.netlifycms.org/ assistant.

- If the current behavior is a bug, please provide the steps to reproduce.
Installed new cms using https://www.netlifycms.org/. Precisely this one: https://app.netlify.com/start/deploy?repository=https://github.com/AustinGreen/gatsby-starter-netlify-cms&stack=cms

- What is the expected behavior?

1. Reading the config.yml file under public/admin.
2. Showing the admin panel.

- Please mention your versions where applicable.

Netlify CMS version: 1.9.1
Browser version: Chrome

Node.JS version: 10.4.1
Operating System: macOS High Sierra

- Please link or paste your config.yml below if applicable.

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}
      - file: "src/pages/products/index.md"
        label: "Products Page"
        name: "products"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "product-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Heading, name: heading, widget: string}
          - {label: Description, name: description, widget: string}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
          - {label: Full_image, name: full_image, widget: image}
          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}

[robertkarlsson]

The error you get seems to be you trying to get to the cms through the url provided when running "npm start".
To load the CMS locally you have to run:

npm run build
npm run serve

In your terminal. The cms can then be accessed through the new served local url.

[heyalbert]

This is really inconvenient. Why I can't use gatsby develop as I'm used, too? Why he can't figure it out by its own, the same he already does with cms.js?

[tech4him1]

@heyalbert This procedure is explained in the README for the starter: https://github.com/AustinGreen/gatsby-starter-netlify-cms. Please ask there if you have questions about their instructions.

By the way, thanks for the detailed bug report!

[erquhart]

This is the same issue as #999, and related to #332.

gatsby develop works fine, you just need to make sure the url has a slash immediately after admin, otherwise Netlify CMS looks for the config at the project root instead of at /admin/.

Works

localhost:8000/admin/#

Doesn't work

localhost:8000/admin#

This issue is so common, we should just hardcode a trailing slash check when the config 404's and provide a link with the trailing slash in the error message for that case.

[joseph-allen]

@erquhart makes the point I just came here to say.

This issue is so common, we should just hardcode a trailing slash check when the config 404's and provide a link with the trailing slash in the error message for that case.

the same issue from almost a year ago #683
this is an issue we should PR to resolve over reminding new users about a very common gotcha

[Paul-dH]

I am a new user and already browsed all github issues reporting the same issue I have. But in none of the issues a sollution is provided, all issues are closed...

I have setup Eleventy with Netlify and the CMS, all builds work as expected but I'm really stuck at the 404 error.

I've also read the #1456 issue that gave this link for a solution Gatsby + Netlify CMS Starter But I can't find a solution in the README.md.

Any help is greatly appreciated, thanks!

[joseph-allen]

@Paul-dH did you try

localhost:8000/admin/#

[Paul-dH]

Hi @joseph-allen, I don't have a local dev environment. I run a repro on Bitbucket and thats connected to Netlify. I wanted to use Netlify as a CMS.

[q-omar]

I'm having the same issue. You can view my folder structure here: https://i.imgur.com/AGOJ3h5.png and the contents of my config.yml

#https://www.netlifycms.org/docs/add-to-your-site/

backend:
  name: github
  repo: https://github.com/jackieluc/insiight
  branch: test # Branch to update (optional; defaults to master)
  site_domain: https://test--insiight.netlify.com/#/
publish_mode: editorial_workflow
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "_posts/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
      - {label: "Body", name: "body", widget: "markdown"}

and index.html are

<!-- https://www.netlifycms.org/docs/add-to-your-site/ -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^2.0.0/dist/cms.css" />
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

I've tried going to http://localhost:8080/admin/#/ via npm start and it doesn't work there. It doesn't work at http://127.0.0.1:8080/admin/#/ when doing npm build preview either. I also tried branch deploys via the Netlify console but https://test--insiight.netlify.com/admin/# (which is our site) doesn't work either.

[tech4him1]

@q-omar We appreciate your input, however, this is a (closed) issue about the Gatsby integration only. Please open your own new issue so that people will see it and can help you. Thanks!

[tinmonkay]

for 11ty, you need to make sure the yaml file gets inside the admin folder inside the generated site, so you need to add it to the addPassthroughCopy.
see https://github.com/surjithctly/neat-starter/blob/master/.eleventy.js for an example