JSS Integration with Angular and Sitecore First Approach in Connected Mode Architecture


To start work on Sitecore first approach you need to focus on json rendering rather than controller and view rendering.

I explained code first approach in my recent article so first setup code first approach then go for sitecore first approach.

Removing Code-First Artifacts
These instructions apply to all supported JS libraries.

Extensively customized apps using different techniques than the standard sample apps may require additional steps depending on their customizations.

Delete /data to remove disconnected route data, if it exists
Delete /sitecore/definitions to remove the manifest definitions




Delete /sitecore/pipelines (if it exists) to remove manifest pipeline patches
Delete /scripts/disconnected-mode-proxy.js to remove an unused script


In the package.json:
Remove the start script, and (optional) rename start:connected to start to remove the option to start disconnected

Remove the bootstrap:disconnected script

You can add new component in JSS app using below command. This will create a new component in your JSS app having all htmls, type scripts etc. files in your angular application.
jss deploy component sharjeelswork -- allowedplaceholders=jss-main



After adding the component scaffold it with below command. This command will create component related files in angular application.
jss scaffold sharjeelswork



Deploy files
Configurations and component related changes done in your JSS app should be deployed with below command.

jss deploy files



Now you can login in to sitecore instance and check your component is placed at location
/sitecore/layout/Renderings/Project/jssapp/sharjeelswork





Also you can check rendering is added in placeholder settings located at
/sitecore/layout/Placeholder Settings/Project/jssapp/jss-main






From Sitecore instance open app route item with the Experience Editor. You should be able to add your new component to its allowed placeholder from the UI.





In this way component is added to jssApp sitecore instance which have complete execution from Angular app. This approach known as sitecore first approach for connected mode architecture.

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

Operators in Asterisk with Linux

Operators When you create an Asterisk dialplan, you’re really writing code in a specialized scripting language. This means that the Asterisk dialplan—like any programming language—recognizes symbols called operators that allow you to manipulate variables. Let’s look at the types of operators that are available in Asterisk: Boolean operators These operators evaluate the “truth” of a statement. In computing terms, that essentially refers to whether the statement is something or nothing (non-zero or zero, true or false, on or off, and so on). The Boolean operators are: expr1 | expr2 This operator (called the “or” operator, or “pipe”) returns the evaluation of expr1 if it is true (neither an empty string nor zero). Otherwise, it returns the evaluation of expr2. expr1 & expr2 This operator (called “and”) returns the evaluation of expr1 if both expressions are true (i.e., neither expression evaluates to an empty string or zero). Otherwise, it returns zero. expr1 {=,
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. There are two event args in
Read more