The image above describes the Sitecore headless environment along with the new features included in Sitecore 9.
To elucidate this further, you can build your JSS project using either of the two ways: Code-first or Sitecore-first.
In the Code-first method,
In the Sitecore-first method,
Irrespective of the method you follow, the interesting part of building a JSS project is the flexibility and ease you enjoy while building apps – while being completely disconnected from Sitecore. In this, you build the app first and move it to Sitecore later. This also leaves scope for Sitecore to improvise on allowing the building of applications with JSS. Applications are passed on to Sitecore using JSS code-first services via the Command Line.
For the starters, Headless is an architecture that follows the decoupled architecture system. This system allows the different components to remain completely autonomous and unaware of one another – this process is called physical decoupling in which the three components – Content Management, Content Delivery and Content Presentation are separated from one another.
Although the elements remain separated, the Headless architecture enables structural variations between the source and the target. Technically, in this system, a buffer is used to separate the program’s memory access from the execution functions.
Finally, before you start your JSS project ensure you have the following:
Ensure that you have enabled the Layout Service. Layout Service is a presentation layer via API (JSON). It allows personalization, mv texting, tracking and capturing analytics. It is included in JSS and SXA.
The image above depicts a view of the Content Editor.
The site is ready and we should now be able to proceed towards JSS installation.
Download and introduce the accompanying two JSS server packages in Sitecore (using the package installer) from below:
<add verb=“*“ path=“sitecorejss_media.ashx“
Make an API Key and note its Item ID; you’d need it while setting up the example application.
Record the Item ID of the API key – you’d require it in the Resulting stage.
Check that everything is working fine by visiting the link below
This will produce the JSON result.
Check out the steps to build a simple React demo using JSS as shown below:
Entering the above should display a prompt on your screen:
“Would you like to configure connection settings to a Sitecore instance?”
Answer by entering “Yes”.
Type in the name of your website’s folder and the host for your installed Sitecore instance.
If you encounter an issue, check if you have the required permissions to allow the script to run and/or copy files to your Sitecore instance.
We are now ready to deploy the app to Sitecore and use real-time data.
Run: npm run deploy-codefirst
It will run on your local host.
Check its functioning by accessing your Sitecore instance. Open Content Editor and go to: /sitecore/content/JSSBasicApp. You should see something similar to the screenshot below:
To view the working in a real-life scenario, open \samples\basic-sample-react\src\app\components\Welcome.js from the folder where you installed the demo.
Any content that you’ll now add to the page will reflect on your site. To check, open Command Line and enter Run: npm run deploy-codefirst. Your localhost should reflect the changes.
That completes the process and your first JSS project!