This is a starter template for developers who want to use ASP.NET Core, and the Agility.AspNetCore/Agility.Web SDK to sync content and provide an interface to access content without making API calls. The Agility.AspNetCore/Agility.Web SDK also manages page routing, caching and more.
This is the fastest way to get started with Agility and build high-performance websites out-of-the-box.
Backend:
- .NET Core 2.1
Frontend:
- npm and webpack
- sass loader
- agility and agility-ugc npm packages
- vanilla js
- Better caching
- Agility Modules are executed asnychronously
- Cross-platform development and hosting
- Modern frontend tools
In order to connect this website to an Agility instance, you'll need a Website Name, Security Key, and UGC API credentials. If you don't have this, please contact support@agilitycms.com and we can assist you.
In addition, the Agility instance must have its Development Language set to ASP.NET Core. This can be done in Agility > Settings > Customization/Development / Development Framework.
- Clone/Download this repository.
- Open the repository in your favorite IDE - we recommend VS Code.
- Open and edit the file Website\appsettings.json and set the websiteName and securityKey
{
"Logging": {
"LogLevel": {
"Default": "Warning"
}
},
"AllowedHosts": "*",
"Agility": {
"applicationName": "My Web Application",
"websiteName": "{WebsiteName goes here}",
"securityKey": "{Security Key goes here}",
"contentCacheFilePath": "d:/home/AgilityContent/",
"contentServerUrl": "https://contentserver1503.agilitycms.com/agilitycontentserver.svc",
"developmentMode": "false",
"Trace": {
"traceLevel": "Warning",
"logFilePath": "d:/home/AgilityLogs/Website.log"
},
"UGC": {
"Url": "https://ugc.agilitycms.com/",
"Key": "{optional}",
"Password": "{optional}"
},
"Analytics": {
"Url": ""
}
}
}- Open a terminal and start the dotnet site (backend) - this should restore packages, build the site and start running the site
Website> dotnet run
- Open a terminal and start the webpack dev server (frontend) - you will use this during development
Website\wwwroot> npm run dev
You should now have the site running on http://localhost:8080/.
In a traditional ASP.NET MVC project, Controllers and Actions are used to render Agility Modules. ASP.NET Core replaces them with ViewComponents. Using ViewComponents enables Agility.Web for ASP.NET Core to render modules on a page asynchronously.
In Agility, you set the Output Template for a module to be a View Component which corresponds to the name of your ViewComponent class.
If you have a module with a View Component Name set to Callout, then Agility.Web will look for a ViewComponent in your website.
CalloutViewComponent.cs:
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Website;
using Website.AgilityModels;
using Agility.Web.Extensions;
namespace Website.ViewComponents.Modules
{
public class Callout: ViewComponent
{
public Task<IViewComponentResult> InvokeAsync(Module_Callout module)
{
return Task.Run<IViewComponentResult>(() =>
{
return View("~/Views/Modules/Callout.cshtml", module);
});
}
}
}Callout.cshtml:
@model Website.AgilityModels.Module_Callout
@if(Model.Image != null)
{
<img src="@Model.Image.URL?w=200" alt="@Model.Image.Label" />
}
<h1>@Model.Title</h1>
@Html.Raw(Model.TextBlob)When ready to deploy a website built on this template, you'll need to build both your backend and frontend.
- In a terminal, run the following command to build the frontend:
Website\wwwroot> npm run build
- In a terminal, run the following command to build the backend - see dotnet publish for more information on this:
Website> dotnet publish --configuration Release