Demo Frontend
Next.js Starter Template
1. Create a new project
npx create-next-app frontend.example.ch -e https://github.com/NETNODEAG/nodehive-nextjs-starter/tree/main
2. Copy the .env.example file
Copy the .env.example
file to .env.local
and adjust the values.
# Drupal BackendNEXT_PUBLIC_DRUPAL_REST_BASE_URL="https://demo.nodehive.app"NEXT_PUBLIC_DRUPAL_BASE_URL="https://demo.nodehive.app"NEXT_IMAGE_DOMAIN="demo.nodehive.app"
# NodeHiveNEXT_PUBLIC_NODEHIVE_SPACE_NAME="nodehive"NEXT_PUBLIC_NODEHIVE_SPACE_ID=1NODEHIVE_STARTPAGE_SLUG=/node/1NODEHIVE_DEFAULT_LANGUAGE=en
# Next.js FrontendNEXT_PUBLIC_FRONTEND_BASE_URL="http://localhost:3000"
3. Run the project
cd frontend.example.chnpm run dev
4. Activate the NodeHive Frontend Edit
You can login into the Frontend, to see the NodeHive toolbar and start to edit content and settings much faster.
Go to http://localhost:3000/nodehive/login
and login with the your credentials
5. Start developing
You can start developing your frontend now. The NodeHive backend is already configured and you can start to query the data from the backend.
Config files
jsonapi-config.ts
This files contains the configuration for the jsonapi client. You can define here the entity types and the fields you want to use in your frontend. It allows you to query and filter resources.
NodeHive Integration
export const NodeHiveConfig = { entities: { 'node-page': { addFilter: [['status', '1']], addFields: ['title', 'field_media', 'field_paragraphs'], addInclude: ['field_media.field_media_image', 'field_paragraphs'], }, 'node-article': { addFields: ['title', 'field_tags'], addInclude: ['field_tags'], },
'nodehive_fragment--space_logo': { addFilter: [['status', '1']], addFields: ['title', 'field_logo'], addInclude: ['field_logo'], }, },};
space-config.ts
This file contains the configuration for the space. You can define the site name, the default metatags, favicons and open graph tags.
18n-config.ts
This file contains the configuration for the i18n. You can define the languages and the default language.
Frontend Stack
We recommend using Next.js for your frontend. It is a great framework for building modern web applications. But you can use any frontend technology you like. The NodeHive backend offers a range of apis you need to get familiar.