This is a sample website written in JavaScript utilizing the Kontent.ai Delivery API to retrieve content. You can register your account for free at https://app.kontent.ai.
- Install the latest version of NodeJS and npm. You can download both at https://nodejs.org/en/download/.
- Clone the sample application repository.
- Navigate to the root folder of the application in the command line.
- Type
npm install
to install required npm packages. - Type
npm run serve
to start a development server. - The application opens in your browser at http://localhost:8080.
This sample wants to showcase either loading content from Kontent.ai as well as loading some part of the site from static JSON resources.
Basically, the content that you can't find in the
Localization
folder is loaded from Kontent.ai.
- The data provided from
Localization
are using thevue-i18n
plugin, so every call in components using$t('KEYWORD')
in components is loading data from these JSONs as "Banner" section" (component here)
This solution fetches data using the Delivery client. For more implementation detail on how to set up the client see src/Client.js. After your client is set up, you are able to deliver your content to your project. The following example showcases how to use a Kontent.ai delivery client to fetch data.
fetchBrewer: function () {
var query = Client.items()
.type('brewer')
.equalsFilter('url_pattern', this.$route.params.brewerSlug)
if(this.language) {
query.languageParameter(this.language)
}
query
.toPromise()
.then(response => {
// store data to the state variable of your component.
this.brewer = response.data.items[0]
}
}
To deal with content that is not available in the current language, this project uses a method called language fallbacks. It will fetch the content in the language set as a fallback language in the Kontent.ai project and redirect the website to the URL with a prefix of the given language. However, it is possible to disable language fallbacks by adding a filter of system.language
to your query. For more information about getting localized content check this link.
var query = Client.items().type('about_us');
if (this.language) {
query
.languageParameter(this.language)
.equalsFilter('system.language', 'es-ES');
}
On the first run of the app, you'll be presented with a configuration page. It will allow you to connect the app to your Kontent.ai sample project or create a new one. You'll also be able to start a trial and convert to a developer plan when the trial expires.
If you want to open the configuration page after the project is already connected to the app. Just open the URL http://localhost:8080/Admin/Configuration.
Alternatively, you can connect your project manually as per the chapter below.
If you want to change the source Kontent.ai project, follow these steps:
- In Kontent.ai, choose Project settings from the app menu.
- Under Production environment settings, choose API keys.
- Copy your Project ID.
- Create and open a
.env.local
file in the sample application folder. - On the first line, add your Project ID constant using the format
VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000
. - Save the file.
When you now run the application, it will retrieve the content from your sample project. This setup has a higher priority than setting your sample project via the Configuration page.
To preview unpublished content in the sample application, follow these steps:
- In Kontent.ai, choose Project settings from the app menu.
- Under Production environment settings, choose API keys.
- Copy your Project ID and Preview API key.
- Create and open a
.env.local
file in the sample application folder. - On the first line, add your Project ID constant using the format
VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000
. - On the next line, add your Preview API key using the format
VUE_APP_PREVIEW_API_KEY=00000000-0000-0000-0000-000000000000
. - Save the file.
When you now run the application, you will see all project content including the unpublished version of content items.
- Navigate to https://app.kontent.ai in your browser.
- Sign in with your credentials.
- Manage content in the content administration interface of your sample project.
You can learn more about content editing at Kontent.ai Learn.
You can retrieve content either through the Kontent.ai Delivery SDKs or the Kontent.ai Delivery API:
- For published content, use
https://deliver.kontent.ai/PROJECT_ID/items
. - For unpublished content, use
https://preview-deliver.kontent.ai/PROJECT_ID/items
.
For more info about the API, see the API reference.
You can find the Delivery and other SDKs at https://github.com/kontent-ai.
You can use, for example, surge to deploy your app live. Check out the step-by-step guide on our blog.