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

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

Error : Sorry, there was an error : unauthorized_client in Sitecore 9.1 login

Image
After adding a new binding from IIS on my sitecore 9.1 instance I was getting unauthorized client error while login with newly added binding URL. To fix this issue I added AllowedCorsOriginsGroup in xml file placed at File Name :  Sitecore.IdentityServer.Host.xml Location : C:\inetpub\wwwroot\9Dot1.identityserver\Config\production After adding field tag AllowedCorsOriginsGroup in  Sitecore.IdentityServer.Host.xml file I was able to login properly with newly added URL. Also you can fix this issue by placing a pipe operator beside of old AllowedCorsOriginsGroup as below. <AllowedCorsOriginsGroup1>http://9Dot1.sc | http://jss.9Dot1.sc</AllowedCorsOriginsGroup1 Happy Learning!!!
Read more