Blog posts by Harinarayanan2023-04-28T18:14:23.0000000Zhttps://world.optimizely.com/blogs/harinarayanan/Optimizely WorldContent Delivery / Headless API Implementation <p>Hi,</p>
<p>I was new to the Headless (CD) implementation and learned with the help of existing resources and implemented it successfully for our requirement, so thought of sharing the implementation steps, in case anyone looking for step by step Content Delivery API implementation or Headless Implementation.</p>
<p> Below are the tools/platforms I 've used for the implementation,</p>
<ol>
<li>CMS 11 </li>
<li>React </li>
<li>ContentDeliveryApi.Cms 2.21.1</li>
</ol>
<p><strong>Step: 1</strong></p>
<p>Install the below packages through the NuGet package manager.</p>
<pre class="language-markup"><code><package id="EPiServer.ContentDeliveryApi" version="2.19.0" targetFramework="net48" />
<package id="EPiServer.ContentDeliveryApi.Cms" version="2.21.1" targetFramework="net48" />
<package id="EPiServer.ContentDeliveryApi.Core" version="2.21.1" targetFramework="net48" />
<package id="EPiServer.ContentDeliveryApi.Forms" version="2.21.1" targetFramework="net48" /></code></pre>
<p><strong></strong></p>
<p><strong>Step: 2</strong></p>
<p>Add the below configs into web.config, I'm not sure 100% knowledge on why this is required but either of those configs should be set to <strong>true,</strong> and the other one should be set to <strong>false,</strong> and not both of them set to <strong>true or false</strong>.</p>
<pre class="language-markup"><code> <add key="episerver:contentdeliverysearch:maphttpattributeroutes" value="true" />
<add key="episerver:contentdelivery:maphttpattributeroutes" value="false" /></code></pre>
<p><strong>Step: 3</strong></p>
<p>Add a new Initialization module,</p>
<pre class="language-csharp"><code>using EPiServer.ContentApi.Cms;
using EPiServer.ContentApi.Core.Configuration;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using System;
using System.Linq;
namespace Alloy.Web.Admin.ContentDeliveryApi
{
[InitializableModule]
[ModuleDependency(typeof(ContentApiCmsInitialization))]
public class ContentDeliveryApiInit : IConfigurableModule
{
public void ConfigureContainer(ServiceConfigurationContext context)
{
context.Services.Configure<ContentApiConfiguration>(config => {
config.Default().SetMinimumRoles(String.Empty);
});
}
public void Initialize(InitializationEngine context)
{
//Add initialization logic, this method is called once after CMS has been initialized
}
public void Uninitialize(InitializationEngine context)
{
//Add uninitialization logic
}
}
}</code></pre>
<p>Once you are done with the above steps you can re-build and run your solution to verify everything okay with the solution.</p>
<p>If you see your solution is working fine, then you can test Content Delivery API by accessing a site content with the help of <strong>Visual Studio Code</strong>(I feel it's a very feasible tool to access Headless content), In case if you don't have a <strong>REST Client</strong> in your Visual Studio Code please install the below Extension, It's really useful during our Headless implementation to test content.</p>
<p><img src="/link/22eaae12d72e4d51afec8c522c10eae7.aspx" /></p>
<p><em><span style="font-size: 14pt;"><strong>Examples:</strong></span></em></p>
<p><strong>To get site definitions:</strong></p>
<p><a href="https://localhost:44300/api/episerver/v2.0/site/">https://localhost:44300/api/episerver/v2.0/site/</a></p>
<p><img src="/link/e59bb74c9d6944b89062e77e5c18614e.aspx" /></p>
<p><strong>To get your page content: </strong></p>
<p><a href="https://localhost:44300/api/episerver/v2.0/content/420003">https://localhost:44300/api/episerver/v2.0/content/420003</a></p>
<p><strong>To Expand the Content Area/Content reference within Content: </strong></p>
<div>
<div><span><a href="https://localhost:44300/api/episerver/v2.0/content/420003?expand=*">https://localhost:44300/api/episerver/v2.0/content/420003?expand=*</a></span></div>
<div><strong>To Get Language-Specific Content: </strong></div>
<div><strong></strong></div>
<div>
<div>
<div><span><a href="https://localhost:44300/api/episerver/v2.0/site/?language=fr">https://localhost:44300/api/episerver/v2.0/site/?language=fr</a></span></div>
<div><span>In this way, your content is ready to access through Content Delivery API.</span></div>
<div><strong>Step 4:</strong></div>
<div><span>If you above all are working as expected we can move on to the next step.</span></div>
<div><span>The next will be creating the Content type, ViewModel, Controller, Basic view, and React development for fetching data and rendering data.</span></div>
<div><span>In my case had to create all of the above from scratch, maybe your case may differ. So I like to cover those parts in another blog. </span></div>
<div><span style="text-decoration: underline;"><em><strong>Please feel free to add your comments, questions, thoughts, or any missing steps.</strong></em></span></div>
<div><span style="text-decoration: underline;"><em><strong></strong></em></span></div>
<div><span style="text-decoration: underline;"><em><strong></strong></em></span></div>
<div><span>Thanks for reading. Have a good day. </span></div>
</div>
</div>
</div>2023-04-28T18:14:23.0000000ZBlog post