You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
4
+
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
5
5
6
6
Contentstack provides JavaScript SDK to build application on top of JavaScript. Given below is the detailed guide and helpful resources to get started with our JavaScript SDK.
7
7
8
-
The JavaScript SDK can also be used to create Node.js and React native applications.
8
+
The JavaScript SDK can also be used to create Node.js and React native applications.
9
9
10
10
### Prerequisite
11
11
@@ -17,40 +17,55 @@ You need Node.js version 4.4.7 or later installed to use the Contentstack JavaSc
17
17
18
18
To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest) and include it in the <script> tag:
Node.js uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install it via npm:
29
33
30
-
npm -i contentstack
34
+
```bash
35
+
npm -i contentstack
36
+
```
31
37
32
38
To import the SDK in your project, use the following command:
33
39
34
-
import contentstack from ‘contentstack’
40
+
```javascript
41
+
importcontentstackfrom ‘contentstack’
42
+
```
35
43
36
44
To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.
React Native uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install ist via npm:
43
53
44
-
npm -i contentstack
54
+
```bash
55
+
npm -i contentstack
56
+
```
45
57
46
58
To import the SDK in your project, use the following command:
47
59
48
-
import contentstack from `contentstack/react-native`
60
+
```javascript
61
+
importcontentstackfrom`contentstack/react-native`
62
+
```
49
63
50
64
To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.
@@ -64,62 +79,64 @@ Content type lets you define the structure or blueprint of a page or a section o
64
79
65
80
#### Entry
66
81
67
-
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
82
+
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
68
83
69
84
#### Asset
70
85
71
-
Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about [Assets](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
86
+
Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about [Assets](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
72
87
73
88
#### Environment
74
89
75
-
A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with [Environments](https://www.contentstack.com/docs/guide/environments).
76
-
77
-
90
+
A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with [Environments](https://www.contentstack.com/docs/guide/environments).
You can query for content types, entries, assets and more using our JavaScript API Reference.
165
+
You can query for content types, entries, assets and more using our JavaScript API Reference.
145
166
146
167
[JavaScript API Reference Doc](https://contentstack.com/docs/platforms/javascript-browser/api-reference/)
147
168
148
169
### Working with Images
149
170
150
171
We have introduced Image Delivery APIs that let you retrieve images and then manipulate and optimize them for your digital properties. It lets you perform a host of other actions such as crop, trim, resize, rotate, overlay, and so on.
151
172
152
-
For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/v3/assets/blteae40eb499811073/bltc5064f36b5855343/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.
173
+
For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/v3/assets/blteae40eb499811073/bltc5064f36b5855343/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.
153
174
154
-
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
175
+
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
155
176
156
177
Following are Image Delivery API examples.
157
178
158
-
// set the quality 100
159
-
imageUrl = Stack.imageTransform(imageUrl, {
160
-
'quality': 100
161
-
})
162
-
163
-
// set the quality to 100, auto optimization, width and height
164
-
imageUrl = Stack.imageTransform(imageUrl, {
165
-
'quality': 100,
166
-
'auto': 'webp',
167
-
'width': 100,
168
-
'height': 100
169
-
})
179
+
```javascript
180
+
// set the quality 100
181
+
imageUrl =Stack.imageTransform(imageUrl, {
182
+
'quality':100
183
+
})
184
+
185
+
// set the quality to 100, auto optimization, width and height
186
+
imageUrl =Stack.imageTransform(imageUrl, {
187
+
'quality':100,
188
+
'auto':'webp',
189
+
'width':100,
190
+
'height':100
191
+
})
192
+
```
170
193
171
194
### Using the Sync API with JavaScript SDK
172
195
173
196
The Sync API takes care of syncing your Contentstack data with your app and ensures that the data is always up-to-date by providing delta updates. Contentstack’s JavaScript SDK supports Sync API, which you can use to build powerful apps. Read through to understand how to use the Sync API with Contentstack JavaScript SDK.
174
-
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
197
+
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
175
198
176
199
##### Initial sync
177
200
178
201
The Initial Sync process performs a complete sync of your app data. It returns all the published entries and assets of the specified stack in response.
179
202
180
203
To start the Initial Sync process, use the syncStack method.
181
-
182
-
let data = Stack.sync({"init": true})
183
-
data.then(function(sync_data, err) {
184
-
//error for any error description
185
-
//sync_data.items: contains sync data
186
-
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
187
-
//sync_token.syncToken: for performing subsequent sync after initial sync
188
-
if (err) throw err
189
-
})
190
204
191
-
The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.
205
+
```javascript
206
+
let data =Stack.sync({"init":true})
207
+
data.then(function(sync_data, err) {
208
+
//error for any error description
209
+
//sync_data.items: contains sync data
210
+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
211
+
//sync_token.syncToken: for performing subsequent sync after initial sync
212
+
if (err) throw err
213
+
})
214
+
```
192
215
193
-
You can also fetch custom results in initial sync by using advanced sync queries.
216
+
The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.
194
217
218
+
You can also fetch custom results in initial sync by using advanced sync queries.
195
219
196
220
##### Sync pagination
197
221
198
-
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
222
+
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
199
223
200
-
201
-
let data = Stack.sync({"pagination_token" : "<pagination_token>"})
202
-
data.then(function(result, err) {
203
-
//error for any error description
204
-
//result.items: contains sync data
205
-
//result.paginationToken: For fetching the next batch of entries using pagination token
206
-
//result.syncToken: For performing subsequent sync after initial sync
207
-
if(err) throw err
208
-
})
224
+
```javascript
225
+
let data =Stack.sync({"pagination_token":"<pagination_token>"})
226
+
data.then(function(result, err) {
227
+
//error for any error description
228
+
//result.items: contains sync data
229
+
//result.paginationToken: For fetching the next batch of entries using pagination token
230
+
//result.syncToken: For performing subsequent sync after initial sync
231
+
if(err) throw err
232
+
})
233
+
```
209
234
210
235
##### Subsequent sync
211
236
212
237
You can use the sync token (that you receive after initial sync) to get the updated content next time. The sync token fetches only the content that was added after your last sync, and the details of the content that was deleted or updated.
213
238
214
-
215
-
let data = Stack.sync({"sync_token" : “<sync_token>”})
216
-
data.then(function(sync_data, err) {
217
-
//error for any error description
218
-
//sync_data.items: contains sync data
219
-
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
220
-
//sync_token.syncToken: for performing subsequent sync after initial sync
221
-
if(err) throw err
222
-
})
239
+
```javascript
240
+
let data =Stack.sync({"sync_token": “<sync_token>”})
241
+
data.then(function(sync_data, err) {
242
+
//error for any error description
243
+
//sync_data.items: contains sync data
244
+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
245
+
//sync_token.syncToken: for performing subsequent sync after initial sync
246
+
if(err) throw err
247
+
})
248
+
```
223
249
224
250
##### Advanced sync queries
225
251
226
252
You can use advanced sync queries to fetch custom results while performing initial sync.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
0 commit comments