Sandbox::https://agilitycms.com/docs/javascript/getting-started-with-javascript

Getting Started with JavaScript

Learn how you can integrate with Agility using JavaScript.

JavaScript (JS) is a programming language and is one of the core technologies of the World Wide Web. For a long time, JS was limited to running within client browsers only, but with the advent of Node (server-side JS) it can now run on a plethora of devices including servers.

Its widespread support and popularity make it an excellent choice for building digital solutions.

Building a JS Solution

You have a lot a flexibility in how you can use JS to build websites, apps, and more.

Many developers and architects prefer to use JS frameworks that abstract and encapsulate complex concepts. This often results in less code you have to write, and you can place more focus on your specific logic.

If you're building a website with JavaScript, we recommend Next.js. It will save you a lot of time and provides SEO, performance, and modern tooling features out-of-the-box. Other frameworks can use the Content Fetch and Content Sync SDKs below; to build with the framework of your choice, see Vibe Coding with Agility.

Accessing Content with JS

Agility provides the Content Fetch JS SDK to support retrieving content from the CMS. This can be used in a browser or Node environment.

Example:

const api = agility.getApi({
  guid: '046a1a87',
  apiKey: 'defaultlive.2b7f3a91559d794bedb688358be5e13af2b1e3ae8cd39e8ed2433bbef5d8d6ac',
  isPreview: false
});

let contentListResult = await api.getContentList({ referenceName: 'posts', languageCode: 'en-us' });

Updating Content with Node JS

Agility provides the Content Management JS SDK to support updating content in the CMS programmatically. This can ONLY be used with a Node environment.

Example:

//Create a new instance API client
const api = agilityMgmt.getApi({
  location: 'MyLocation',
  websiteName: 'MyWebsiteName',
  securityKey: 'MySecurityKey'
});

//Set the contentItem structure
//The example below shows how to structure your fields with simple types and nested objects
let contentItem = {
 contentID: -1,
 fields: {
  "Title": "My Title",
  "Image": {
   "mediaID": 123,
   "label": "My Image"
  }
 }
}

//Set language code and reference name of content you want to save
let languageCode = "en-us";
let referenceName = "MyReferenceName";

api.saveContentItem({
 contentItem,
 languageCode,
 referenceName
})
.then(function(contentID) {
 //check contentID is greater > 0 for success
})
.catch(function(error) {
 //handle error
});

Syncing Content with Node JS

Agility provides the Content Sync JS SDK to support syncing content from the CMS to a local store so it can be accessed offline.