Skip to content
Sample React SPA utilizing the Kentico Cloud Delivery API to fetch content.
Branch: master
Clone or download
Latest commit 9de9ab0 Jun 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create CODEOWNERS Feb 27, 2019
docs/assets
examples/hoc Bump react-dom from 16.3.2 to 16.3.3 in /examples/hoc May 23, 2019
public KCL-725 - remove tracking Oct 8, 2018
src DCN-151 - Implement and fix links (about us, office, home, article) Jun 4, 2019
.eslintrc.json Git reset, reintegrate changes, and reformat files to address CI isses Sep 4, 2018
.gitignore contact page rewritten to components Nov 3, 2017
.prettierrc Add prettierrc file and update list-staged script Oct 13, 2018
.travis.yml add build to previous step (and fix forgpotten debug line) Jul 25, 2018
CODE_OF_CONDUCT.md Add/update issue, PR templates, code of conduct, contributing guide Jan 26, 2019
CONTRIBUTING.md Add/update issue, PR templates, code of conduct, contributing guide Jan 26, 2019
LICENSE Updated License Time period. Oct 29, 2017
README.md Update README.md Jun 18, 2019
package-lock.json DCN-151 - Update package-lock.json May 15, 2019
package.json DCN-151 - Load Home page content from linked elements May 2, 2019

README.md

Kentico Cloud sample React single-page application

Build Status Live Demo Stack Overflow

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. For a brief walkthrough, read Running the React sample app on our Developer Hub.

Application setup

  1. Install the latest version of NodeJS and npm. You can download both at https://nodejs.org/en/download/.
  2. Clone the sample application repository.
  3. Navigate to the root folder of the application in the command line.
  4. Type npm install to install required npm packages.
  5. Type npm start to start a development server.
  6. The application opens in your browser at http://localhost:3000.

After starting, the sample application retrieves content from the default Kentico Cloud 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 Cloud 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 Cloud project, follow these steps:

  1. In Kentico Cloud, choose Project settings from the app menu.
  2. Under Development, choose API keys.
  3. Copy your Project ID
  4. Open the src\Client.js file in the sample application folder.
  5. Find the projectId constant.
  6. Change the values of the constant using the Project ID key you copied.
  7. Save the file.

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.

Remix on Glitch

Previewing content from your project

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:

  1. In Kentico Cloud, choose Project settings from the app menu.
  2. Under Development, choose API keys.
  3. Copy your Project ID and Preview API key.
  4. Open the src\Client.js file in the sample application folder.
  5. Find the projectId and previewApiKey constants.
  6. Change the values of the constants using the Project ID and Preview API key you copied.
  7. Save the file.

When you now run the application, you will see all project content including the unpublished version of content items.

Content administration

  1. Navigate to https://app.kenticocloud.com in your browser.
  2. Sign in with your credentials.
  3. Manage content in the content administration interface of your sample project.

You can learn more about content editing with Kentico Cloud in the documentation.

Content delivery

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.

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!

Analytics

You can’t perform that action at this time.