如何使用纯反应应用程序设置 NetlifyCMS答案

【问题标题】：How to set up NetlifyCMS with a pure react app如何使用纯反应应用程序设置 NetlifyCMS
【发布时间】：2019-02-25 15:13:17
【问题描述】：

我有一个 react.js 应用，我想添加 netlify CMS 后端。我按照这里的设置教程进行操作：https://www.netlifycms.org/docs/add-to-your-site/ 但是当我导航到 mysite/admin 时，我只是得到了我的网站。我改变了我的 react-router 和 netlify _redirect 文件，并尝试将脚本标签放在正文中，就像这个 repo 所做的那样：https://github.com/Jinksi/netlify-cms-react-starter，但现在我只是得到一个白屏。 Jinksi 似乎已经竭尽全力完成这项工作，使用头盔等。在 netlifyCMS 网站上有使用 Gatsby 等的示例，但没有使用纯反应的示例。目前有没有简单的方法可以做到这一点？还是应该使用 Gatsby.js 重写我的网站？

【问题讨论】：

这个问题没有通用的答案。 NetlifyCMS 是它自己的反应应用程序，而不是一个组件。你会注意到在 Jinksi 启动器中，它构建了与他的 react 网站包分开的 cms，并且没有到 admin 的路由，因此在这种情况下 cms 独立于它自己的应用程序。
在 netlifyCMS 文档中，它们显示了 admin 文件夹的放置位置，用于许多静态站点构建框架，我假设它在这些情况下“正常工作”......有没有reactjs的类似解决方案？我希望有这样的东西：把管理文件放在这个目录中，把相关的脚本标签放在这些文件的这个地方，你就可以开始了……至少是开始试验的起点。也许这不可能？
我做了一个简单的例子来说明如何将NetlifyCMS 添加到创建反应应用程序项目中。有一种更高级的方法可以将 CMS 扩展到 CRA 项目中，但这会让大多数人开始。

标签： reactjs netlify netlify-cms

【解决方案1】：

NetlifyCMS 在回答此问题时（v2.1.3）不支持成为您的反应应用程序中的组件。只要您不尝试使用 Link 使用 react-router，就可以使用 react-router 将其添加到您的反应应用程序中。 NetlifyCMS 是它自己的 react 应用程序，并且有自己的路由和样式，如果您现在将其作为组件导入，则会干扰您的 react 应用程序。

创建一个简单的启动器 (or fork on GitHub)

创建create-react-app

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

将 NetlifyCMS 应用程序的资产添加到 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'

在public/images 为您的静态图像位置创建一个images 文件夹

更改config.yml 中repo 的名称并将更改提交到您的存储库。

使用 yarn start 启动您的 cra 应用，然后在浏览器中导航到 http://localhost:3000/admin/。

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

将 react-router-dom 依赖添加到您的项目 (yarn add react-router-dom) 将App 代码移动到名为Home 的新组件中。新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;

注意：

上面的config.yml 只是用于编辑manifest.json 的文件集合的一个示例。阅读docs 为您的网站设置正确的config.yml。
您需要setup an authentication provider 才能在您的托管站点上使用NetlifyCMS。

【讨论】：

不会 react-router 破坏这个吗？
对，在简单示例中，您不能使用到/admin 的路由。它不使用react-router。就像我最初所说的那样，这个问题没有通用的答案。如果我有时间，我可能会发布一个react-router 示例。
添加了一个简单的 react-router 分支来展示它如何在不破坏 react 路由器的情况下工作，只要您不使用管理员 Link 路由。
非常感谢！此后我找到了自己的解决方案，使用github.com/Jinksi/netlify-cms-react-starter，但我暂时将其作为可接受的答案，尽管我可能没有时间亲自尝试您的方法。
这是一个很好的入门示例。 Jinksi 基本上和上面的例子做的一样，但是展示了一种用 bundle 扩展 cms 的方法。