Skip to content
NodeHive Headless CMS

Demo Frontend

Next.js Starter Template

1. Create a new project

Terminal window
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.

Terminal window
# Drupal Backend
NEXT_PUBLIC_DRUPAL_REST_BASE_URL="https://demo.nodehive.app"
NEXT_PUBLIC_DRUPAL_BASE_URL="https://demo.nodehive.app"
NEXT_IMAGE_DOMAIN="demo.nodehive.app"


# NodeHive
NEXT_PUBLIC_NODEHIVE_SPACE_NAME="nodehive"
NEXT_PUBLIC_NODEHIVE_SPACE_ID=1
NODEHIVE_STARTPAGE_SLUG=/node/1
NODEHIVE_DEFAULT_LANGUAGE=en


# Next.js Frontend
NEXT_PUBLIC_FRONTEND_BASE_URL="http://localhost:3000"

3. Run the project

Terminal window
cd frontend.example.ch
npm 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.

Drupal JSON-API Params

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.