netlify-cms-backend-fs v0.4.4
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
or
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 toFileSystemBackendClass
and is aumd
build to use directly as a component see example innetlify-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 (maybebackend-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 tobackend: 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>
OR
<!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.