Skip to content
Starter point for MVC Page Builder Components development.
JavaScript C# TypeScript HTML CSS ASP
Branch: master
Clone or download
Latest commit eb6cb0c Aug 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add code owners Jun 21, 2019
MyCompany.Components.Views Unify Assembly infos Jul 31, 2019
MyCompany.Components Unify Assembly infos Jul 31, 2019
SandboxSite Merge pull request #14 from Kentico/MAE-62-Polish Aug 6, 2019
Targets Fix the missing "...\roslyn\csc.exe" file during a build process Jul 31, 2019
types MEAT-44 Jul 15, 2019
webpack MEAT-44 Jul 15, 2019
.gitignore MEAT-44 - Finalize renaming Company->MyCompany, .gitignore Jul 12, 2019
CODE_OF_CONDUCT.md add ossfiles Jun 21, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Jul 17, 2019
KenticoInstallationProfile.xml Rename boilerplate to starter + update sample components Jul 10, 2019
LICENSE Rename boilerplate to starter + update sample components Jul 10, 2019
MvcComponentStarter.sln MAE-47 - Update Kentico NuGet packages (#9) Jul 25, 2019
README.md Update README.md file. Move the "Restore NuGet packages" step up. Jul 31, 2019
SandboxSite.zip MAE-47 - Update Kentico NuGet packages (#9) Jul 25, 2019
Starter.png MEAT-44 - Update README.md file (#6) Jul 16, 2019
package-lock.json MEAT-44 Jul 15, 2019
package.json MEAT-44 Jul 15, 2019
tsconfig.json Fix assets build process and component names Jul 11, 2019
webpack.config.js

README.md

Kentico EMS Component Starter

Build status

This repository helps you to get started with the development of MVC page builder components. It contains an MVC application with a sample widget, inline editor, form component, and section. The MVC application needs to be connected to an instance of the Kentico administration application to work properly.

Component development best practices

To learn about best practices and development guidelines for MVC page builder components, visit respective pages in the Kentico Documentation:

Embedded Razor views

The MVC Component Starter project is set-up to embed the component's Razor views into compiled DLLs to improve the component re-distribution. The embedding process is configured in the Targets/Kentico.EmbeddedViews.targets file and linked in the MyCompany.Components.Views project's .csproj file. Afterward, the build process searches for .cshtml files in the Views folder and embeds them into the final DLL. In case you make changes to the project, folder, or file names which would break the embedding process, you need to reflect these changes in this Kentico.EmbeddedViews.targets file.

Component front-end development

To provide a better front-end development experience for the components, a basic Webpack configuration with npm, TypeScript, and less pre-processor support has been pre-configured. The front-end source files of components are located in the Assets folder by default. You can configure this location in wepback/constants.js file, alongside with the component's entry file name. By default, the name is main.ts or main.less for components that don't require custom javascript code, e.g. Sections.

To start with the component development, run the npm run dev command. Webpack then automatically searches for changes in the source files and transpiles them in the Sandbox site's Content folder, where they're automatically detected by the components system bundles.

If you want to build component scripts for production use, run the npm run build command. This generates both minified and non-minified versions of the production scripts inside the components Content folder (e.g. MyCompany.Components/Content).

Getting started

Installing the Kentico administration interface

  1. Download the Kentico installer, if you do not have one already.

  2. To install the Kentico administration application without any site from the command line:

    • Run the installer and use the KenticoInstallationProfile.xml XML configuration.

      • Specify the location where Kentico is installed by defining the TargetFolder attribute of the IIS element. (⚠️ Do not use the location where your installer .exe file is located)
      • To modify the connection to a different database server, configure the SQL element in the configuration XML file.
      • To add a license to the Kentico instance, adjust the Licenses element in the configuration XML file.
      .\Kentico_12_0_trial.exe KenticoInstallationProfile.xml
    • If the installer notifies you that there are program files already installed in your system, run the following command to uninstall current Kentico program files and then rerun the previous installation command.

      .\Kentico_12_0_trial.exe /u
  3. Apply the latest hotfix.

  4. Open the administration interface (already registered in IIS with _Admin suffix) in your preferred browser and import the site export package (SandboxSite.zip). The package contains:

    • Site (with configured Presentation URL)
    • Page type (configured with the URL pattern / and the Use page tab setting enabled)
      • A page based on this page type
    • Web farm mode set to Automatic

Setting up the MVC application

  1. Clone this repository (MVC application) to a different folder than the Kentico administration interface.

    git clone https://github.com/Kentico/ems-mvc-component-starter
  2. Rename the AppSettings.config.template file to AppSettings.config and set the hash string salt (CMSHashStringSalt) to match the hash string salt in the web.config application settings of the Kentico administration interface.

  3. Rename the ConnectionStrings.config.template file to ConnectionStrings.config and set the connection string (CMSConnectionString) to match the connection string in the web.config application settings of the Kentico administration interface.

  4. In the Visual Studio:

    • Open the MvcComponentStarter.sln solution.
    • Restore NuGet packages for all projects in the solution.
    • Build the solution.
  5. Download and install the latest NodeJS runtime.

  6. Navigate to the root of this MVC project using console and install missing npm packages:

    npm install
  7. Start a DEV server for serving transpiled JavaScript files:

    npm run dev
  8. In the Visual Studio:

    • Run the SandboxSite application; Select the project and press the F5 key.
      • Note: You may receive an error from the Roslyn compiler. To fix this issue, reopen the Visual Studio. This error occurs when the solution is compiled before the NuGet packages are restored.

The page builder is now set up and ready to be used. To navigate to a page with the page builder:

  1. Open the administration interface in your preferred browser.
  2. Navigate to the Pages application.
  3. Select the page named Home in the content tree.

You can now see the page builder interface set up and ready to be used. You can develop further components by following the links from the list at the top of the page.

Starter showcase

Analytics

You can’t perform that action at this time.