Sitecore JSS Step By Step

 Sitecore JSS step by step

There are  two different approaches by which you can create your application using sitecore JSS.

1) Code First   2) Sitecore First

Sitecore integration and data flow

Let's start with some practical. To create JSS application please follow below steps:

1) Download and Install Node.js

Download | Node.js

2) Install Sitecore JSS CLI

 2.1) Run below command in command prompt to install sitecore JSS.It will take couple of minutes.

       

           npm install -g @sitecore-jss/sitecore-jss-cli

 2.2) you can check which version of JSS got installed using below command.

           jss --version

3) Create JSS Application, I am using react.js here for same.

 

     Run below command 

       Syntax:      jss create <<your application name>> <<application template name >>

    

              jss create jss-demo react

4) Start sitecore JSS Application

  

Go to jss-demo folder which we created in step 3 and run below command

      jss start

5) Create a new component

   5.1) Open Windows powershell  and run below command

           jss scaffold Mycomponent

Note:- Component name should always begin with Capital Letter and contain only letters and numbers.

   some time you see below error

jss : File C:\Users\admin\AppData\Roaming\npm\jss.ps1 cannot be loaded. The file

C:\Users\admin\AppData\Roaming\npm\jss.ps1 is not digitally signed. You cannot run this script on the current system.

For more information about running scripts and setting execution policy, see about_Execution_Policies at

https:/go.microsoft.com/fwlink/?LinkID=135170.

At line:1 char:1

+ jss scaffold Myfirstcomponent

+ ~~~

    + CategoryInfo          : SecurityError: (:) [], PSSecurityException

    + FullyQualifiedErrorId : UnauthorizedAccess

   for time being you can run below command to resolve above issue.check it with your security team later on this.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

after this command, run again jss scaffold Mycomponent it will work fine.

5.2) In source code folder, go to Sitecore -> defination-> component ->Mycomponen.sitecore.js.In the field section,add all the required fields as shown below,

  

source code:

    // eslint-disable-next-line no-unused-vars

import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

/**

 * Adds the Mycomponent component to the disconnected manifest.

 * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.

 * @param {Manifest} manifest Manifest instance to add components to

 */

export default function(manifest) {

  manifest.addComponent({

    name: 'Mycomponent',

    icon: SitecoreIcon.DocumentTag,

    fields: [

        { name: 'heading', type: CommonFieldTypes.SingleLineText },

        { name: 'headingDescription', type: CommonFieldTypes.RichText },

    ],

    /*

    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']

    */

  });

}

5.3) open en.yml file which is located in following location ( ~/data/routes/en.yml),you will see placeholder section,add your placeholder as shown below:

placeholders:

  jss-main:

  - componentName: Mycomponent

    fields :

     heading : This is my first component

     headingDescription : <h1> Please comment </h1>

please note that there should not be any error in console.

5.4) Please change your MyComponent index file which is located at src/components/mycomponent/index.js based on the fields which you need to show as shown below

Source code:

import React from 'react';

import { RichText, Text } from '@sitecore-jss/sitecore-jss-react';

const Mycomponent = (props) => (

  <div>

        <Text field={props.fields.heading} /><br />

        <RichText field={props.fields.headingDescription} />

  </div>

);

export default Mycomponent;

6) Test newly created component

         you will see the changes in your browser as i have added it in jss-main placeholder.

  

some time if you see build error as shown below

Failed to compile
src\components\Myfirstcomponent\index.js
Line 1:27: Insert `␍` prettier/prettier
Line 2:67: Insert `␍` prettier/prettier
Line 3:1: Insert `␍` prettier/prettier
Line 4:38: Insert `␍` prettier/prettier
Line 5:8: Insert `␍` prettier/prettier
Line 6:1: Replace `········<Text·field={props.fields.heading}·/><br·/>` with `····<Text·field={props.fields.heading}·/>␍⏎····<br·/>␍` prettier/prettier
Line 7:1: Replace `········<RichText·field={props.fields.headingDescription}·/>` with `····<RichText·field={props.fields.headingDescription}·/>␍` prettier/prettier
Line 8:9: Insert `␍` prettier/prettier
Line 9:3: Insert `␍` prettier/prettier
Line 10:1: Insert `␍` prettier/prettier
Line 11:33: Insert `␍` prettier/prettier

then do following steps to resolve this issue

i) create .eslintignore file in your source folder

ii) open it using editor and write  following line

src/*

7) Lets deploy the JSS Application into sitecore 

7.1)  go to sitecore-> config folder ,you will see site patch as shown below:

      

         <site patch:before="site[@name='website']"

            inherits="website"

            name="jss-demo"

            hostName="jss-demo.dev.local"

            rootPath="/sitecore/content/jss-demo"

            startItem="/home"

            database="master" />

add binding in sitecore instance where you want to deploy jss application and make sure to add host entry.

7.2) Create a new API Key under /sitecore/system/Settings/Services/API Keys,keep new api key handy as it is needed in next step.

7.3) Run jss setup as shown below,give answer to questions appropriately. below image is just for sample. Give answers to questions based on how you setup.

you will see a new file got generated scjssconfig.json
 

{

  "sitecore": {

    "instancePath": "C:\\inetpub\\wwwroot\\sitecorejssdemosc.dev.local",

    "apiKey": "{E5094782-ED97-4E91-89D5-E26DBEE86EB2}",

    "deploySecret": "30j8k1xv53ea50hgo5ter4yuars0fczkqdsfk0st1s7k",

    "deployUrl": "http://jss-react-demo.dev.local/sitecore/api/jss/import",

    "layoutServiceHost": "http://jss-react-demo.dev.local"

  }

}

7.4) In windows powershell type jss deploy config

7.5) In windows powershell type jss deploy app --includeContent --includeDictionary

sitecore import service will deploy the application in sitecore.It will create all required item in sitecore.

7.6) Open sitecore instance,you will be able to see new component which we created.

8) Test Home item in experience editor mode

8.1) Click on Home tab and open it in sitecore experience editor.

8.2) Edit the conent in experience editor and save it.

9) Run JSS application in connected mode

type following command  to run it in connected mode.

jss start:connected