Understanding Custom Previews

Hello!

I am having a hard time setting up Custom Previews in the Netlify CMS Admin page. My styles render correctly on the site but not in the editor. Here are the relevant files I have set up.

Netlify CMS plugin in gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Ohmni Template`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    siteUrl: 'https://example.com',
    image: 'https://lengstorf.com/images/jason-lengstorf.jpg',
    author: `@gatsbyjs`,
    organization: {
      name: 'Example, Inc.',
      url: 'https://example.com',
      logo: 'https://lengstorf.com/android-chrome-512x512.png',
    },
    social: {
      twitter: '@jlengstorf',
      fbAppID: '',
    },
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content/`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 2048,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
       resolve: `gatsby-plugin-typography`,
       options: {
         pathToConfigModule: `src/utils/typography`,
       },
     },
     {
       resolve: 'gatsby-plugin-netlify-cms',
       options: {
         modulePath: `${__dirname}/src/cms/cms.js`,
         stylesPath: `${__dirname}/src/global.scss`
       },
     },
     `gatsby-plugin-offline`,
     "gatsby-plugin-netlify",
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

cms.js file, I only have the index page because that is what I am testing.

import CMS from 'netlify-cms-app'

import IndexPagePreview from './preview-templates/IndexPagePreview'

CMS.registerPreviewTemplate('index', IndexPagePreview)

Not sure if my page.json file will help but here it is.

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "codemirror": "^5.52.0",
    "gatsby": "^2.19.22",
    "gatsby-cli": "^2.9.0",
    "gatsby-image": "^2.2.41",
    "gatsby-plugin-manifest": "^2.2.42",
    "gatsby-plugin-netlify": "^2.1.33",
    "gatsby-plugin-netlify-cms": "^4.2.1",
    "gatsby-plugin-offline": "^3.0.35",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-sass": "^2.1.29",
    "gatsby-plugin-sharp": "^2.4.5",
    "gatsby-plugin-typography": "^2.3.22",
    "gatsby-remark-copy-images": "^0.2.1",
    "gatsby-remark-copy-linked-files": "^2.1.37",
    "gatsby-remark-images": "^3.1.44",
    "gatsby-remark-relative-images": "^0.2.3",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-remark": "^2.6.53",
    "gatsby-transformer-sharp": "^2.3.16",
    "netlify-cms-app": "^2.11.32",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
    "react-redux": "^4.4.10",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19",
    "typography-theme-kirkham": "^0.16.19"
  },
  "devDependencies": {
    "install-peers": "^1.0.3",
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Link to my repo

I do not how custom preview takes styles in the first place? I started my project using the default netlify cms gatsby template as a reference but after days of looking at it I don’t understand where some of the styles are coming from. I see inline styles and those make sense but that is not the whole picture. Can someone enlighten me on this?

Hi @byebyers and welcome to the community :slight_smile:
For file collections you’ll need to use name of the file when registering the template.
See fix: cms preview template by erezrokah · Pull Request #1 · byebyers/ohmni-gatsby-template · GitHub and Creating Custom Previews | Netlify CMS | Open-Source Content Management System.

CSS are loaded automatically via the cms plugin (it runs Webpack on the cms.js file):

Thank you @erez And I knew that it was something simple. For those who don’t understand. The solution was to change

CMS.registerPreviewTemplate('index', IndexPagePreview)

to

CMS.registerPreviewTemplate('home', IndexPagePreview)

“home” is referenced as “name” in my Netlify confilg.yml file

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
        label: "Home"
        name: "home"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "home-page"}
          - {label: "Banner", name: "banner", widget: "image"}
          - {label: "Heading", name: "heading", widget: "string"}
          - {label: "Subheading", name: "subheading", widget: "markdown"}
1 Like