Git Product home page Git Product logo

shyam0406 / kontent-sample-app-net Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kontent-ai/sample-app-net

0.0 1.0 0.0 2.94 MB

Sample .NET MVC web application using the Kentico Kontent Delivery .NET SDK to retrieve content

Home Page: https://docs.kontent.ai/tutorials/develop-apps?tech=dotnet

License: MIT License

C# 9.70% CSS 23.53% JavaScript 60.17% PowerShell 0.37% HTML 6.24%

kontent-sample-app-net's Introduction

Kentico Kontent sample ASP.NET Core MVC web application

Build status Stack Overflow

This is a sample website written in ASP.NET Core 3.1 that uses the Kentico Kontent Delivery .NET SDK to manage and retrieve content from Kentico Kontent. For a brief walkthrough, read Running the .NET sample app on our Developer Hub.

You can register your account for free at https://app.kontent.ai.

Application setup

You can run the app in two following ways:

  • Cloning the code and running it using an IDE, such as Visual Studio 2013 or later.
  • Deploying the app to a new Azure App Service instance in your Azure subscription.

Running in an IDE

To run the app:

  1. 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, but this will not adapt the line endings in the downloaded files to your platform (Windows, Unix).
  2. Open the solution in your IDE (using the DancingGoat.sln file).
  3. Run the app.

Running in Azure

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

Deploy to Azure

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 already have a Kentico Kontent 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.

  1. In Kentico Kontent, choose Project settings from the app menu.

  2. Under Development, choose API keys.

    • You will be copying the Project ID and API key for the Delivery Preview API.
  3. Open the \DancingGoat\appsettings.json file.

  4. Use the values from your Kentico Kontent project in the appsettings.json file:

    • Project ID: Insert your project ID into the ProjectId configuration key.
    • Delivery Preview API: Create a new key named PreviewApiKey in the DeliveryOptions 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 key named UsePreviewApi and set it to true.
    "DeliveryOptions": {
    	...
    	"ProjectId": "YOUR_PROJECT_ID",
    	"UsePreviewApi": true,
    	"PreviewApiKey": "YOUR_DELIVERY_PREVIEW_API_KEY"
    	...
    },
  5. Save the changes.

  6. Run the application.

After you run the application, Kentico Kontent 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, see the following:

Content administration

  1. Navigate to https://app.kontent.ai 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 Kontent in our Help Center.

Content delivery

You can retrieve content either through the Kentico Kontent Delivery SDK 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 details about Kentico Kontent 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 Kontent.

To see Edit mode in action:

  1. 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" />
  1. Run the app.
  2. Navigate to the About us section.
  3. 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 AppConfiguration:ResponsiveWidths appsettings.json setting. You can always disable this behavior by deleting the setting from the \DancingGoat\appsettings.json file.

Troubleshooting

Kentico Kontent evolves over time. If you connect your sample app to an older Kentico Kontent 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.kontent.ai/sample-project-generator . Once generated, you can either paste the new project ID to appsettings.json, 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:

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

Analytics

kontent-sample-app-net's People

Contributors

petrsvihlik avatar martin-knapik avatar hejtmii avatar josefdvorak avatar alesk-kentico avatar winklertomas avatar juraju-kentico avatar simply007 avatar tomasjurasek avatar suzii avatar peterskoda avatar huluvu21 avatar amoraitis avatar steve-fenton avatar christopherjennings avatar jancerman avatar kenticomartins avatar colliercz avatar jahuhu10 avatar lukaspirkl avatar mareksalat avatar matus12 avatar tobiaskamenicky avatar tomashruby avatar dependabot[bot] avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.