How to use netlify-cms-app - 10 common examples

import CMS from "netlify-cms-app"

/**
 * Load Netlify CMS automatically if `window.CMS_MANUAL_INIT` is set.
 */
// eslint-disable-next-line no-undef
if (!CMS_MANUAL_INIT) {
  CMS.init()
} else {
  console.log(
    `\`CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
  )
}

// eslint-disable-next-line no-undef
if (PRODUCTION) {
  /**
   * The stylesheet output from the modules at `modulePath` will be at `cms.css`.
   */
  CMS.registerPreviewStyle(`cms.css`)
} else {
  /**
   * In development styles are injected dynamically via the style-loader plugin
   */

React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // const FileSystemBackend = import('netlify-cms-backend-fs');
      // console.log('FileSystemBackend', FileSystemBackend)
      config.backend = {
        "name": "file-system",
        "api_root": "http://localhost:3000/api"
      }
      CMS.registerBackend('file-system', FileSystemBackend);
    }
    CMS.registerPreviewTemplate('authors', AuthorsPreview);
    CMS.registerEditorComponent(EditorYoutube);
    
    CMS.init({ config });
  })

*/
// eslint-disable-next-line no-undef
if (!CMS_MANUAL_INIT) {
  CMS.init()
} else {
  console.log(
    `\`CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
  )
}

// eslint-disable-next-line no-undef
if (PRODUCTION) {
  /**
   * The stylesheet output from the modules at `modulePath` will be at `cms.css`.
   */
  CMS.registerPreviewStyle(`cms.css`)
} else {
  /**
   * In development styles are injected dynamically via the style-loader plugin
   */
  window.addEventListener(`DOMContentLoaded`, event => {
    const list = document.querySelectorAll(`link[rel='stylesheet']`)
    list.forEach(({ href }) => {
      CMS.registerPreviewStyle(href)
    })
  })
}

React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // const FileSystemBackend = import('netlify-cms-backend-fs');
      // console.log('FileSystemBackend', FileSystemBackend)
      config.backend = {
        "name": "file-system",
        "api_root": "http://localhost:3000/api"
      }
      CMS.registerBackend('file-system', FileSystemBackend);
    }
    CMS.registerPreviewTemplate('authors', AuthorsPreview);
    CMS.registerEditorComponent(EditorYoutube);
    
    CMS.init({ config });
  })

React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // const FileSystemBackend = import('netlify-cms-backend-fs');
      // console.log('FileSystemBackend', FileSystemBackend)
      config.backend = {
        "name": "file-system",
        "api_root": "http://localhost:3000/api"
      }
      CMS.registerBackend('file-system', FileSystemBackend);
    }
    CMS.registerPreviewTemplate('authors', AuthorsPreview);
    CMS.registerEditorComponent(EditorYoutube);
    
    CMS.init({ config });
  })

if (process.env.NODE_ENV === 'development') {
  // config.load_config_file = false
  config.backend = {
    "name": "file-system",
    "api_root": "/api"
  }
  config.display_url = "http://localhost:8000"
  CMS.registerBackend('file-system', FileSystemBackend)
} else {
  config.backend = {
    "name": "github",
    "repo": "ADARTA/gatsby-starter-netlify-cms",
    "branch": "master"
  }
}
CMS.init({config})

CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)

import CMS, { init } from 'netlify-cms-app';
import FileSystemBackend from 'netlify-cms-backend-fs';
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

import BlogPostPreview from './preview-templates/blog-post-preview';

// If running in development
if (process.env.NODE_ENV === 'development') {
  window.CMS_ENV = 'development_overrides'; // Set the CMS_ENV to the development_ overrides.
  CMS.registerBackend('file-system', FileSystemBackend); // Register the FileSystemBackend.
}

CMS.registerWidget('mdx', MdxControl, MdxPreview);
CMS.registerPreviewTemplate('blog', BlogPostPreview);

// Start NetlifyCMS
init();

import CMS from 'netlify-cms-app'

import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import ProductPagePreview from './preview-templates/ProductPagePreview'
import FileSystemBackend from 'netlify-cms-backend-fs'

const config = { }
if (process.env.NODE_ENV === 'development') {
  // config.load_config_file = false
  config.backend = {
    "name": "file-system",
    "api_root": "/api"
  }
  config.display_url = "http://localhost:8000"
  CMS.registerBackend('file-system', FileSystemBackend)
} else {
  config.backend = {
    "name": "github",
    "repo": "ADARTA/gatsby-starter-netlify-cms",
    "branch": "master"
  }
}
CMS.init({config})

CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)

import CMS, { init } from 'netlify-cms-app';
import FileSystemBackend from 'netlify-cms-backend-fs';
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

import BlogPostPreview from './preview-templates/blog-post-preview';

// If running in development
if (process.env.NODE_ENV === 'development') {
  window.CMS_ENV = 'development_overrides'; // Set the CMS_ENV to the development_ overrides.
  CMS.registerBackend('file-system', FileSystemBackend); // Register the FileSystemBackend.
}

CMS.registerWidget('mdx', MdxControl, MdxPreview);
CMS.registerPreviewTemplate('blog', BlogPostPreview);

// Start NetlifyCMS
init();

}

  return (
    
      
        
      
    
  )
}

// Netlify collections that set `widget: mdx` will be able to use this custom
// widget. NOTE: The StyleSheet manager can *only* be injected into the Preview.
// Docs: https://www.netlifycms.org/docs/widgets/

CMS.registerWidget("mdx", MDXWidget, PreviewWindow)

// Start the CMS
init()