Create Sitecore JSS App using React JS

5 min readApr 23, 2019

In this article I will create a Sitecore JSS App using React JS. This App will have a simple page having 3 placeholders Header, Body and Footer. Then I will create a component and place it in Body placeholder. This component will display the current page title, description and image.

Prerequisite

Sitecore JSS components should installed on the development system. To install JSS server component, read my blog JSS server setup.

Create a React App

Open the Node JS command prompt.
2. Run the following command to create the JSS App.

jss create <appName> react

3. Go to the App name folder, you will see there are several folder and files are created.

4. This is a working App, you can run this app without Sitecore in disconnected mode. To run this app type following command the.

cd <appName>
Jss start

You can see this app running in browser by typing http://localhost:3000

Delete Default Created Files

When you create JSS app using “jss create “command, it creates several sample components for the reference purpose. In this test app I don’t need the sample components hence deleting them. Delete the following files.

Delete all folders and files under “/src/components/” folder
Delete all files under folder “/sitecore/definitions/components/”
Delete all files under folder “/sitecore/definitions/templates/”
Delete all files and folders under folder “/data/component-content/”
Delete all files and folders under folder “/data/content/”
Delete all files and folders “/data/routes/” except en.yml

Update App Files

Add Placeholders in Package.json

Open the Package.json file and add two placeholders named jss-header and jss-footer

Update Layout.js file

Open the Layout.js located in src folder and update it to include the placeholders.

Update Placeholder

Open the file “placeholders.sitecore.js” under “/sitecore/definitions/” and add the Header and Footer placeholders.

Create App’s API key

Login to Sitecore instance and open the content editor.
Navigate to “/sitecore/system/Settings/Services/API Keys/” and create a new Api key.

Create New Component

Use command jss scaffold <ComponentName> to create a new component. Here I am creating a PageContent component which will display current page title, content and image.

2. It will create following two files.

a) PageContent.Sitecore.js: It is the Sitecore component definition file located at “/sitecore/definitons/components/”

b) index.js: It is react component file located at “/src/component/PageContent/index.js”

3. Update the Sitecore component definition
Add the fields and their type in the fields section. these fields are used in Sitecore experience editor mode to edit the content.

export default function(manifest) {
manifest.addComponent({
name: ‘PageContent’,
icon: SitecoreIcon.DocumentTag,
fields: [
{ name: ‘pageTitle’, type: CommonFieldTypes.SingleLineText },
{ name: ‘content’, type: CommonFieldTypes.RichText },
{ name: ‘image’, type: CommonFieldTypes.Image },
],
/*If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder, register it here, or components added to that placeholder will not be returned by Sitecore: placeholders: [‘exposed-placeholder-name’] */
placeholders: [‘jss-main’]
});

4. Update the React component
Update the index.js file of component display the data as per UI definiton.

Update App Route Template

When you create the app, it creates a default route template named “App Route” with pageTitle field. This is defined in “routes.sitecore.js” file located at “/sitecore/definitons/”. I am extending this template and adding the “content” and “image” fields in it.

Update en.yml File

Open the en.yml under “/data/route” folder.
Remove the default component, its fields and data.
Add the “PageContent” in it.

Deploy the App

Now we are all set with the new app and time to deploy it. Here I will not detail about how to configure Sitecore and deploy the app. Use JSS build, deploy commands, deploy the app on Sitecore server.

Analyze the Content Tree and Verify Output

After deploying the app, login to the Sitecore instance and open the content editor.

You will see there is a new node created with name of app in the content tree.

2. Select the home item and go in to presentation details. You will notice that a page layout is applied to the home item and newly created PageContent component is added.

3. Select the PageContent component in content editor and go to the “Layout Service” section in the content pane. Set the field value “Rendering Contents Resolver” field to “Content Item Resolver”.