Kentico Cloud sample .NET MVC web application

This is a sample website written in ASP.NET MVC 5 that uses the Kentico Cloud Delivery .NET SDK to manage and retrieve content from Kentico Cloud, and the Kentico Cloud Personalization .NET SDK to track site visits. For a brief walkthrough, read Running the .NET sample app on our Developer Hub.

You can register your account for free at https://app.kenticocloud.com.

Application setup

You can run the app in two following ways:

by cloning the code and running it via Visual Studio 2013 or later;
by deploying the app to a new Azure App Service instance in your Azure subscription.

Running via Visual Studio

To run the app:

Clone the app repository with your favorite GIT client
1. For instance, you can use Visual Studio, Visual Studio Code, GitHub Desktop, etc.
2. Alternatively, you can download the repo as a ZIP file, however, this will not adapt line endings in downloaded files to your platform (Windows, Unix).
Open the solution in Visual Studio (using the DancingGoat.sln file).
Run the app.

Running in Azure

To run the app, just click the below "Deploy to Azure" button.

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 already have a Kentico Cloud account, you can connect this sample application to a project of your own to access its unpublished content items, and track visitors on the site. For example, you can connect the application to your version of the Sample project.

In Kentico Cloud, choose Project settings from the app menu.
Under Development, choose API keys.
- You will be copying the Project ID and API keys for the Delivery Preview API and Personalization API.
Open the \DancingGoat\Web.config file.
Use the values from your Kentico Cloud project in the Web.config file:
- Project ID: Insert your project ID into the ProjectId application setting.
- Delivery Preview API: Create a new application setting named PreviewApiKey in the <appSettings> section, and use the Delivery Preview API key as its value. To enable calls over the Delivery Preview API, you also need to add a setting named UsePreviewApi and set it to true.
- Personalization API: Create a new application setting named PersonalizationToken in the <appSettings> section, and use the Personalization API key as its value.
```
<appSettings>
    ...
    <add key="ProjectId" value="YOUR_PROJECT_ID" />
    <add key="UsePreviewApi" value="true"/>
    <add key="PreviewApiKey" value="YOUR_DELIVERY_PREVIEW_API_KEY" />
    <add key="PersonalizationToken" value="YOUR_PERSONALIZATION_API_KEY" />
    ...
</appSettings>
```
Save the changes.
Run the application.

After you run the application, Kentico Cloud will track site visits and create new contacts when visitors submit a form. You will also be able to see all project content including the unpublished version of content items.

For more information about the integrations with the Delivery API and Personalization API, see the following:

Delivery .NET SDK documentation on using the DeliveryClient
Personalization .NET SDK documentation on using the PersonalizationClient

Content administration

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 our Help Center.

Content delivery

You can retrieve content either through the Kentico Cloud Delivery SDK 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 details about Kentico Cloud APIs, see our API reference. For details on how the preview functionality works in this app, see the wiki.

Edit mode

Content contributors sometimes need to fix errors or typos right when they see them on the website. The sample app allows users to navigate from a piece of content on the site straight to the corresponding content item or element in Kentico Cloud.

To see Edit mode in action:

Enable Delivery Preview API by adding the following keys to the \DancingGoat\Web.config file:

        <add key="ProjectId" value="YOUR_PROJECT_ID" />
        <add key="UsePreviewApi" value="true"/>
        <add key="PreviewApiKey" value="YOUR_DELIVERY_PREVIEW_API_KEY" />

Run the app.
Navigate to the About us section.
Click the Edit mode switch in the bottom-left corner.

Edit buttons will appear next to each piece of content on the page.

Adjustable images

The sample website uses adjustable images via the image transformation feature available in the Delivery API. The srcset attribute is automatically added to the img tag. The value of the attribute is then driven by the ResponsiveWidths web.config setting. You can always disable this behavior by deleting the setting from the \DancingGoat\Web.config file.

Troubleshooting

Kentico Cloud evolves over time. If you connect your sample app to an older Kentico Cloud sample project, the app may not run correctly. You can always generate the latest version of the sample Dancing Goat content project at https://app.kenticocloud.com/sample-project-generator . Once generated, you can either paste the new project ID to web.config, or, you can navigate to your app's relative URL "/Admin/SelfConfig" and pick the new project.

Feedback & Contributing

Check out the contributing page to see the best places to file issues, start discussions, and begin contributing.

Wall of Fame

We would like to express our thanks to the following people who contributed and made the project possible:

Steve Fenton

Would you like to become a hero too? Pick an issue and send us a pull request!

jrthearchitect/cloud-sample-app-net