How to Set Up and Use the Node.js Example App with Contentful

Jul 18, 2022 | Programming

If you’re diving into the world of Contentful, our Node.js example app is the perfect first step. Although the repository is no longer officially maintained as of January 2023, feel free to fork it, modify it according to your needs, and learn the basics of integrating Contentful into your projects.

What is Contentful?

Contentful provides a robust content infrastructure tailored for digital teams. Unlike traditional content management systems, Contentful is built to integrate seamlessly with the modern software stack. This means faster content delivery and management for your digital products.

System Requirements

  • Node.js version 8 or higher
  • Git
  • Contentful CLI (required only for write access)

Getting Started

Here’s how you can set up the Node.js example app to experiment with Contentful:

Clone the Repository

First, you’ll need to clone the repository and install the necessary dependencies:

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

Read-Only Access

For a read-only experience, simply start the Express server:

npm run start:dev

Visit http://localhost:3000 to explore the app.

Read and Write Access (Recommended)

To fully experience Contentful’s capabilities, follow these steps for read and write access:

  1. Install the Contentful CLI: npm install -g contentful-cli.
  2. Log in to Contentful via the CLI: contentful login. If you don’t have an account, it’s easy to create a free account here.
  3. Create a new Contentful space: contentful space create --name "My space for the example app".
  4. Seed your new space with the example content model: contentful space seed -s SPACE_ID -t the-example-app.
  5. Obtain your SPACE_ID, DELIVERY_ACCESS_TOKEN, and PREVIEW_ACCESS_TOKEN from the API section in your Contentful web app.
  6. Edit the variables.env file with your credentials:
  7. NODE_ENV=development
    CONTENTFUL_SPACE_ID=SPACE_ID
    CONTENTFUL_DELIVERY_TOKEN=DELIVERY_ACCESS_TOKEN
    CONTENTFUL_PREVIEW_TOKEN=PREVIEW_ACCESS_TOKEN
    PORT=3000
  8. Start the Express server: npm run start:dev.
  9. Open http://localhost:3000?editorial_features=enabled to view and edit content in the app.

Deploying to Heroku

You can also deploy this app to Heroku using the button below:

Deploy to Heroku

Using Docker

If you prefer, you can run this app in Docker:

  1. Clone the repository as shown earlier.
  2. Build the Docker image: docker build -t the-example-app.nodejs .
  3. Run the Docker container: docker run -p 3000:3000 -d the-example-app.nodejs.
  4. If you have your own Contentful space, override the environment variables accordingly:
  5. 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

Troubleshooting

If you encounter issues while setting up or using the app, consider the following troubleshooting ideas:

  • Ensure that you’ve installed all necessary dependencies and the correct version of Node.js.
  • Check your environment variables to make sure your API keys and Space ID are correctly inputted.
  • For server-related issues, consider checking your terminal for error messages, which can provide clues about what might be going wrong.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Setting up the Node.js example app with Contentful is a fantastic opportunity to grasp the essentials of headless CMS integration. By exploring both read-only and writable setups, you can harness the full potential of Contentful to empower your digital products.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox