How to set up NetlifyCMS with a pure react app

user_9435624 0
Viewed 3650

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?

netlify-cms netlify reactjs
1 Answers

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.
user_25971140
Related