JSS Server Setup for Headless Architecture with Sitecore v9.1
In this article I am trying to setup JSS server for disconnected developer mode. Advantage of Disconnected mode is that application can be deployed without availability of sitecore instance. In this mode sitecore content can be mocked in flat files like(yml/json/js).
Benefit to work on disconnected architecture are as
• Browser automatic render changes done by developer.
• Execution will be fast as data is coming from flat/local files.
• Development will be fast as complete server is based on node js.
Note : Disconnected mode will be helpful to handle site which is having huge traffic. It provides additional scaling options, better scalability, and lower hosting costs for heavy traffic.
Prerequisite:
• Install node, JSS and angular with the help of my last article.
• Install Sitecore V9+ as explained in my previous article.
JSS License for Sitecore:
• JSS server-side functionality requires an JSS-enabled license file.
• To check if your license is a JSS-enabled license, open your license.xml in a text editor and search for Sitecore.JSS - if it's found, you're ready to use JSS. Not there? Read on.
Sitecore Component for scaled server installation
It is required to download and install package from sitecore site (https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services.aspx)To maintain sitecore server for production which may have one or many CD server. This package is required in server configuration for scaling purpose.
Install this package from sitecore development tool – installation wizard. Upload the package and install it.
After package installation please verify that
installed package with below url from your sitecore instance.
Configure a site name for JSS app with sitecore instance in site
definition configuration file.
After configuring site on required route add a website or binding in
existing website in IIS. Here I created a new site in IIS and entered site name
in host file.
API Key for JSS
Sitecore service client (SSC) provide the API key for service which is used by JSS. Also the same API is used by many sitecore features like
• Layout Service
• GraphQL
• Tracking Service
• Dictionary Service
Login to your jss sitecore instance as mine is available with url on my local system. http://jssapp.9dot1.sc/sitecore
Now open content editor and go to location /sitecore/system/Settings/Services/API Keys
Add a new key inside AppKey folder as I had created with name NewsApiKey
CORS Origins: If you will be using connected mode (quite likely), the APIs will need to support CORS so that your dev server (default: http://localhost:3000) is allowed to make HTTP calls to the JSS services. For purely local development setup, use * to allow all origins. In production, only allow specific origins (multiple origins are ;-delimited).
AllowedControllers: Use the following value. It is also possible to use *, but explicitly whitelisting controllers is a best practice. If you use additional custom SSC API controllers, they would need to be added to this list. Note that GraphQL endpoints require both the GraphQLController to be whitelisted, as well as the GraphQL endpoint URL (with GraphQL:/path/to/endpoint/from/config):
Sitecore.LayoutService.Mvc.Controllers.LayoutServiceController;
Sitecore.JavaScriptServices.Globalization.Controllers.DictionaryServiceController;
Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController;
GraphQL:/api/yourappname
Verification: Make a request to the Layout Service on your Sitecore
Host: http://9dot1.sc/sitecore/api/layout/render/jss?item=/&sc_apikey={EEB0638F-B5B9-4F00-8AC9-9D9C0741AFA1}
Now I am able to access API from sitecore instance. In this way setup is completed now I will focus on deployment of JSS application with sitecore in my next article.
Happy Learning!!!
Comments
Post a Comment