This is a sample website written in JavaScript utilizing the Kentico Cloud Delivery API to manage and retrieve content. You can register your account for free at https://app.kenticocloud.com.
- 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 start
to start a development server. - The application opens in your browser at http://localhost:3000.
After starting, the sample application retrieves content from the default Kentico Cloud sample project.
If you want to change the source Kentico Cloud project, follow these steps:
- In Kentico Cloud, choose Project settings from the app menu.
- Under Development, choose API keys.
- Copy your Project ID
- Open the
src\Client.js
file in the sample application folder. - Find the
projectId
constant. - Change the values of the constant using the Project ID key you copied.
- Save the file.
When you now run the sample application, the application retrieves content from your project.
Deploy, explore and change the app directly in the browser.
If you already have a Kentico Cloud account and you want to connect the sample application to a project of your own, you need to provide your Project ID and your Preview API key to authorize requests to the Delivery Preview API. For example, you can connect the application to your modified version of the sample project.
To preview content in the sample application, follow these steps:
- In Kentico Cloud, choose Project settings from the app menu.
- Under Development, choose API keys.
- Copy your Project ID and Preview API key.
- Open the
src\Client.js
file in the sample application folder. - Find the
projectId
andpreviewApiKey
constants. - Change the values of the constants using the Project ID and Preview API key you copied.
- 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.kenticocloud.com 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 with Kentico Cloud in the documentation.
You can retrieve content either through the Kentico Cloud Delivery SDKs or the Kentico Cloud Delivery API:
- For published content, use
https://deliver.kenticocloud.com/PROJECT_ID/items
. - For unpublished content, use
https://preview-deliver.kenticocloud.com/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/Kentico.
By default you can see sample visitor data in Kentico Cloud, even if you already feed the single-page application with your own content. Tracking real visitors needs to be set up separately and here's how to.
In single-page applications you have to use custom activities to track visitor activity. This is how you set up tracking visits of About Us page:
- In Kentico Cloud, choose Project settings from the app menu.
- Under Development, choose API keys.
- Copy your Project ID.
- Open the
public\index.html
file in the sample application folder. - Find function call
ket('start', '');
and use your Project ID as its second parameter. - Save the file.
- Go back to your Project settings in Kentico Cloud
- Under Development, choose Activity tracking.
- Create a new custom activity and copy its codename.
- Open the
src\Utilities\ActivityLogging.js
file in the sample application folder. - Find function call
window.ket('action', '');
and use the codename you copied as its second parameter. - Save the file.
When you now run the application and visit the About Us page, you should be able to see your visit in Analytics of Kentico Cloud. You can also create a new dynamic segment of people who did the custom activity you created and see that the segment is not empty. It should contain you as an anonymous visitor. You can learn more about creating segments with Kentico Cloud in the documentation.
You can use eg. surge to deploy your app live. Check out the step-by-step guide on our blog.
We would like to express our thanks to the following people who contributed and made the project possible:
Would you like to become a hero too? Pick an issue and send us a pull request!