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
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 content model. 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.
Create the Docker Container
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
Upload your example to Docker Hub
Step 1: Log into the Docker Hub
docker login
Step 2: Check the image id of the image you created
docker images
Step 3: Tag your image accordingly with your Docker hub user
docker tag bb38976d03cf yourhubusername/verse_gapminder:firsttry
Step 4: Push your image to the Docker hub
docker push yourhubusername/verse_gapminder:firsttry