Can you use Netlify CMS with a pure react app?

Question

I have a React application deployed on Amplify (which I am happy to port over to Netlify), and I want to put Netlify CMS on it to make managing content easier.

It seems that everywhere I look, I see people using static site generators when setting up with Netlify, and information on incorporating Netlify CMS with an already existing React app is very limited.

Is it possible to use Netlify with a pure react app; no generators or any other things.

TIA

score 1 · Accepted Answer · answered Aug 26 '22 at 18:55

Absolutely!

The "how" is going to depend on your app, the kind of content you'll have, and how you want to structure it, but Netlify CMS is very customizable in that regard.

The first step will be to have a dedicated page where you'll be loading in Netlify CMS.

Once you're set up, look into the configurations options, and more precisely in the collections setting where most of the magic will happen.

Here's an example from the official documentation tweaked to use .json files instead of .yml:

collections:
  - label: "Pages"
    name: "pages"
    extension: "json"
    files:
      - label: "About Page"
        name: "about"
        file: "content/about.json"
        fields:
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Intro", name: "intro", widget: "markdown"}
          - label: "Team"
            name: "team"
            widget: "list"
            fields:
              - {label: "Name", name: "name", widget: "string"}
              - {label: "Position", name: "position", widget: "string"}
              - {label: "Photo", name: "photo", widget: "image"}
      - label: "Locations Page"
        name: "locations"
        file: "content/locations.json"
        fields:
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Intro", name: "intro", widget: "markdown"}
          - label: "Locations"
            name: "locations"
            widget: "list"
            fields:
              - {label: "Name", name: "name", widget: "string"}
              - {label: "Address", name: "address", widget: "string"}

Then it's up to you to grab that data from within your app.

If you have more complex and/or dynamic content (like a blog), you might wanna use the more traditional folder collection type instead where each new entry will be its own file. Although that will require a bit more work on the front-end side to use the data, at which point you might wanna consider using something like Next.js to make your life easier.

Hope this helps!

Can you use Netlify CMS with a pure react app?

1 Answers1