contentful / the-example-app.nodejs

Example app for Contentful in node.js

Note: This repo is no longer officially maintained as of Jan, 2023. Feel free to use it, fork it and patch it for your own needs.

The node.js example app

The node.js example app teaches the very basics of how to work with Contentful:

• consume content from the Contentful Delivery and Preview APIs
• model content
• edit content through the Contentful web app

The app demonstrates how decoupling content from its presentation enables greater flexibility and facilitates shipping higher quality software more quickly.

You can see a hosted version of The node.js example app on Heroku.

What is Contentful?

Contentful provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster.

Requirements

• Node 8
• Git
• Contentful CLI (only for write access)

Without any changes, this app is connected to a Contentful space with read-only access. To experience the full end-to-end Contentful experience, you need to connect the app to a Contentful space with read and write access. This enables you to see how content editing in the Contentful web app works and how content changes propagate to this app.

Common setup

Clone the repo and install the dependencies.

git clone https://github.com/contentful/the-example-app.nodejs.git
cd the-example-app.nodejs

npm install

Steps for read-only access

To start the express server, run the following

npm run start:dev

Open http://localhost:3000 and take a look around.

Steps for read and write access (recommended)

Step 1: Install the Contentful CLI

Step 2: Login to Contentful through the CLI. It will help you to create a free account if you don't have one already.

contentful login

Step 3: Create a new space

contentful space create --name 'My space for the example app'

Step 4: Seed the new space with the example content model the-example-app. Replace the SPACE_ID with the id returned from the create command executed in step 3

contentful space seed -s '<SPACE_ID>' -t the-example-app

Step 5: Head to the Contentful web app's API section and grab SPACE_ID, DELIVERY_ACCESS_TOKEN, PREVIEW_ACCESS_TOKEN.

Step 6: Open variables.env and inject your credentials so it looks like this

NODE_ENV=development
CONTENTFUL_SPACE_ID=<SPACE_ID>
CONTENTFUL_DELIVERY_TOKEN=<DELIVERY_ACCESS_TOKEN>
CONTENTFUL_PREVIEW_TOKEN=<PREVIEW_ACCESS_TOKEN>
PORT=3000

Step 7: To start the express server, run the following

npm run start:dev

Final Step:

Open http://localhost:3000?editorial_features=enabled and take a look around. This URL flag adds an “Edit” button in the app on every editable piece of content which will take you back to Contentful web app where you can make changes. It also adds “Draft” and “Pending Changes” status indicators to all content if relevant.

Deploy to Heroku

You can also deploy this app to Heroku:

Use Docker

You can also run this app as a Docker container:

Step 1: Clone the repo

git clone https://github.com/contentful/the-example-app.nodejs.git

Step 2: Build the Docker image

docker build -t the-example-app.nodejs .

Step 3: Run the Docker container locally:

docker run -p 3000:3000 -d the-example-app.nodejs

If you created your own Contentful space, you can use it by overriding the following environment variables:

docker run -p 3000:3000 \
  -e CONTENTFUL_SPACE_ID=<SPACE_ID> \
  -e CONTENTFUL_DELIVERY_TOKEN=<DELIVERY_ACCESS_TOKEN> \
  -e CONTENTFUL_PREVIEW_TOKEN=<PREVIEW_ACCESS_TOKEN> \
  -d the-example-app.nodejs

the-example-app.nodejs's Issues

pm2 run background

I have just install pm2, but when I using pm start background

pm2 start:dev // not work

Could you help how to start application with pm2 ?
Thanks & Regards

CodeSnippets: Select one ore create a selector

hey, if you follow this link: https://example-contentful-theexampleapp-js-gwfjxqxbys.now.sh/courses/example-application/lessons/example-application-locale you see, that all the snippets are currently rendered.

Should we have only one there? Or are you also working on a selector?

Deploy in firebase or netlify

Query, what would be the equivalent command to "npm run build" to be able to implement in a service like Firebase Hosting or Netlify, when adding the repository to Netlify and attaching the npm run start: the command throws me a record with https: localhost: 3000

If someone knows or can help me, or if you do the same, do a deployment in Docker

Slow responsiveness on Website

Hi! Just wondering if there's a reason the content is a tiny bit laggy on the example website. eg when switching between Home and Courses there's a short but noticeable delay. Is this because the website isn't being served via a CDN like most other sites? Just curious

To many eyes

If you click from one lesson to the next and to the next next, they eyes stay, is this intentional?

https://example-contentful-theexampleapp-js-gwfjxqxbys.now.sh/courses/example-application/lessons/example-application-locale

Change meta prop for twitter:card

The meta property for twitter:card has the wrong attribute.

Right now it's: meta(name='twitter:card' value='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')

Should be: meta(name='twitter:card' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')

Leftover dummy text

Hey,

on the settings page there are still some left over dummy texts: Some help text we still need to define Should we remove/update them?

Update Version of event-stream

I'm getting 404 errors on npm install due to missing version of event-stream module (3.3.6). The latest 3.3.x version is 3.3.5 (see: https://www.npmjs.com/package/event-stream/v/3.3.5). After that it jumps to 4.0.0. I had to manually install an older version from the github tarball. Please update the version to avoid these issues.

Rename repo to `the-example-app.js`

Since we agreed on our new name, at somepoint we should reflect it in the name of the repository/internal mentions.

Suggestion: https://github.com/contentful/the-example-app.js

Rename misspelled method

In helpers.js a method is called removeIvalidDataURL should be removeInvalidDataURL

manual described updating variables.env file but was not read by frontend unless forced

actions taken:

-followed step 6 from README.md
-verified that variables.env contain correct api tokens
-frontend kept using default variables from first start
-needed to manually unlink first on /settings (not listed as required action in README.md) as it kept saying preview token was invalid

can be reproduced by temporarily moving variables.env > variables.tmp

• frontend will persistently use variables set in frontend from previous session.

developer experience can be improved by displaying on the server (e.g. npm run start:dev) which variables it is using making the connection to the contentful servers. Additionally a Step 8 "verify on /settings that your credentials are being used"

Use gitignore.io for .gitignore

As kind of best practice, lets switch to a generated .gitignore.

I suggest: https://www.gitignore.io/api/vim%2Ccode%2Clinux%2Cmacos%2Cwindows%2Csublimetext%2Cnode