JSS(JavaScript Services) in Sitecore v9.1


JSS (JavaScript Services) is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected during development and deploy to any platform in a headless configuration with full Experience Platform capability preserved. To work with disconnected mode of application please follow below steps.


Step 1: Few things are required to work on JSS based structure.

Nodejs
Identify the nodejs is installed on your system with typing command node -v in the cmd prompt. This will help you see the version of nodejs currently installed on your system.

If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS. Official site’s homepage of nodejs will look like the following –




To install node on Windows 10, I downloaded node-v10.15.3-x64.msi from nodejs.org site. Run this msi file and follow the required step to install.


Angular
To install Angular write command on cmd npm install -g @angular/cli
Now npm and Angular installed on your system. In next step we install the JSS CLI from same command prompt.

Step 2: Install the JSS CLI with command npm install -g @sitecore-jss/sitecore-jss-cli


Check JSS version.



Step 3: Time to choose a JSS application template. JSS CLI support applications developed in React, Vue and Angular. Here I am working with Angular application so I will create JSS template for Angular version.

Styleguard Template This template supports basic Sitecore features like (routing, multilingual, GraphQL) and using popular supporting libraries for their frameworks.

Experimental Template These templates are basically examples for some advance or complex task

sitecore-embedded-jss-app This app shows how to embed a JSS application inside an existing Sitecore site as a rendering. To get more idea about this app please reach out to Sitecore official site for JSS https://jss.sitecore.com/docs/techniques/mvc-integration/client-side-embedding
sitecore-javascript-renderings This app shows how to render a JavaScript app as a rendering embedded within a traditional Sitecore MVC site. See JavaScript Renderings for details.

Step 4:  Here we are creating an application using specific template i.e. angular. Currently I am working on angular so I choose JSS application with angular template combination. To create a new JSS application please write below command on cmd
jss create <your-app-name> <app-template-name>



Once application is created then a message will display on same window for completion of app creation.



Go to project location and find the source code and related modules as well.



Step 5: Time to run your application with command jss start  in cmd from the project location for me it’s F:\RSI\SharjeelsWork\RD\JSS-9.1\jss-ninedotone-test


Finally JSS application running on localhost with port no 3000. This is a basic setup to initiate with JSS application. Soon I will share my next article on JSS application modes.



Happy Learning!!!


Comments

Post a Comment

Popular posts from this blog

Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0

Image
I got above error after adding dependency in Maven POM xml file placed under newly created AEM arch type and running command  mvn -PautoInstallPackage clean install . Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0 After google and gone through few article I got command ( mvn -PautoInstallPackage -Padobe-public clean install) . Once I run this command this issue with jar compatibility was resolved. Happy Learning!!!
Read more

ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote'

I was getting below error while working with cache management on CM and CD server. Actually my code was working fine on CM server but I was not able to access or clear cache object on CD server because of wrong event selection.  PID[18108] Error       ManagedPoolThread #3 16:24:16 ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote' event.Source: Sitecore.Kernelat Sitecore.Events.Event.EventSubscribers.RaiseEvent(String eventName, Object[] parameters, EventResult result)at Sitecore.Events.Event.RaiseEvent(String eventName, Object[] parameters)at Sitecore.Eventing.Subscription`1.Invoke(Object instance, EventContext context)at Sitecore.Eventing.EventProvider.RaiseEvent(Object event, Type eventType, EventContext context) Above error comes due to wrong event args access in CD server. T...
Read more

Dot Net Core Application Packaging using Octo

Image
Octo.exe is a command line tool that interacts with the Octopus Deploy REST API and includes a pack command to create packages either as Zip or NuGet packages for deployment with Octopus. Installation We recommend installing Octo as a global tool using .NET Core which makes Octo available as a command via the .NET CLI. If you have the .NET Core 2.1.300 SDK available you can install Octo onto a machine or build agent as a global tool with the following command: dotnet tool install Octopus.DotNet.Cli –global Publish your application There are two ways to publish your dot net core application. One you can do from command line and other from Dote net solution it self. Command Line Dot net publish source/sharjeelsWorkCore.Web --output published-app --configuration Release dotnet publish F:\RSI\SharjeelsWork\RD\Core\sharjeelsWorkCore\sharjeelsWorkCore\sharjeelsWorkCore.csproj --output published-app --configuration Release Dote Net Solution Right c...
Read more