Home
Support Forums

Setting up CMS with module import?

Up until now I’ve loaded my CMS from a public CDN as detailed in the docs, but I wanted to try to install it via npm as explained by the docs but I just can’t understand how to get it to work.

Am I supposed to create an index.js file somewhere and import it into my HTML file?

// index.js

import CMS from 'netlify-cms-app'
// Initialize the CMS object
CMS.init()
// 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>
    <script type="module" src="index.js"></script>
  </body>
</html>

But this just gives me this error:

Uncaught TypeError: Failed to resolve module specifier "netlify-cms-app". Relative references must start with either "/", "./", or "../".

I’m trying to get Netlify CMS to recognise JSX but so far I’m completely lost even just at the configuration level :cry:

From what I know, you need to use a bundler like Webpack or esbuild and not add the JS to index.js to make it accessible in HTML. It’s either that or maybe I’m missing something.

Turns out you can also do it the “react way”:

import { useEffect } from "react";
import CMS from "netlify-cms-app";
import React from "react";

const Preview = (props) => {
  const entry = props.entry;
  const title = entry.getIn(["data", "title"]) || "";

  return (
    <>
      <h1>{props.widgetFor("title")}</h1>
      {props.widgetFor("body")}
    </>
  );
};

const Admin = () => {
  useEffect(() => {
    CMS.init();
    CMS.registerPreviewTemplate("blog", Preview);
  }, []);

  return (
    <>
    </>
  );
};

export default Admin;

I kind of prefer this :man_shrugging: