netlify-cms-backend-fs

Custom Backend for NetlifyCMS

Notes:

This library is still in beta!
Version 0.4.0 is a breaking change 🐉.
Version 0.4.0+ is only compatible with builds of netlify-cms-app (2.9.0+).
This is a backend library for NetlifyCMS proposed for file system testing locally during development.
Handy for testing your config files.

To use:

To load dependencies for build

yarn add netlify-cms-backend-fs --dev

npm install netlify-cms-backend-fs --save-dev

Parts of this package

Backend library bundles exist in dist directory.

dist/index.js can be used for global access to FileSystemBackendClass and is a umd build to use directly as a component see example in netlify-cms-starter in this monorepo.

Express server middleware is in the dist/fs directory.

dist/fs/index.js (not bundled) has the node script to be used as middleware for webpack devServer or express server to create the api for development.

How to register with CMS on a static page locally

Copy the package dist/index.js script bundle file into your cms location (maybe backend-fs.js).
Change the index.html page to use the backend as in the example below
Register the backend Class to the CMS as shown below
Change the config.yml backend to backend: file-system or the name you registered
[Webpack] Add devServer middleware to expose the /api path for the file-system API
[Stand Alone Server] Create an express server (example coming soon) to host the /api endpoint

Add script and register in your CMS page

NOTE: v4.x of this library will not work without a current version of netlify-cms-app (see notes at the top of this document).

<head>
  ...
</head>
<body>
  <script>
    /**
     * Global flag to initialize the CMS manually after registering backend and widgets.
     * In most cases, the CMS will render prior to the backend script load which could cause errors.
     * This will make sure the backend is registered prior to the loading of the CMS.
     */
    CMS_MANUAL_INIT = true; 
  </script> 
  <script src="https://unpkg.com/react@16.8.4/umd/react.development.js"></script> 
  <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.development.js"></script> 
  <script type="text/javascript" src='netlify-cms-app.js'></script> 
  <script type="text/javascript" src="backend-fs.js"></script> 
  <script>
    var CMS = NetlifyCmsApp;
    CMS.registerBackend("file-system", FileSystemBackendClass);
    CMS.init(); // Manually starts the CMS on the page after the registration of the backend
  </script> 
</body>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NetlifyCMS</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/react@16.8.4/umd/react.development.js"></script> 
    <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.development.js"></script> 
    <script src="https://unpkg.com/netlify-cms-app@2.9.0/dist/netlify-cms-app.js"></script> 
    <script src="https://unpkg.com/netlify-cms-backend-fs@^0.4.3/dist/index.js"></script> 
    <script>
      var CMS = NetlifyCmsApp;
      CMS.registerBackend("file-system", FileSystemBackendClass)
      CMS.init(); // Manually starts the CMS on the page after the registration of the backend
    </script> 
  </body>
</html>

Start your devServer using the middleware scripts

see the netlify-cms-starter for a create-react-app example in this monorepo.
see ADARTA/netlify-cms-react-example for a full create-react-app example.
see ADARTA/gatsby-starter-netlify-cms for a Gatsby use case example (WIP).

Dependencies

This library requires you to be using NetlifyCMS v2.9.x or above (see notes at the top).

Recommendation: If you are looking to extend NetlifyCMS and run a local file-system setup for development, use the netlify-cms-react-example starter project. It implements the backend as a component and bundles to a custom CMS deployment for your project.

WARNING: This is a development tool. It can safely be used in a repository locally, since it is not used in production code. Commit and push changes before you start using.

Don't forget: code like you're on 🔥

The Netlify Logo is Copyright of Netlify and should not be used without their consent.