Kentico Kontent sample React single-page application
This is a sample website written in JavaScript utilizing the Kentico Kontent Delivery API to manage and retrieve content. You can register your account for free at https://app.kontent.ai. For a brief walkthrough, read Running the React sample app on our Developer Hub.
Application setup
- 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 Kontent sample project.
Connecting to your sample project
At the first run of the app, you'll be presented with a configuration page. It will allow you to connect the app to your Kentico Kontent project or create a new one. You'll also be able to start a trial and convert to a free plan when the trial expires.
Alternatively, you can connect your project manually as per the chapter below.
Connecting to your project manually
If you want to change the source Kentico Kontent project, follow these steps:
- In Kentico Kontent, choose Project settings from the app menu.
- Under Development, choose API keys.
- Copy your Project ID.
- Open
.env.example
in the root directory. - Replace
your_project_id
with your Project ID and removeREACT_APP_PREVIEW_API_KEY
entry. - Save and rename the file
.env
.
When you now run the sample application, the application retrieves content from your project.
Get creative
Deploy, explore and change the app directly in the browser.
Previewing content from your project
If you already have a Kentico Kontent 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 Kontent, choose Project settings from the app menu.
- Under Development, choose API keys.
- Copy your Project ID and Preview API key.
- Open
.env.example
in the root directory . - Replace
your_project_id
andyour_api_key
with your Project ID and Preview API key. - Save and rename the file
.env
.
When you now run the application, you will see all project content including the unpublished version of content items.
Content administration
- 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 with Kentico Kontent in the documentation.
Content delivery
You can retrieve content either through the Kentico Kontent Delivery SDKs or the Kentico Kontent 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/Kentico.
Deployment
You can use eg. surge to deploy your app live. Check out the step-by-step guide on our blog.
Wall of Fame
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!