Sitecore JSS provides a lot of benefits in comparison to the classic Sitecore MVC development approach and gives more freedom to front-end developers. JSS supports three major frontend frameworks: Angular, React, and VueJS. This Demo will mostly cover all the steps for integrating a ReactJS application with Sitecore using Sitecore-JSS in Sitecore-first approach.
Step 1: Create a Sitecore application:
Create a tenant under this path/sitecore/content, after that create site under the tenant.
JSS is a playground of Frontend developer and rendering of components is always performed by NodeJS engine. So, if you are using code-first approach, all the templates, content, and renderings will be done from front-end. On the other hand, if you are using sitecore-first approach the template and content can be created by sitecore-developers with mutual agreement with front-end developers.
Step 2: Create React application:
Include scripts for starting (npm install) and By default JSS cli creates application using code-first approach.
All the required Sitecore-JSS packages will be added by default. So, no need to manually install them.
And than create application.
Step 3: Configure app’s site and host name
Open IIS and add your required hostname for sitecore instance.
In the example it is demojss.dev.local
Ensure the desired host name is mapped to your localhost via a host (C:\Windows\System32\drivers\etc\hosts) file entry.
Step 4: Setup an API Key:
Set up the fields on the API key:
Save the API key item and publish it. Make a note of Item ID. You’ll need this ID to connect the JSS app.
Step 5: Connecting React app (with SItecore-JSS) to Sitecore
Note: By default, the secret is stored in /scjssconfig.json and /sitecore/config/AppName.deploysecret.config — both of which are automatically ignored if you’re using Git for source control.
Step 6: Component Creation:
Data source Under this path: /sitecore/content/JssTenant/demojss/Data/Promo/Promo sitecore
Step 7: Personalisation
1 Rule(Day Rule) :
on specified day, accordingly you can see content of promo on UI.
So we created one another data source and put different content in to that.
2: Device rule :
In device rule you can see different content in mobile and tablet devices.so we created one another datasource and put content in to that.
In Device Rule we have set default promo which you can see in below image.