NodeHive Visual Editor

NodeHive comes with a visual editor which helps content editors work with content directly from the frontend. To enable the visual editor, the frontend code needs to communicate with NodeHive.

How to configure NodeHive Visual Editor

WIP documentation

1. Copy the full /nodehive folder from https://github.com/NETNODEAG/nodehive-nextjs-starter/tree/main/src/nodehive/* to [yourapp]/app/nodehive/*
2. <Connector> component should be added to the global layout.tsx
3. Copy https://github.com/NETNODEAG/nodehive-nextjs-starter/blob/main/src/app/api/nodehive/revalidate/route.ts to [YOURAPP]/app/api/nodehive/revalidate/route.ts
4. Copy https://github.com/NETNODEAG/nodehive-nextjs-starter/blob/main/src/app/nodehive/login/page.tsx to [YOURAPP]/app/nodehive/login/page.tsx should exist
5. Wrap all editable components with the respective wrapper components
6. Configure form

Reference implementation

The best way to strat is using the reference implementation.

Consult https://github.com/NETNODEAG/nodehive-nextjs-starter/tree/main/src/nodehive to see how visual editor components are used.

Configure SSL on localhost

mkcert -install
mkcert localhost
npm install -g local-ssl-proxy
local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem

Prevent ssl errors (use only for development)

Add the following line to .env file

NODE_TLS_REJECT_UNAUTHORIZED=0