Skip to content

Commit 89bd2b6

Browse files
uttamukkojiuttamukkoji
committed
Readme update
1 parent 5b4ba0a commit 89bd2b6

File tree

1 file changed

+295
-0
lines changed

1 file changed

+295
-0
lines changed

‎README.md

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
[![Contentstack](https://www.contentstack.com/docs/static/images/contentstack.png)](https://www.contentstack.com/)
2+
## JavaScript Content Delivery SDK for Contentstack
3+
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+
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+
8+
The JavaScript SDK can also be used to create Node.js and React native applications.
9+
10+
### Prerequisite
11+
12+
You need Node.js version 4.4.7 or later installed to use the Contentstack JavaScript SDK.
13+
14+
### Setup and Installation
15+
16+
#### For JavaScript (Browser)
17+
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:
19+
20+
```html
21+
<script type="text/javascript" src="/path/to/contentstack.min.js"></script>;
22+
```
23+
24+
To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.
25+
26+
```javascript
27+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
28+
```
29+
30+
For Setting the European Region:
31+
If you want to set and use European region, refer to the code below:
32+
33+
```javascript
34+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment", "region": Contentstack.Region.EU });
35+
```
36+
37+
#### For Node.js
38+
39+
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:
40+
41+
```bash
42+
npm i contentstack
43+
```
44+
45+
To import the SDK in your project, use the following command:
46+
47+
```javascript
48+
import Contentstack from ‘contentstack’
49+
```
50+
51+
To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.
52+
53+
```javascript
54+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
55+
```
56+
57+
For Setting the European Region:
58+
59+
If you want to set and use European region, refer to the code below:
60+
61+
```javascript
62+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment", "region": Contentstack.Region.EU });
63+
```
64+
65+
#### For React Native
66+
67+
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:
68+
69+
```bash
70+
npm i contentstack
71+
```
72+
73+
To import the SDK in your project, use the following command:
74+
75+
```javascript
76+
import Contentstack from `contentstack/react-native`
77+
```
78+
79+
To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.
80+
81+
```javascript
82+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
83+
```
84+
85+
For Setting the European Region:
86+
87+
If you want to set and use European region, refer to the code below:
88+
89+
```javascript
90+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" "region": Contentstack.Region.EU });
91+
```
92+
93+
### Key Concepts for using Contentstack
94+
95+
#### Stack
96+
97+
A stack is like a container that holds the content of your app. Learn more about [Stacks](https://www.contentstack.com/docs/guide/stack).
98+
99+
#### Content Type
100+
101+
Content type lets you define the structure or blueprint of a page or a section of your digital property. It is a form-like page that gives Content Managers an interface to input and upload content. [Read more](https://www.contentstack.com/docs/guide/content-types).
102+
103+
#### Entry
104+
105+
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).
106+
107+
#### Asset
108+
109+
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).
110+
111+
#### Environment
112+
113+
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).
114+
115+
### Contentstack JavaScript SDK: 5-minute Quickstart
116+
117+
#### Initializing your SDK
118+
119+
You will need to specify the API key, Delivery Token, and Environment Name of your stack to initialize the SDK:
120+
121+
```javascript
122+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
123+
```
124+
125+
Once you have initialized the SDK, you can start getting content in your app.
126+
127+
#### Querying content from your stack
128+
129+
To get a single entry, you need to specify the content type as well as the ID of the entry.
130+
131+
```javascript
132+
const Query = Stack.ContentType('blog').Entry("<entry_uid>");
133+
134+
Query.fetch()
135+
.then(function success(entry) {
136+
console.log(entry.get('title')); // Retrieve field value by providing a field's uid
137+
console.log(entry.toJSON()); // Convert the entry result object to JSON
138+
}, function error(err) {
139+
// err object
140+
})
141+
```
142+
143+
To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.
144+
145+
```javascript
146+
const Query = Stack.ContentType('blog').Query();
147+
148+
Query
149+
.where("title", "welcome")
150+
.includeContentType()
151+
.includeCount()
152+
.toJSON()
153+
.find()
154+
.then(function success(result) {
155+
// result is array where -
156+
// result[0] =&gt; entry objects
157+
// result[result.length-1] =&gt; entry objects count included only when .includeCount() is queried.
158+
// result[1] =&gt; schema of the content type is included when .includeContentType() is queried.
159+
}, function error(err) {
160+
// err object
161+
})
162+
```
163+
164+
#### Cache Policies
165+
166+
You can set a cache policy on a stack and/or query object.
167+
168+
##### Setting a cache policy on a stack
169+
170+
This option allows you to globalize a cache policy. This means the cache policy you set will be applied to all the query objects of the stack.
171+
172+
```javascript
173+
//Setting a cache policy on a stack
174+
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)
175+
```
176+
177+
##### Setting a cache policy on a query object
178+
179+
This option allows you to set/override a cache policy on a specific query object.
180+
181+
```javascript
182+
// setting a cache policy on a queryobject
183+
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
184+
```
185+
186+
### Advanced Queries
187+
188+
You can query for content types, entries, assets and more using our JavaScript API Reference.
189+
190+
[JavaScript API Reference Doc](https://www.contentstack.com/docs/developers/javascript-browser/api-reference/)
191+
192+
### Working with Images
193+
194+
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.
195+
196+
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/owl.jpg?crop=300,400. There are several more parameters that you can use for your images.
197+
198+
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
199+
200+
Following are Image Delivery API examples.
201+
202+
```javascript
203+
// set the quality 100
204+
imageUrl = Stack.imageTransform(imageUrl, {
205+
'quality': 100
206+
})
207+
208+
// set the quality to 100, auto optimization, width and height
209+
imageUrl = Stack.imageTransform(imageUrl, {
210+
'quality': 100,
211+
'auto': 'webp',
212+
'width': 100,
213+
'height': 100
214+
})
215+
```
216+
217+
### Using the Sync API with JavaScript SDK
218+
219+
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.
220+
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
221+
222+
> Note: Sync function does not support cache policy. When using the Sync function, we recommend you to set the cache policy to IGNORE_CACHE.
223+
##### Initial sync
224+
225+
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.
226+
227+
To start the Initial Sync process, use the syncStack method.
228+
229+
```javascript
230+
let data = Stack.sync({"init": true})
231+
data.then(function(sync_data, err) {
232+
//error for any error description
233+
//sync_data.items: contains sync data
234+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
235+
//sync_token.syncToken: for performing subsequent sync after initial sync
236+
if (err) throw err
237+
})
238+
```
239+
> Note: Sync function does not support cache policy. When using the Sync function, we recommend you to set the cache policy to IGNORE_CACHE.
240+
241+
242+
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.
243+
244+
You can also fetch custom results in initial sync by using advanced sync queries.
245+
246+
##### Sync pagination
247+
248+
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.
249+
250+
```javascript
251+
let data = Stack.sync({"pagination_token" : "<pagination_token>"})
252+
data.then(function(result, err) {
253+
//error for any error description
254+
//result.items: contains sync data
255+
//result.paginationToken: For fetching the next batch of entries using pagination token
256+
//result.syncToken: For performing subsequent sync after initial sync
257+
if(err) throw err
258+
})
259+
```
260+
261+
##### Subsequent sync
262+
263+
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.
264+
265+
```javascript
266+
let data = Stack.sync({"sync_token" : “<sync_token>”})
267+
data.then(function(sync_data, err) {
268+
//error for any error description
269+
//sync_data.items: contains sync data
270+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
271+
//sync_token.syncToken: for performing subsequent sync after initial sync
272+
if(err) throw err
273+
})
274+
```
275+
276+
##### Advanced sync queries
277+
278+
You can use advanced sync queries to fetch custom results while performing initial sync.
279+
[Read advanced sync queries documentation](https://www.contentstack.com/docs/guide/synchronization/using-the-sync-api-with-javascript-sdk#advanced-sync-queries)
280+
281+
### Helpful Links
282+
283+
- [Contentstack Website](https://www.contentstack.com)
284+
- [Official Documentation](https://contentstack.com/docs)
285+
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)
286+
287+
### The MIT License (MIT)
288+
289+
Copyright © 2012-2021 [Contentstack](https://www.contentstack.com). All Rights Reserved
290+
291+
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:
292+
293+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
294+
295+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

0 commit comments

Comments
 (0)