Skip to content

Latest commit

 

History

History

headless-cms

README.md

Headless CMS example

Thanks to Contember platform you can change anything. If you have any questions, we're happy to help in Github Discussions.

How to use this example

You'll need:

  • NPM version 7+ (you can check using npm --version)
  • Docker

🚀 Run Headless CMS locally

  1. Clone this example
npx degit contember/examples/headless-cms headless-cms
  1. Go to headless-cms
cd headless-cms
  1. Install dependencies:
npm install
  1. Start project:
npm start

This command will start Admin application and all docker containers (Contember Engine, Postgres, S3, Mailhog and Adminer). When you are done developing, you can stop docker containers by docker-compose down.

Congratulations, you're done!

Administration UI is now running at http://localhost:1480 and frontend website is running at http://localhost:3000.

🔒 Secure setup

By default frontend has full access to all contember (including updating and deleting anything). To make it secure we need to use token with only limited privileges.

Generate new public api key for frontend website (you can do this later, but frontend website won't work without it):

npm run contember tenant:create-api-key

Then select:

  • Project: headless-cms
  • Role: public
  • Do you want to add another role?: n (no)
  • API key description: anything (e.g. frontend)
  • Are you sure you want to create this API key?: y (yes)

Set NEXT_PUBLIC_TOKEN in headless-cms/website/.env to newly generated API token (replace the default superadmin token) and restart Docker containers (docker-compose restart).

🎢 Deploy

Api and Admin can be deployed to Contember Cloud. See Deploy to Contember Cloud.

Note You should deploy Admin and API to Contember Cloud and then deploy frontend website. This is because frontend website needs to be able to access API in order to work properly.

Frontend website can be deployed to any hosting provider.

Deploy to Vercel

See Deploy Next.js to Vercel.

Warning Be aware that frontend website is in website directory, not in the root directory. So you need to set up the following:

Setting Value
Build Command npm run build-website
Output Directory website/.next
Environment variables
Variable Description
NEXT_PUBLIC_TOKEN API token for public role (you can create new api token from Contember Cloud) 1
NEXT_PUBLIC_API_URL URL of API (e.g. https://api-example.contember.cloud/content/example/live) 2
NEXT_PUBLIC_WEB_URL URL of frontend website (e.g. https://example.com)

You are ready to go!

Footnotes

  1. You can create new API token from Contember Cloud in the project settings. Select project and then click on Create new API token button. Select public role and click on Create API key button. Copy the token and use it as NEXT_PUBLIC_TOKEN environment variable. ↩

  2. You can find API URL in the project settings in Contember Cloud. Select project and then look for Content GraphQL API. Copy the URL and use it as NEXT_PUBLIC_API_URL environment variable. ↩