Sitecore’s JavaScript Services (JSS) is a holistic Software Development Kit that enables developers to build full-fledged web solutions using both Sitecore and JavaScript UI libraries and frameworks. To set up JSS, make sure you have a Sitecore instance compatible with Sitecore JSS services.

Let’s begin by ensuring we have a list of all the downloads that are needed to set up JSS. Following is a list of all the downloads that you will need:

1. Sitecore Experience Platform 10.3

https://dev.sitecore.net/Downloads/Sitecore_Experience_Platform/103/Sitecore_Experience_Platform_103.aspx

2. Sitecore JSS (JavaScript Services)

https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services.aspx

• Setup Sitecore. Once Sitecore is set up, follow the directions on the official Sitecore JSS site on how to set up the server.
• Login to Sitecore, go to Desktop and select Development Tools > Installation Wizard.

• Select the already downloaded package. Install it.

• Navigate to “/sitecore/system/Settings/Services/API Keys” in the content tree, and via right-click or the home ribbon, insert a new API Key item.

• Set up the fields on the API key.

CORS Origins: If you will be using “connected mode” (the most commonly used), the APIs will need to support CORS so that your dev server can 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 the 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”):

Impersonation User: Always specify an explicit user. The impersonation user is a Sitecore user whose security context specifies the security rights of the JSS app to Sitecore content. Most apps should use “extranet\anonymous”, providing the same security context as any anonymous web user. Note that authenticated users will receive their security context regardless of this setting.

• Verification: Make a request to the Layout Service on your Sitecore host.

  http://myapp.sitecore/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}.

  For example,

  https://sitecore10sc.dev.local/sitecore/api/layout/render/jss?item=/&sc_apikey={7F515AF9-E48F-4ACC-BA1A-C98C78A9D977}

• The request should come back with some JSON.

Conclusion

Sitecore in combination with JavaScript services is an absolute gift for developers aiming to build a range of holistic digital solutions. This blog not only elucidates the steps involved in setting up JSS in conjunction with Sitecore but also crucially touches upon the aspect of setting up an appropriate field on the API key.

If you’re interested to learn more about the possibilities of Sitecore JSS and APIs or are curious in general to know more about ways in which Sitecore might just be the perfect CMS solution for your business, get in touch with us. Our team of certified experts will be more than pleased to help you find the right solutions for your business needs.