0% found this document useful (0 votes)
21 views

ND

This document describes a Node.js example app that demonstrates how to consume and edit content from Contentful using their APIs. It provides instructions for setting up the app with either read-only or read-write access to a Contentful space. For read-write access, it describes how to install the Contentful CLI, create a space, seed it with sample content, and connect the app to it using environment variables.

Uploaded by

Jason J
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
21 views

ND

This document describes a Node.js example app that demonstrates how to consume and edit content from Contentful using their APIs. It provides instructions for setting up the app with either read-only or read-write access to a Contentful space. For read-write access, it describes how to install the Contentful CLI, create a space, seed it with sample content, and connect the app to it using environment variables.

Uploaded by

Jason J
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1 > **Note**: This repo is no longer officially maintained as of Jan, 2023.

2 > Feel free to use it, fork it and patch it for your own needs.
3
4 ## The node.js example app
5
6 [![CircleCI](https://img.shields.io/circleci/project/github/contentful/the-example-app
.nodejs.svg)](https://circleci.com/gh/contentful/the-example-app.nodejs)
7
8 The node.js example app teaches the very basics of how to work with Contentful:
9
10 - consume content from the Contentful Delivery and Preview APIs
11 - model content
12 - edit content through the Contentful web app
13
14 The app demonstrates how decoupling content from its presentation enables greater
flexibility and facilitates shipping higher quality software more quickly.
15
16 <a href="https://the-example-app-nodejs.herokuapp.com/" target="_blank"><img
src="https://images.contentful.com/qz0n5cdakyl9/4GZmvrdodGM6CksMCkkAEq/700a527b8203d4d
3ccd3c303c5b3e2aa/the-example-app.png" alt="Screenshot of the example app"/></a>
17
18 You can see a hosted version of `The node.js example app` on <a
href="https://the-example-app-nodejs.contentful.com/" target="_blank">Heroku</a>.
19
20 ## What is Contentful?
21
22 [Contentful](https://www.contentful.com) 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.
23
24 ## Requirements
25
26 * Node 8
27 * Git
28 * Contentful CLI (only for write access)
29
30 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.
31
32 ## Common setup
33
34 Clone the repo and install the dependencies.
35
36 ```bash
37 git clone https://github.com/contentful/the-example-app.nodejs.git
38 cd the-example-app.nodejs
39 ```
40
41 ```bash
42 npm install
43 ```
44
45 ## Steps for read-only access
46
47 To start the express server, run the following
48
49 ```bash
50 npm run start:dev
51 ```
52
53 Open [http://localhost:3000](http://localhost:3000) and take a look around.
54
55
56 ## Steps for read and write access (recommended)
57
58 Step 1: Install the [Contentful CLI](https://www.npmjs.com/package/contentful-cli)
59
60 Step 2: Login to Contentful through the CLI. It will help you to create a [free
account](https://www.contentful.com/sign-up/) if you don't have one already.
61 ```
62 contentful login
63 ```
64 Step 3: Create a new space
65 ```
66 contentful space create --name 'My space for the example app'
67 ```
68 Step 4:
[Seed](https://github.com/contentful/contentful-cli/tree/master/docs/space/seed) the
new space with the example content model
[`the-example-app`](https://github.com/contentful/content-models/tree/master/the-examp
le-app). Replace the `SPACE_ID` with the id returned from the create command executed
in step 3
69 ```
70 contentful space seed -s '<SPACE_ID>' -t the-example-app
71 ```
72 Step 5: Head to the Contentful web app's API section and grab `SPACE_ID`,
`DELIVERY_ACCESS_TOKEN`, `PREVIEW_ACCESS_TOKEN`.
73
74 Step 6: Open `variables.env` and inject your credentials so it looks like this
75
76 ```
77 NODE_ENV=development
78 CONTENTFUL_SPACE_ID=<SPACE_ID>
79 CONTENTFUL_DELIVERY_TOKEN=<DELIVERY_ACCESS_TOKEN>
80 CONTENTFUL_PREVIEW_TOKEN=<PREVIEW_ACCESS_TOKEN>
81 PORT=3000
82 ```
83
84 Step 7: To start the express server, run the following
85 ```bash
86 npm run start:dev
87 ```
88 Final Step:
89
90 Open
[http://localhost:3000?editorial_features=enabled](http://localhost:3000?editorial_fea
tures=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.
91
92 ## Deploy to Heroku
93 You can also deploy this app to Heroku:
94
95 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
96
97
98 ## Use Docker
99 You can also run this app as a Docker container:
100
101 Step 1: Clone the repo
102
103 ```bash
104 git clone https://github.com/contentful/the-example-app.nodejs.git
105 ```
106
107 Step 2: Build the Docker image
108
109 ```bash
110 docker build -t the-example-app.nodejs .
111 ```
112
113 Step 3: Run the Docker container locally:
114
115 ```bash
116 docker run -p 3000:3000 -d the-example-app.nodejs
117 ```
118
119 If you created your own Contentful space, you can use it by overriding the following
environment variables:
120
121 ```bash
122 docker run -p 3000:3000 \
123 -e CONTENTFUL_SPACE_ID=<SPACE_ID> \
124 -e CONTENTFUL_DELIVERY_TOKEN=<DELIVERY_ACCESS_TOKEN> \
125 -e CONTENTFUL_PREVIEW_TOKEN=<PREVIEW_ACCESS_TOKEN> \
126 -d the-example-app.nodejs
127 ```

You might also like