Skip to content

Commit 7a17672

Browse files
committed
Refined node.js article with updated code and steps
1 parent a52ecc1 commit 7a17672

File tree

1 file changed

+90
-37
lines changed

1 file changed

+90
-37
lines changed
Lines changed: 90 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,138 @@
1+
---
2+
description: >-
3+
Learn how to fetch content and media from your Umbraco Heartcore project
4+
using Node.js and the Umbraco.Headless.Client.NodeJs Library.
5+
---
6+
17
# Node.js Client library
28

3-
In this article you will be able to read about our Node.js Client library. You will be able to see a code sample showing you how to create a client and fetch some data from an Umbraco Heartcore project.
9+
This article showcases how to fetch content and media from your Umbraco Heartcore project using the official Node.js Client Library. If you are unfamiliar with Node.js you can take a look at the [official Node.js Documentation](https://nodejs.org/en/docs/).
10+
11+
## Prerequisites
412

5-
If you are unfamiliar with Node.js you can read more in [the official Node.js documentation](https://nodejs.org/en/docs/).
13+
- [Node.js](https://nodejs.org/en) (version 10 or above) installed on your machine. You can verify the version by running `node -v` in your terminal.
14+
- Access to an Umbraco Heartcore project.
15+
- An API key generated from your Heartcore project. For more information, see the [Backoffice Users and API Keys](../getting-started/backoffice-users-and-api-keys.md) article.
16+
- Basic familiarity with terminal commands and Node.js.
617

7-
{% hint style="info" %}
8-
You will have to have Node.js version 10 or above to be able to work with this client library.
9-
{% endhint %}
18+
## Step 1: Create Content and Media in Your Heartcore Project
1019

11-
## Download and install
20+
1. Log into your Heartcore project on the Umbraco Cloud Portal.
21+
2. Navigate to the Content section and create a new content item, such as a "Home Page." Fill in necessary fields and publish the item.
22+
3. Go to the Media section, upload an image, and ensure it is saved and published.
23+
4. Note the content’s URL and media ID for fetching via the Node.js client.
1224

13-
You can find the Client library on GitHub: [Umbraco Heartcore Node.js](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs).
25+
## Step 2: Initialize a Node.js Project
1426

15-
You can either clone or download the Client library from GitHub or you can install it with npm.
27+
1. Open a terminal or command prompt and navigate to the directory where you want your project to reside.
28+
2. Run the following command to create a `package.json` file:
1629

30+
```bash
31+
npm init -y
1732
```
33+
34+
## Step 3: Install the Client Library
35+
36+
There are two ways to install the Umbraco Headless Client Library:
37+
38+
- Clone or download the [Umbraco.Headless.Client.NodeJs](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs) client library from GitHub.
39+
40+
or
41+
42+
- Run the following command in your terminal:
43+
44+
```bash
1845
npm install @umbraco/headless-client
1946
```
2047

21-
## Node.js Sample
48+
## Step 4: Write the code to Fetch Content and Media
2249

23-
Once you have installed the client library you can create a Client and start fetching data from a project. In the following sample we are fetching content from the root of a project and a media item targeted by its Id, and then logging the results in the console.
50+
1. Create a new file called `app.js` using a text editor (such as Notepad++ or Visual Studio Code) in your project directory.
51+
2. Open the `app.js` file and use the following code template:
2452

2553
```js
26-
//Importing the Client Library
54+
//Importing the Client Library
2755
const { Client } = require('@umbraco/headless-client')
2856

2957
//Connecting to the Heartcore project on Cloud
30-
const client = new Client({ projectAlias: 'demo-headless' })
58+
const client = new Client({
59+
projectAlias: 'your-project-alias',
60+
apiKey: 'your-api-key'
61+
})
3162

32-
//If protection is turned on you will have to add the API Key that has been assigned to your user
33-
client.setAPIKey('')
34-
35-
//Create an async function to fetch all content from the root of the project
63+
//Create an async function to fetch content and media
3664
async function run() {
65+
try {
66+
//Fetch all content from the root
67+
const contentResult = await client.delivery.content.root()
68+
69+
//Fetch a media item by its ID
70+
const mediaResult = await client.delivery.media.byId('your-media-id')
3771

38-
//Getting the content from the method where root is targeted
39-
const contentResult = await client.delivery.content.root()
72+
//Log results
73+
console.log('Content:', JSON.stringify(contentResult, null, 2))
4074

41-
//Getting the content from the method where a media item is targeted by its Id
42-
const mediaResult = await client.delivery.media.byId('b21f3fc4-7d8e-47f7-885b-65b770cb5374')
75+
console.log('Media:', JSON.stringify(mediaResult, null, 2))
4376

44-
//Printing to the console as JSON with indentation for readability
45-
console.log(JSON.stringify(contentResult, null, 2))
46-
47-
console.log(JSON.stringify(mediaResult, null, 2))
77+
} catch (error) {
78+
console.error('Error fetching data:', error.response ? error.response.data : error.message)
79+
}
4880
}
4981

5082
run()
83+
84+
```
85+
86+
## Step 5: Run the Script
87+
88+
1. Open a terminal.
89+
2. Navigate to your project folder and run the following command:
90+
91+
```bash
92+
node app.js
93+
5194
```
5295

53-
## Methods to call the API
96+
## Exploring API Methods
5497

55-
The Node.js library consists of a long list of different methods you can use in order to fetch and manage data from your Umbraco Heartcore project.
98+
The Node.js library provides a variety of methods to fetch and manage data from your Umbraco Heartcore project. These methods allow you to interact with both the Content Delivery API and the Content Management API, depending on your requirements.
5699

57100
### Calls to the Content Delivery API
58101

59-
The methods to use when fetching content or media from the Content Delivery API uses the following convention:
102+
To fetch content or media, use the following convention:
60103

61104
```js
62-
content.delivery.content.root()
105+
client.delivery.content.root();
63106

64-
content.delivery.media.root()
107+
client.delivery.media.root();
65108
```
66109

67-
In the examples above all content / media from the `root` is called. You can also call specific content items by ID or URL, and you can even get related content items by calling e.g. `children()` or `ancestors()`. Find a full list of the available methods for the Content Delivery API on the [sample repository on GitHub](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs#content-delivery).
110+
In the above examples:
111+
112+
- Use `root()` to fetch all content or media from the root level.
113+
- Use `children()` or `ancestors()` to navigate the hierarchy and retrieve related content or media items. You can also fetch specific items directly by their ID or URL.
114+
115+
For a full list of available methods, visit the [Content Delivery API sample repository on GitHub](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs#content-delivery).
68116

69117
### Calls to the Content Management API
70118

71-
When using the Content Management API to manage content, media and the various types in your Umbraco Heartcore project, you need to use the following convention:
119+
To manage content, media, and other types, use the following convention:
72120

73121
```js
74-
content.management.content.create()
122+
client.management.content.create()
75123

76-
content.management.contentType.all()
124+
client.management.contentType.all()
77125
```
78126

79-
In the examples above, the first method shows how to _create new content_ using the Content Management API. The second method gives an example of how to retrieve a list of all available content types. Find a full list of the available methods for the Content Management API on the [sample repository on GitHub](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs#content-management).
127+
In the above examples:
128+
129+
- Use `create()` to add new content.
130+
- Use `all()` to fetch all available content types.
131+
132+
For a full list of available methods, visit the [Content Management API sample repository on GitHub](https://github.com/umbraco/Umbraco.Headless.Client.NodeJs#content-management).
80133

81134
## References
82135

83-
* [The official Node.js documentation](https://nodejs.org/en/docs/)
84-
* [API Documentation for Umbraco Heartcore](../api-documentation/)
85-
* [Create an Umbraco Heartcore project](../getting-started/creating-a-heartcore-project.md)
136+
- [Node.js Documentation](https://nodejs.org/en/docs/)
137+
- [Umbraco Heartcore API Documentation](../api-documentation/README.md)
138+
- [Create an Umbraco Heartcore project](../getting-started/creating-a-heartcore-project.md)

0 commit comments

Comments
 (0)