How to set up NetlifyCMS with a pure react app

Question

I have a react.js app, and I'd like to add the netlify CMS backend. I followed the setup tutorial here : https://www.netlifycms.org/docs/add-to-your-site/ but when I navigate to mysite/admin I just get my site. I changed around my react-router, and netlify _redirect file, and tried putting the script tags in the body, like this repo did: https://github.com/Jinksi/netlify-cms-react-starter, but now I just get a white screen. Jinksi seems to have gone to great lengths to make this work, using helmet, etc. On the netlifyCMS site there are examples for using Gatsby, etc, but none that use pure react. Is there an easy way to do this at this point in time? Or should I re-write my website using Gatsby.js?

There is no generic answer to this question. NetlifyCMS is it's own react app and not a component. You will notice in the Jinksi starter, it builds the cms separate from his react website bundle and there is not a route to `admin`, so the cms in this case stands alone as it's own app. — talves, Sep 21 '18 at 15:20
In the netlifyCMS docs, they show where to put the admin folder, for use with many static site building frameworks, and I'm assuming it 'just works' in those cases ... is there a similar solution for reactjs? I'm hoping for something like : put the admin file in this directory, put the relevant script tags in this place in these files, and you're good to go... at least a starting point to begin experimenting. Perhaps that's not possible? — Marchingband, Sep 21 '18 at 18:46
I did a simple example of how you can add the `NetlifyCMS` to a create react app project. There is a more advanced way to extend the CMS into a CRA project, but this will get most people started. — talves, Oct 11 '18 at 23:15

talves · Accepted Answer · 2018-10-13T20:41:42.470

NetlifyCMS does not support being a component in your react app at the time of this answer (v2.1.3). You can add it to your react app using react-router as long as you do not try to Link using react-router. NetlifyCMS is it's own react app and has it's own routing and styling that will interfere with your react app if you import it as a component for now.

Create a Simple Starter (or fork on GitHub)

Create a create-react-app

npx create-react-app netlify-cms-cra-simple
cd netlify-cms-cra-simple

Add your assets for the NetlifyCMS application into public/admin

public/admin/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</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>

public/admin/config.yml

backend:
  name: github
  repo: talves/netlify-cms-cra-simple

media_folder: "public/images"
public_folder: "images"

collections:
  - name: settings
    label: Settings
    files:
      - file: public/manifest.json
        name: manifest
        label: 'Manifest Settings'
        fields:
          - name: short_name
            label: 'Short Name'
            widget: string
            required: true
          - name: name
            label: 'Name'
            widget: string
            required: true
          - name: start_url
            label: 'Start URL'
            widget: string
            default: '.'
            required: true
          - name: display
            label: 'Display Type'
            widget: string
            default: 'standalone'
            required: true
          - name: theme_color
            label: 'Theme Color'
            widget: string
            default: '#000000'
            required: true
          - name: background_color
            label: 'Theme Color'
            widget: string
            default: '#FFFFFF'
            required: true
          - name: icons
            widget: list
            label: 'Icons'
            allow_add: true
            fields:
              - widget: string
                name: src
                label: Source
              - widget: string
                name: sizes
                label: 'Sizes'
              - widget: string
                name: type
                label: 'Mime Type'

Create an images folder at public/images for your static images location

Change the name of the repo in the config.yml and commit the changes to your repository.

Start your cra app using yarn start and navigate to http://localhost:3000/admin/ in your browser.

Adding React-Router (see react-router branch) [Demo]

Add react-router-dom dependency to your project (yarn add react-router-dom) Move App code to a new component called Home. New App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    );
  }
}

export default App;

NOTE:

The config.yml above is only an example of a file collection to edit the manifest.json. Read the docs to setup a proper config.yml for your site.
You will need to setup an authentication provider to use NetlifyCMS on your hosting site.

right, you cannot use a route to `/admin` in the simple example. It does not use `react-router`. Like I originally said, there is no generic answer to this question. If I get time, I may ad a `react-router` example. — talves, Oct 13 '18 at 15:08
Added a simple react-router branch to show how it can work without breaking the react router as long as you do not use an admin `Link` route. — talves, Oct 13 '18 at 20:43
Thank you very much! I have since found my own solution, using https://github.com/Jinksi/netlify-cms-react-starter but I will make this the accepted answer for now, although I may not have time to try your method myself. — Marchingband, Oct 13 '18 at 21:51
It is a great starter example. Jinksi is basically doing the same thing that the example above is doing, but shows a way to extend the cms with a bundle. — talves, Oct 14 '18 at 15:22
Hey Talves, Thanks for this awesome starter! I have things working but am wondering how to get data as I currently dont see anything on your `react-router` branch on https://github.com/talves/netlify-cms-cra-simple that is getting the Netlify CMS content. — Adam Clark, Mar 01 '19 at 20:50
Adam, this starter was just a simple example to show a static route. You would not use the router to go to `/admin`, just create a direct link. There may be better ways to do this soon once we have `netlify-cms` with external exports working and allow for `netlify-cms` to be part of the cra. Currently being worked on. — talves, Mar 04 '19 at 20:10
Thank for your answer! it was very helpful. Can somebody explain the use of the 'collections', I understand the labels are the item that the admin will see, but my question is - how the system knows to change the text of '
' for example? — tomer raitz, May 16 '19 at 10:05

How to set up NetlifyCMS with a pure react app

1 Answers1

Create a Simple Starter (or fork on GitHub)

Adding React-Router (see react-router branch) [Demo]

' for example?