JSS,THE HEADLESS CMS- PART 1

JSS,THE HEADLESS CMS- PART 1

In this post, I just discuss why we need JSS and what issues might happen during the installation.

Why headless CMS?

One of the popular CMS is Sitecore which is based on Asp.net MVC where it's design used to be quite monolithic (versions before 9) not only in terms of back-end but also front-end.
Since version 9+ came out the design is much closer to Micro-services in particular Frontend side of it.
As a bit of history, if you worked with Sitecore 8 it was not easy to separate front-end from back-end which means front-end developers also needed to install Sitecore in their machine which was not an easy process and they had to deal with the complexity of Sitecore in terms of design and installation. I have a post to demonstrate how I moved even Sitecore 8 to embed a micro front-end but I would say it needs also lots of back-end process to export the data from sitecore to keep content editable feature of it.
Moving to JSS (Sitecore JavaScript Services) gives front-end devs this opportunity to work independent from Back-end and once they finish their design in disconnected mode where using local contents then and later on they can integrate the app to sitecore services. Also while Sitecore is dependent on Windows OS, JSS makes front-end platform agnostic of OS and language as you can work on MAC or use any JS framework like Angular, React, Vue.

JSS Installation

According to Sitecore JSS docs there are a few steps you need to take. Each of them would have a few issues that I explained how to be resolved.

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

The only issue might happen here is when you are behind the proxy and you get self certification issue.
First make sure you have jss globally installed and added to the path.
You can figure out your global npm location by running this command:
npm config get prefix

Solution:
I will tell you my solution for windows and for Mac the commands should be adapted.
Open a command window in Administrator mode and set it in the list of process.env in node by running this command set NODE_TLS_REJECT_UNAUTHORIZED=0
and use npm config set strict-ssl false
Alternative is setting the windows variable NODE_TLS_REJECT_UNAUTHORIZED=0 but I prefer node variable.
P.S) I recommend after you run the next step and create your Jss app then set the node variables above to the original value to avoid any attack.
set NODE_TLS_REJECT_UNAUTHORIZED=1

2. jss create my-first-jss-app react

At this point you might not get error but once if finished, you need to run two commands:
npm i @vue/eslint-config-prettier
npm i eslint-plugin-prettier

3. jss start

At this step you might have some issues with PORT. By default JSS assumes the App will be installed on 3000 port however if this port is taken by any other app, you will have issue running your APP. Looking at console it tells you that your app is running on port 3002 or etc.
Therefore you need to either figure out what is the PID of your PORT 3000 and kill it or change the port in your code template.

first solution:
Run these command:

  • Download and install Process Explorer app and find out if PORT 3000 is taken.
  • Run this command: netstat -ano | findstr :3000
    If you use process explorer app you can see the list of taken ports as below:
    take-port
  • Kill the process: tskill 9500 (9500 is the outcome of last command which is the ID of the process
  • Sometimes it is taken by windows process so you cannot easily kill it then you need another solution for that.
    second solution:
    In here you need to change the port in the code;
    Look for 3000 inside your code and replace it with the new port that you get in the console (3002 for instance)
    Once you fixed it, this is what you receive as a default result on your site.
    jss-output

JSS Post Series will be continued