In the previous tutorial, we were deploying a sample app, and now we will go ahead and start developing our application, and testing it locally before we deploy it to Sitecore again.

In this tutorial, we will learn how to build a functioning application with Sitecore JSS and React.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

If you have skipped previous steps, and you would like to dive right into the Sitecore JSS development, have a sample ready, by following the instructions:

Before we begin by diving into the code, I would like to spend some time explaining some of the files are located and how we will be using them. These items were generated during the initial set up of a sample application

Route Layout Definition

In this file, we will be adding placeholders, components, editing field values, etc…

Sitecore JSS Route
yourApplicationName/data/routes/en.yml

Component Definition

This is where part of your component will be stored, where you will be designing your component data structure, setting fields, setting an icon for the component, as well as defining placeholders, that need to be exposed.

Sitecore JSS Component

Component Source

This is where you will be creating your component, designing the look and feel of it.

Sitecore JSS Component

Layout

In Layout.js you will be designing your page layout

Sitecore JSS Layout

Placeholder settings

In placeholders.sitecore.js you will be adding placeholders

Sitecore JSS Placeholder Settings

Register Placeholders in the package.json

If you will be creating any placeholders, you will have to register them in your package.json file.

 "config": {
    "rootPlaceholders": ["jss-1", "jss-2"]
Sitecore JSS Register Placeholders

We will be taking an approach of Disconnected Mode. So we will be creating a website locally first using Sitecore JSS CLI

You might notice that screenshots are different before this line, and it is referencing a “CV” application, it is my other project, everything below this line, will be all related to “sitecore-jss-blog”.

First, we will start with the creation of a sample app, and you can follow instructions in Step 2 on how to get started or follow instructions on https://jss.sitecore.com/docs

Next step we will start creating components and placing them on the page

First Part that we will focus on will be creating a few components using JSS CLI:

jss scaffold BlogHeader
jss scaffold BlogMainContent
jss scaffold BlogFooter
jss scaffold Article

It will automatically generate all the files that are needed for your development.

At this time we can start adding styling and all of the content

Let’s add some fields and set the icon for the BlogHeader Component

Sitecore JSS BlogHeader Component Definition
sitecore/definitions/components/BlogHeader.sitecore.js

Now let’s customize the BlogHeader component

Sitecore JSS BlogHeader Component React Source
src/components/BlogHeader/index.js

Go ahead and add some data to data.yml

Sitecore JSS BlogHeader Component Data
data/routes/en.yml

You might notice that I have modified the default placeholder, you can also do it, by editing the main layout and registering the placeholder

Sitecore JSS Header Placeholder
Please add this block of code into your layout, wherever you wish to have your placeholder.

And don’t forget to register it in your package.json

Sitecore JSS Register Placeholders
package.json

Let’s preview this in our browser

Sitecore JSS Blog

Next, let’s go ahead and add another component into the other placeholder, first let us add the placeholder to our Layout.

Sitecore JSS Placeholders
Layout.js

Now we will go ahead and update the BlogMainContent, definition as well as the source, the component that we created earlier with Sitecore JSS CLI.

Sitecore JSS BlogMainContent Component Definition
Sitecore JSS BlogMainContent Component Source

Lastly, let’s go ahead and add some data.

Sitecore JSS Data.yml

Let’s check out the browser you should see your changes here

Sitecore JSS Blog Local Disconnected

Now you have a functioning page, and you are able to load and modify the content locally. We will dive deeper in routes and Footer in the next series, please follow me and twitter to get the latest updates and you can get the code for free from my GitHub and use it for your own project.

In the next step, we will be learning How to deploy Sitecore JSS app to Sitecore, so we can see utilizing all the functionality of the platform such as Experience Editor and of course utilize Personalization.

5 thoughts on “Sitecore JSS Series for Developer: How to build a functioning Sitecore JSS app (3 of 5)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s