Как настроить NetlifyCMS с приложением чистого реагирования - PullRequest
Новая
       84

Как настроить NetlifyCMS с приложением чистого реагирования

0 голосов
/ 21 сентября 2018

У меня есть приложениеact.js, и я хотел бы добавить серверную часть CMS netlify.Я следовал инструкции по установке здесь: https://www.netlifycms.org/docs/add-to-your-site/, но когда я перехожу к mysite / admin, я просто получаю свой сайт.Я изменил настройки своего реагирующего маршрутизатора и netlify _redirect file и попытался поместить теги сценария в тело, как это сделал репозиторий: https://github.com/Jinksi/netlify-cms-react-starter,, но теперь у меня просто белый экран.Jinksi, похоже, приложил немало усилий, чтобы сделать эту работу, используя шлем и т. Д. На сайте netlifyCMS есть примеры использования Gatsby и т. Д., Но ни один из них, в которых не используется чистая реакция.Есть ли простой способ сделать это в данный момент?Или я должен переписать свой сайт, используя Gatsby.js?

1 Ответ

0 голосов
/ 12 октября 2018

NetlifyCMS не поддерживает участие в вашем приложении реакции на момент получения этого ответа (v2.1.3).Вы можете добавить его в свое реактивное приложение с помощью activ-router, если вы не пытаетесь Link использовать react-router.NetlifyCMS - это свое собственное приложение для реагирования, которое имеет собственную маршрутизацию и стиль, которые будут мешать вашему приложению для реакции, если вы импортируете его как компонент на данный момент.

Создайте простой стартер ( или форк на 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'

Создайте папку images в public/images для местоположения статических изображений

Измените имя repo в config.yml и передайтеизменения в вашем хранилище.

Запустите свое приложение cra, используя yarn start и перейдите к http://localhost:3000/admin/ в своем браузере.

Добавление React-Router ( см. ветку реакции-маршрутизатора * 1041)*) [Демо]

Добавить 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 для своего сайта.
  • Вам потребуется настроить провайдера аутентификации , чтобы использовать NetlifyCMS на вашем хостинге.сайт.
...