netlify cms react starter

Netlify CMS + React Starter

Warning Netlify CMS is no longer being maintained, therefore I won't be maintaining this project.
See decaporg/decap-cms#6503.
Both Netlify CMS and this project both work for the most part (as of Nov 2022), albeit with some outdated approaches e,g, React class components.

A starter project for creating lightning-fast, offline-first websites with Netlify CMS and React.

• Create React App
• React Router for routing
• React Helmet for document titles, descriptions, meta
• React Snapshot for pre-rendering to static html so it works without Javascript ️
• Netlify CMS for content management

I aim to include commonly used components and best-practices e.g. forms, settings, tags, lazy-loading images, etc.

Get going

1. Hit the Deploy to Netlify button. This will:

• Clone the repo into your Github account
• Create you a new project on Netlify, build & deploy

1. Once your Netlify project has been created, check a couple of settings:

• Enable Identity
• Change Registration Preferences to Invite Only
• Enable Git Gateway

1. Invite users (probably yourself) to enable admin access

• Open the Identity tab and hit Invite Users

Show me the CMS!

The CMS lives at __YOUR_SITE_NAME__.netlify.com/admin.

Developing

1. Clone your repo to your local machine

2. Install dependencies

yarn or npm install

1. Run the development server

yarn start or npm run start

If you are adding or editing content locally in the CMS, a couple of things to note:

1. Changes will be pushed to the remote repo.

2. You will be prompted to enter your site's url, this is necessary for Netlify Identity to manage user login. This is stored in localStorage, so you might have to empty your browser cache if you are switching projects but remaining on localhost:3000.

Editing CMS fields

The Netlify CMS configuration is located in public/admin/config.yml. This is where you will configure the pages, fields, posts and settings that are editable by the CMS.

Find out more in the Netlify CMS Docs.

See also

Netlify CMS Docs
Netlify CMS Repo
Hyperstatic – the same starter project minus Netlify CMS
Gatsby + Netlify CMS Starter (Gatsbro)