Hot answers tagged

25

What is JSS? JSS is an SDK - allows developers to build websites using JS frameworks (React, Angular, React Native & Vue) Sitecore is used as a Headless CMS - to provide the Sitecore item’s presentation details as JSON. It has Full support for the Sitecore Experience Platform - Experience Editor, Personalization, MV testing & Tracking / Analytics (...


16

As long as your app is capable of server-side rendering (SSR) then you can render it in a Sitecore Content Management (CM) role and use Experience Editor (EE) to manage the app and content for the app. Beyond that, your app can live on a Node.js server somewhere (separate from Sitecore) and consume Layout Service data for rendering. You are not able to use ...


13

JSS provides a bit different process than you currently work with Angular JS. JSS is a playground of Frontend developer (FED) and rendering of components is always preformed by NodeJS engine. I mean that you no longer need to copy markup from prototype solution to razor view and inject the C# objects, etc. In general, there are two approaches working with ...


13

For Experience Editor support, you would need to run what we call "integrated" mode. The JS app will be rendered by node.js on the same CM server (but out of proc). This will enable personalization and MV testing features. You cannot add Experience Editor on top without full Sitecore CM instance and our JS view engine bit in JSS.Server package. For the ...


12

Assuming you wish to use Sitecore layout data for the custom route: Teach the app about the route. In RouteHandler.js: <Switch> // add this <Route key="myCustomRoute" path="/app/payments/:id" render={customRouteRenderFunction} /> {routePatterns.map((routePattern) => ( <Route key={routePattern} path={routePattern} render={...


11

Full disclosure: I'm on the JSS team, so naturally I'm biased. Contentful is fairly similar to using Sitecore's SSC REST APIs. You have a large bucket of content, and you have an API to retrieve chunks or lists of it. It's relatively standard headless SaaS. JSS delivers the full power of Sitecore by delivering headless layout capabilities. Instead of ...


11

In addition to the built-in helper method, the pageState (normal, preview, editing) and pageEditing (boolean) properties are also available in the layout service context, which there are samples of in each JSS sample app:


11

It sounds like the SSL certificate on your remote instance is not trusted. Node does not use Windows' cert store, so if it's a trusted cert there it will not be trusted in the JSS CLI. You can use the --acceptCertificate [cert thumbprint] parameter to make the CLI trust a specific SSL certificate during deployment. To make this easier, consider placing it ...


10

Yes, it is possible to achieve your architecture using Sitecore. There are a few options for you here to do headless implementations, each with their own advantages and disadvantages, and different version/licensing implications. JSS (jss.sitecore.net): Currently in Tech Preview, this requires Sitecore 9 and a subscription/consumption license (as mentioned ...


9

For your own safety, React will automatically escape HTML in any rendered output. Since Sitecore provides its own markup for the Experience Editor, you need to use the dangerouslySetInnerHTML attribute to disable this behavior. const AwesomeComponent = ({ fields }) => { return <div> <span dangerouslySetInnerHTML={{__html: fields....


9

A couple things to try: After global install, close/open your console. Sometimes console instances will cache path info. Ensure that your PATH environment variable has your global npm cache folder listed.


9

Sitecore JSS is pretty match to your requirements in terms you want to use analytics, tracking, rule engine personalization, control on component rendering. But you should't think about JSS in original meaning. JSS is based on the Layout Service which is awesome tool that allows us to retrieve content from Sitecore and still be able to use all features like ...


8

In order to import a JSS application using the code-first approach, or to utilize server-side rendering for either a code-first or Sitecore-first JSS application, you need to first create an app configuration using a Sitecore configuration patch. There is an example minimal app configuration patch installed with JSS at \App_Config\Sitecore\...


8

This can be done by defining a component in the manifest that has no fields, for example: Without Datasource import { addComponent } from '@sitecore-jss/sitecore-jss-manifest'; export default (manifest) => { addComponent(manifest, { name: 'Welcome', }); }; With Datasource import { addComponent, CommonFieldTypes } from '@sitecore-jss/sitecore-...


8

This will be supported out of the box in the general availability release of JSS (with Sitecore 9.1). Parameters templates are automatically created for any component that declares params, for example: export default function(manifest: Manifest) { manifest.addComponent({ name: 'StyleguideComponentParams', params: ['cssClass', 'columns', '...


8

That would be isExperienceEditorActive defined in @sitecore-jss/sitecore-jss. Usage: import { isExperienceEditorActive } from "@sitecore-jss/sitecore-jss"; if (isExperienceEditorActive()) { // Do something special in the Experience Editor } This file also contains other very useful functions. Credits to Corey Smith and Kam Figy who told me about this.


8

To disable workflow entirely across your JSS templates and existing items, you can use the following bit of Sitecore PowerShell to clear the Default workflow on templates, and the Workflow and Workflow state on content items. Note that this script totally removes all workflow from the referenced content and template paths, so use with care if you have other ...


7

I'm sure answering your own question is frowned upon but after reading all the documentation and watching the videos i think i can confirm 'YES', you can. Hope this saves someone else some time. If i've got this wrong please do correct me. See example https://jss.sitecore.net/#/cookbook/recipes/embedded-wizard-sample This module rocks!


7

The window object is not available during server side rendering because Node.js does not have a window object - it is a browser construct. This is a scenario common to server side rendering (SSR) and JavaScript - it is not specific to JSS. That said, there are different ways to workaround the problem depending on your app and what is actually trying to use ...


7

By default, the jss named configuration for Layout Service uses the Sitecore.LayoutService.Placeholders.DynamicPlaceholdersResolver, so it expects placeholder keys to be dynamic. If you're managing renderings via Content Editor / presentation details, you either need to manually construct dynamic placeholder keys (yuck, but possible), or in: App_Config/...


7

From the looks of it, the configuration was not patched correctly. The /sitecore/api/graph/items/master/… is the default JSS endpoint which has search query enabled, while the default JSS project setup does not have search query enabled (it has only Item query enabled by default). Check your configuration in http://yourdomain/sitecore/admin/showconfig....


7

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 can use JSS.


6

The binding is done via JavaScript, during rendering. When a JSS site loads, it gets the current route's layout data. In integrated mode, this comes by a JS object delivered directly to the renderView() method (server-side rendering), and in connected mode or during route change, the data is delivered by a HTTP call to the Layout Service. This data ...


6

In my point of view, JSS is pretty suite for your requirements. I've implemented something like you want with Xamarin. But I think it doesn't matter with which technology to do that because I didn't use any Xamarin Sitecore specific frameworks or tools. I only send simple HTTP requests to LayoutService. If user accessing the different-2 pages from mobile ...


6

Full disclosure from me as well: I have been working at Contentful for the last few years, before that and for at least 10 years, however, I have been building sites using a wide range of CMS. Sitecore, EPiServer, Drupal, Wordpress, Umbraco, Magnolia etc. The main difference, that is very important to understand, is that a truly headless CMS comes ...


6

This behavior is due to being logged into Sitecore and browsing your JSS app in the same browser instance (even if they're separate tabs they share cookies). I would suggest browsing to your app in an incognito window or separate browser. Related question: Layout API returning strange code into placeholder


6

I have some code to offer to start the node process(es) with custom arguments, e.g. --prof. However, I'd first like to highlight the following bits of information about GraphQL and JSS that might provide some insight. Sitecore GraphQL includes some built-in diagnostics features that can help diagnose API performance issues: https://jss.sitecore.com/docs/...


6

The layout service will return HTTP 404 for items/routes not found in Sitecore. The standard JSS sample applications all key on this an render a not found route. Similarly, for a backend error Layout Service will return HTTP 500. But that's not the only form of error handling in a JSS app; one need worry about JavaScript errors as well. For that there are ...


6

Not possible out of the box in version 11.0, You can try to mock the data. From the JSS website: Using Sitecore GraphQL with GraphQL tooling Many kinds of GraphQL tools (such as eslint-plugin-graphql to validate queries at build time, or graphql-tools to create a disconnected mock GraphQL API


6

I found 2 solution for this issue and I ended using method 1 for the "hashed url" convenience. Method 1: Using rendered(fieldRendererParameters) query ($datasource: String){ item (path:$datasource){ field (name:"Image") { rendered(fieldRendererParameters:"w=100&h=160") } } } The result of this query is... { "data": { "item":...


Only top voted, non community-wiki answers of a minimum length are eligible