Creating the First Sitecore JSS Component

JSS is a complete SDK (Software Development Kit) for JavaScript developers that enables you to build full-fledged solutions using Sitecore, modern JavaScript UI libraries, and frameworks.

You can also develop and start projects while being completely disconnected from Sitecore without the need to even install it.

JSS is Sitecore's response to the ever-growing headless trend in the dynamic world of web development. It allows you to build and customize your front end by using API calls to Sitecore while using the Sitecore Personalization Layer for all personalized experience requirements.

 

Setting up Your Environment

Before beginning to set up your environment, it is important to take note of some important considerations. The first consideration is that it is necessary to have a running node installation.

To do that, download the LTS install and run it. You can verify by opening up the command line and running node -v to confirm your installation.

Next, it is important to have the JSS CLI as it ensures a smooth and seamless setup of the following steps and provides an easy-to-use CLI to get your components to Sitecore.

You may install it by running the following command in any command window: npm install -g @sitecore-jss/sitecore-jss-cli. You can also verify your installation afterward by running jss --help.

Creating Your App

The next step toward your first component is to set up your app. Since JSS supports React (native), Vue, and Angular, users are free to make their choice although React is usually the majority preference.

Open the command line where you would like to create the application and run the following:

jss create <your-app-name> react </your-app-name>

After this, you will notice some prominent Ascii art as shown below, marking the end of the app creation.

Since we would run disconnected for this first component, we would not be required to have any running Sitecore instance for now.

 

<your-app-name> And this means that we can fire the application up with the following command: jss start. However, do remember to have a command line inside the app root folder cd <your-app-name>. </your-app-name></your-app-name>

 

After this, your browser would open up to a "Welcome to Sitecore JSS" page. Keep this command window open for the following steps as it runs the webserver behind.

A JSS component is just a regular front-end component. These components are defined just like any standard component in your library of choice.

JSS components are also dynamically bound to routes. You must never directly instantiate or render a component because the JSS infrastructure handles instantiation based on layout data.

Unlike regular JavaScript components, JSS components have properties that contain the content data. When working connected to a Sitecore instance, in development or production, the data comes from Sitecore endpoints.

When working without access to a Sitecore instance, you mock the content using local YAML or JSON files.

Now we have everything ready to create our first React Component for Sitecore JSS. We can open the app we had created in a code editor of our choice.

For this blog, I have chosen Visual Studio for the job. In the tree structure, you will be able to observe a bunch of files and folders that have already been created. For now, we will only focus on "src", "sitecore" and "data".

We can use the automatic scaffolding of our component (jss scaffold MyFirstComponent), but to understand what is going on, I've added the manual steps below.

Manual scaffolding

We begin by assigning a name to our first component inside the "src/components". Inside this folder, we will then add the main JavaScript file consistently named "index.js".

Inside this index.js file, we can then add some boilerplate code as shown below

Right now, we have created the "view" of the component. For JSS to recognize this as a component. We need to define it as such as well.

 

To do this let's create a new file inside of "sitecore/definitions/components" named <your-component-name>. sitecore.js. In this file, you can add the following boilerplate code.  

We have to keep in mind that the component name that we set in this definition should match the folder name created for the view of the component.

Add the component to a route

To have the component shown up on a route we need to add it to the content of that route. We do this inside the "data/routes" folder.

Here you can see a "en.yml" file for as long as you are disconnected from Sitecore. This is the place where your layout and content are defined. At this stage, this file holds the basic "Welcome to Sitecore JSS" page.

To add our component to this page, we can add the following code above the existing "ContentBlock":

At this step, you will now see the following page in your browser application

Conclusion

And with this, we have successfully created our first Sitecore JSS component. If you have any queries or concerns regarding the aforementioned demonstrated process, then do reach out to us.

Our team will help you with guidance, consultation, and assistance with implementing JSS components to enhance your digital consumer experience.