featured image

React Netlify No Plugins

React Netlify No Plugins; Netlify CMS and Netlify Identity with my own styling and custom builds

2019-07-062 min read
Profile picture
👋
Developed and Written by: Donald Boulton🎉 0
|

React

🔌 I started using React within Jekyll in March and I was already using netlify and Netlify Identity and Netlify CMS for my personal website so I picked 🔗 react + Netlify CMS Starter for my first react Project, and it was slower than some of the other starters I messed around with.

Identify Widget

React configurations and plugin “netlify-identity-widget”, slowed my react site down even more, Netlify CMS and Netlify Identity Widget both are processed and build with react, which is not needed like a lot of react Plugins.

I stripped Netlify CMS and Netlify identity out of react-config.js plugins and any related plugins out of my package.json and any config references to them and now my react site is super fast like its supposed to be, even with cookie consent, Google adds, including analytics tracking from HotJar, CookieConsent and Google. = all external scripts with out any react plugins I inject preload them in my react Netlify configuration for the react-plugin-netlify in react-config.

Identity Webpack Config

If you are going to use the identity widget npm package then tell react not to build it, as you should do with any stand alone precompiled js, “like Netlify CMS”. Add them as an array.

gatsby-node.js
js

react Config

gatsby-config.js
js

I had incorporated Netlify CMS and Identity into a Jekyll site and did a custom build for Netlify CMS and Netlify Identity widget with my own styling and custom builds, Separate from my Jekyll build so I knew it could be done in react without plugins.

I liked having the ability to edit my pages and posts remotely from maybe a library computer and Netlify CMs works great for me in my react site but not in my react build.

I Forked both Netlify CMS and Identity customized them and added the necessary Custom Webpack builds of each to my /static/admin folder and added them to my index.html admin file.

For Netlify Identity on the front end I added a folder to my Components as NetlifyIdentity and used the custom build script and its .map file for the Identify Widget service.

Building this post

Netlify CMS building this post

Adding to my NavBar

src/components/IdentityWidget.js
jsx

Moving the CMS folder that came with the react Netlify Starter, with the, “cms.js and preview templates”, to the /static/admin/cms folder.

Code index.html

Repo Link

html

CMS index file

Then a index.js file to import and export the Netlify CMS

src/admin/cms.jsx
jsx

External Images

I am using an external service for my Images with uploadcare or you can use cloudinary library and not have to use all the plugins slowing your react build and site speed; “like, “react-plugin-netlify-cms’ and “react-plugin-netlify-identity-widget” “react-remark-relative-images”, “react-remark-copy-linked-files”, “netlify-cms-app”, netlify-cms-media-library-cloudinary”, “netlify-cms-media-library-uploadcare”. No does react have to care about uploaded files or folder configurations for static uploads and/or images in gatbsy.config.

Just include any custom code or external libraries in you CMS or Identity Builds.

I added the preview styles from my Netlify build style sheet using styled components and Bluma with a custom override style sheet on stock Bluma styles for my react Site, so I used my production style sheet i n my admin folder as

src/admin/cms.jsx
jsx