One of the questions I hear most frequently from both developers and business clients is: JSS; what is it, and how can we use it? I take a quick look at how you might implement a simple JSS applicatioyyyByy y yB
Below, I run through the process of building a very simple Sitecore-JSS application using React and JSS. Sitecore-JSS allows developers to build dynamic, server-rendered applications that integrate seamlessly with Sitecore's content management system. By the end of this tutorial, you'll have a working Sitecore-JSS application that can be easily customized and extended to meet your needs.
Prerequisites
Before we get started, make sure you have the following installed:
Node.js (version 12 or higher)
npm (version 6 or higher)
Sitecore JSS (version 14 or higher)
Visual Studio (or another IDE for .NET development)
Creating a New JSS Application
To create a new JSS application, follow these steps:
Open a a command prompt window and run the following command to create a new React application called "jss-demo": npx create-react-app jss-demo
Navigate to the "jss-demo" directory that was created by the previous command: cd jss-demo
Install the necessary dependencies for JSS and its integration with React into your project: npm install jss react-jCreating the Sitecore-JSS App Item
To integrate our JSS application with Sitecore, we first need to create a new Sitecore-JSS app item:
Open Sitecore Content Editor and navigate to the root of your Sitecore content tree.
Right-click on the content tree and select "Insert from template".
Select the "JSS App" template and enter a name for your app.
Fill out any additional fields as necessary, such as the "JSS Mode" field, which should be set to "Integrated".
Click "Save" to create the app item.
Creating the JSS Application Layout Item
Next, we need to create a new JSS application layout item. This item defines the layout of our application and specifies the placeholder definitions that will be used to render our JSS components:
Open Sitecore Content Editor and navigate to the "Presentation" folder of your Sitecore-JSS app item.
Right-click on the "Layouts" folder and select "Insert from template".
Select the "JSS App Layout" template and enter a name for your layout.
Fill out any additional fields as necessary, such as the "Placeholder Settings" field, which should define the placeholders used by your JSS components.
Click "Save" to create the layout item.
Creating JSS Component Items
Finally, we need to create a new JSS component item for each component that we want to use in our application. These items define the data and rendering logic for our components:
Open Sitecore Content Editor and navigate to the "Components" folder of your Sitecore-JSS app item.
Right-click on the "Components" folder and select "Insert from template".
Select the "JSS Component" template and enter a name for your component.
Fill out any additional fields as necessary, such as the "Datasource Template" field, which should specify the template used for the data source items for this component.
Click "Save" to create the component item.
Repeat this process for each component you want to use in your application.
Writing the Backend Code
In addition to creating the necessary Sitecore items, we also need to write some backend code in C# to support our JSS application. Specifically, we need to create a controller that will handle the requests for our JSS application.
To create the controller, follow these steps:
Open Visual Studio and create a new ASP.NET Core MVC Controller.
In the controller class, add a method that will handle the requests for your JSS application. This method should return a JsonResult object containing the data for your application.
using Microsoft.AspNetCore.Mvc;
using Sitecore.JavaScriptServices.ViewEngine.Presentation;
using Sitecore.JavaScriptServices.ViewEngine.LayoutService;
using Sitecore.JavaScriptServices.ViewEngine.LayoutService.Mvc;
using Newtonsoft.Json.Linq;
namespace JssDemo.Controllers
{
public class JssController : Controller
{
private readonly IMvcLayoutService _layoutService;
private readonly IMvcRenderer _renderer;
public JssController(IMvcLayoutService layoutService, IMvcRenderer renderer)
{
_layoutService = layoutService;
_renderer = renderer;
}
public JsonResult GetJssData()
{
var result = _layoutService.ExecuteLayoutServiceRequest(Context.Site.Name, new LayoutServiceContext
{
RouteData = ControllerContext.RouteData.Values,
RenderingId = HttpContext.Request.Query["renderingId"],
ViewEngine = new JssReactViewEngine(_renderer)
});
var data = JObject.Parse(result.RenderedOutput);
return Json(data);
}
}
}
Configure the JSS server to use your new controller by updating the "App_Config\Include\JSS\Sitecore.JavaScriptServices.AppServices.config" file in your Sitecore instance. Add a new entry to the "Apps" section of the file that specifies the name and URL of your JSS application, as well as the name of your new controller.
<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<javaScriptServices>
<appServices>
<apps>
<app name="jss-demo"
sitecorePath="/sitecore/content/jss-demo"
useLanguageSpecificLayout="false"
serverSideRenderingEngine="jss"
serverSideRenderingEngineEndpoint="/api/layout/render"
controller="Jss" />
</apps>
</appServices>
</javaScriptServices>
</sitecore>
</configuration>Writing the Frontend Code
With our Sitecore items created and our backend code in place, we can now write the frontend code for our JSS application using React and JSS.
CIn your React application, create a new component for each Sitecore component you want to use in your application. These components should be responsible for fetching the data for their corresponding Sitecore items a
To use JSS and React together, you'll need to use the "createUseStyles" hook from "react-jss" to define your component styles, and you'll need to use the "ThemeProvider" component to apply the current theme to your component tree.
Finally, you'll need to use the "JssProvider" component to connect your JSS application to your Sitecore instance. This component should be placed at the top level of your component hierarchy.
Anybody who knows me knows I’m definitely not a front-end coder, but this is what a simple JSS component might look like:
import React, { useState, useEffect } from 'react';
import { createUseStyles } from 'react-jss';
import { JssProvider } from '@sitecore-jss/sitecore-jss-react';
import { ThemeProvider } from 'react-jss';
import theme from './theme';
import axios from 'axios';
const useStyles = createUseStyles({
root: {},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
},
body: {
fontSize: 16,
marginBottom: 16,
},
});
const SimpleJssComponent = (props) => { const [data, setData] = useState({});
useEffect(() => { const fetchData = async () => { const result = await axios( '/api/jss/getjssdata?itemPath=' + props.itemPath ); setData(result.data); }; fetchData(); }, [props.itemPath]);
const classes = useStyles();
return (
<div className={classes.root}>
<ThemeProvider theme={theme}>
<JssProvider disableFallbackStyles={true} i18n={{ translations: data.sitecoreContext.language }} >
<div>
<h2 className={classes.title}>{data.title}</h2>
<div className={classes.body} dangerouslySetInnerHTML={{ __html: data.body }} ></div>
</div>
</JssProvider>
</ThemeProvider>
</div> );
};
export default SimpleJssComponent;In this code snippet, we define a simple component that fetches data from our backend controller and renders it using JSS and React. The "createUseStyles" hook is used to define the component styles, and the "ThemeProvider" and "JssProvider" components are used to apply the theme and connect to the Sitecore instance, respectively.
tl;dr
Headless applications are the future of digital development, and at this point - in my humble opinion - all new development should almost certainly be done in a headless fashion absent specific requirements that prevent you from doing so. We’ve shown how with a few quick steps, you can create a simple JSS application that will be almost infinitely scalable, and easily maintainable. If you have any questions, please feel free to drop them in the comments (unless they’re to critique my FE code :)). Take the code here, and use it as a foundation to write your own JSS apps. Have fun!
Comments