|
| 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 | + |
1 | 7 | # Node.js Client library |
2 | 8 |
|
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 |
4 | 12 |
|
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. |
6 | 17 |
|
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 |
10 | 19 |
|
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. |
12 | 24 |
|
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 |
14 | 26 |
|
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: |
16 | 29 |
|
| 30 | +```bash |
| 31 | +npm init -y |
17 | 32 | ``` |
| 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 |
18 | 45 | npm install @umbraco/headless-client |
19 | 46 | ``` |
20 | 47 |
|
21 | | -## Node.js Sample |
| 48 | +## Step 4: Write the code to Fetch Content and Media |
22 | 49 |
|
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: |
24 | 52 |
|
25 | 53 | ```js |
26 | | -//Importing the Client Library |
| 54 | + //Importing the Client Library |
27 | 55 | const { Client } = require('@umbraco/headless-client') |
28 | 56 |
|
29 | 57 | //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 | +}) |
31 | 62 |
|
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 |
36 | 64 | 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') |
37 | 71 |
|
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)) |
40 | 74 |
|
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)) |
43 | 76 |
|
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 | + } |
48 | 80 | } |
49 | 81 |
|
50 | 82 | 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 | + |
51 | 94 | ``` |
52 | 95 |
|
53 | | -## Methods to call the API |
| 96 | +## Exploring API Methods |
54 | 97 |
|
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. |
56 | 99 |
|
57 | 100 | ### Calls to the Content Delivery API |
58 | 101 |
|
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: |
60 | 103 |
|
61 | 104 | ```js |
62 | | -content.delivery.content.root() |
| 105 | +client.delivery.content.root(); |
63 | 106 |
|
64 | | -content.delivery.media.root() |
| 107 | +client.delivery.media.root(); |
65 | 108 | ``` |
66 | 109 |
|
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). |
68 | 116 |
|
69 | 117 | ### Calls to the Content Management API |
70 | 118 |
|
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: |
72 | 120 |
|
73 | 121 | ```js |
74 | | -content.management.content.create() |
| 122 | +client.management.content.create() |
75 | 123 |
|
76 | | -content.management.contentType.all() |
| 124 | +client.management.contentType.all() |
77 | 125 | ``` |
78 | 126 |
|
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). |
80 | 133 |
|
81 | 134 | ## References |
82 | 135 |
|
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