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.
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.
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.
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.
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.
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.
Data source Under this path: /sitecore/content/JssTenant/demojss/Data/Promo/Promo sitecore
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.