Sug bangalore - headless jss
•Download as PPTX, PDF•
1 like•277 views
A session by Gopi Sivanappan, from Sapient Razorfish Bangalore on Headless JSS with Sitecore on 8th September 2018 for Sitecore User Group Bangalore
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Sug bangalore - headless jss
Similar to Sug bangalore - headless jss (20)
More from Anindita Bhattacharya
More from Anindita Bhattacharya (20)
Recently uploaded
Recently uploaded (20)
Sug bangalore - headless jss
- 1. JSS SUG BLR August 8th 2018 Presented by: Gopi Sivanappan Vasanthi Sr. Associate - SapientRazorfish
- 2. Why JSS? • To overcome the shortcomings of monolithic mode of current Sitecore Development and Deployment. • To make Sitecore more scalable by reducing the load from Sitecore servers and delegating the same to Node. • To provide full experience editor capabilities for application developed using front end technologies like react, angular etc., • To enable analytics, personalization and mv (multivariate) testing capabilities for application developed using front end technologies. • To enable front end developers to work in disconnected mode without having Sitecore instance in their machine. Thus reducing the license dependency for Sitecore development. • To enable both behavior and content to be consumed from Sitecore and functionality to come from other front end technologies,
- 3. What is headless? • To have a application development environment agnostic of the content to be consume. • Current Presentation Architecture of Sitecore was tightly coupled with its Information Architecture. • Headless will make development of applications possible with Sitecore i.e., the Information architecture and presentation architecture is decoupled.
- 4. Setting Up…. Sitecore 9.0.1 + Node JS v6.9 + npm v5.7+ or yarn Jss enabled license
- 5. Setting up…. Step 1: Installing JSS CLI npm install -g @sitecore-jss/sitecore-jss-cli yarn global add @sitecore-jss/sitecore-jss-cli Step 2: Choose an application styleguide template: • react • vue • angular jss create <your-app-name> <app-template-name> Experimental Templates: sitecore-embedded-jss-app sitecore-javascript-renderings
- 6. Running a disconnected JSS App jss start http://localhost:3000
- 7. JSS Server Setup • Download and Install the JSS Server Components Sitecore package. • Sitecore JavaScript Services Tech Preview Server 9.0.1 rev. 180724 • Add the following element to the bottom of the system.webServer/handlers section of the Sitecore Web.config: • <add verb="*" path="sitecorejss_media.ashx" type="Sitecore.JavaScriptServices.Media.MediaRequestHandler, Sitecore.JavaScriptServices.Media" name="Sitecore.JavaScriptServices.Media.MediaRequestHandler" /> • Verify your server components install worked, by visiting http://your-sitecore- instance/sitecore/api/layout/render/jss?item=/&sc_apikey=TEST. • You should receive HTTP Error 400.0 - API key is not valid if it is working correctly.
- 8. JSS App Deployment • Configuring the Sitecore server to receive the JSS app • Configuring Host Name > sitecoreconfig<appname>.config • Creating API Key > /sitecore/system/Settings/Services/API Keys • Connecting the JSS app to Sitecore (from app directory) jss setup jss deploy config jss deploy app --includeContent --includeDictionary
- 9. Creating our JSS Component Scaffolding a running a JSS Component Step 1: Keep your JSS app running by invoking “jss start” Step 2: jss scaffold <Component Name> Step 3: Define the component's data in sitecoredefinitionscomponentsMyCardHolder.sitecore.js Step 4: Implement the React component in srccomponentsMyCardHolderindex.js Step 5: Add the component to a route layout (/data/routes) and test it with jss start
- 10. Sitecore JSS - Architecture
- 13. JSS Elements
- 14. Workflow • Code-First • JSS App defines the manifest of the content data and the structure of the data. • Thus, it can execute local content without a Sitecore Instance. • Used mainly during early prototyping of a design. • Sitecore-First • JSS app consumes data from Sitecore but has no responsibility for defining the structure of that data Most Sitecore-first projects will begin life with at least one code-first app deployment, just to create the structures in Sitecore for the app (app root, rendering root, template root, etc). After this initial deployment, the app can migrate to Sitecore-first.
- 15. JSS Application Modes Development • Disconnected dev mode • Connected dev mode • Integrated mode • API-Only mode Production • Integrated mode • Headless server-side rendering mode • API-only mode
- 18. Integrated Mode
- 19. Headless server-side rendering mode • Rendering performed by server (SSR by Node-as-a-service provider, i.e. Azure App Service, Netlify, Heroku, etc) • Data comes from Sitecore CD server via LayoutService API (HTTP calls) • Full Sitecore marketing/personalization engine support • Usages: decoupling rendering of the JSS app from Sitecore, multichannel API usage
- 20. API Only Mode • Consume Sitecore APIs that return JSON data from anything that understands JSON, e.g. native mobile apps, chatbots, etc.
- 21. Sitecore Layout Service • The Sitecore Layout Service is the REST endpoint which provides data for Sitecore JSS apps. • Rendered fields with Experience Editor markup for inline editing. • /sitecore/api/layout/render/[config]?item= [path]&sc_lang=[language]&sc_apikey=[key ]&tracking=[true|false]
Editor's Notes
- Why JSS? Sitecore JSS is a way to develop JavaScript-based frontends with a Sitecore backend. For Developers Enables modern web development workflow, combined with the power of an enterprise backend. Have the freedom to use the latest JavaScript frameworks and libraries, any IDE, any OS and any dev workflow. Makes Sitecore install optional during development. Build full-fledged Sitecore solutions (websites, PWAs, SPAs, you name it) by being completely disconnected from the Sitecore platform during the development process. Support for physically decoupled "headless" deployments. Deploy your app "headlessly" to any platform that runs server-side JavaScript. You can even run your app in the browser. The data powering the app will come from a separate Sitecore server. Automate app integration. With a code-first approach, your app can be imported into Sitecore XP, and JSS will take care of the generation of all the necessary artifacts. Easy deployment. Your web app is a nimble self-contained JS bundle, easier to deploy and manage. JSS is designed to bring just enough of Sitecore to the JavaScript app to unlock the power of Sitecore, but still enable a flexible and idiomatic JavaScript development experience. Please refer to the docs for a more in-depth walkthrough. For Marketers Maintain full control over not only content, but presentation and marketing features as well. As opposed to a typical Headless CMS deployment, where marketers lose control over the presentation aspect and experience management, with JSS you can leverage full Experience Platform capability including Experience Editor, page-level content composition, personalization, multi-variate testing, tracking and analytics. Achieve faster time-to-market and more experimentation. You can do most of the development without integration with Sitecore XP as a requirement. You can experiment more by building the app stand-alone, test the UX, and do automated integration afterward. Key Principles and Goals Empower and not burden JavaScript developers. Set of capabilities rather than an all-or-nothing framework. JSS allows you to cherry pick what makes sense for your particular use case and your team. Express as little opinion as possible. Component-centric architecture. JSS is built to support JavaScript frameworks that are putting component architectures and atomic design principles at the center. This is a strength that both Sitecore and modern JavaScript share. There is more than one way of executing a project. Provide a clear boundary between back-end work in .NET and front-end work in JavaScript and enable more effective specialization on projects.
- JSS includes a handy Node-based command line tool to make it easy to get started and maintain your application. App name should be in lower case and can contain – or _ Next steps: * Enable source control (i.e. git init) * Try out your application with cd my-second-jss-app then jss start * Connect to Sitecore with jss setup (optional) * Check out the JSS documentation at https://jss.sitecore.net Enjoy!
- x
- Allowed Controllers: Sitecore.LayoutService.Mvc.Controllers.LayoutServiceController; Sitecore.JavaScriptServices.Globalization.Controllers.DictionaryServiceController; Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController Deployment Secret: /scjssconfig.json /sitecore/config/AppName.deploysecret.config NEXT STEPS * Deploy your configuration (i.e. 'jss deploy config') * Deploy your app (i.e. 'jss deploy app -c -d') * Test your app in integrated mode by visiting http://my-first-jss-app.dev.local
- JSS' sample apps include a script that allows you to easily scaffold new JSS components. This script can be customized in the boiler plate file /scripts/scaffold-component.js Component name should start with an uppercase letter and contain only letters and numbers. Next steps: * Define the component's data in sitecore\definitions\components\MyCardHolder.sitecore.js * Implement the React component in src\components\MyCardHolder\index.js * Add the component to a route layout (/data/routes) and test it with jss start
- Using manifest definitions and the JSS CLI, developers can deploy an application "code first" via the Import Service. Note that this is optional -- you always have the option of working Sitecore-first. As described above, the Layout Service provides the data needed to render the JSS app. It is typically consumed for both initial render on the server, as well as directly from the browser on route change. The JSS View Engine runs within the Sitecore instance and provides server-side rendering via communication with an out of process node.js instance, which it manages. JSS apps may consume the JSS Dictionary Service, Sitecore GraphQL, other Sitecore.Services.Client services, or custom REST endpoints as needed. For a true headless architecture, you may utilize independent node.js host(s) for server-side rendering of your application, via the sitecore-jss-proxy module. App configuration within Sitecore provides app-specific settings for the Import Service and View Engine.
- JSS SDKs: A series of npm packages facilitate working with Sitecore data and layout in JavaScript. Framework-specific SDKs provide Sitecore's dynamic placeholder layout system and helpers for rendering Sitecore fields so they can be editable by authors. https://www.npmjs.com/org/sitecore-jss Sitecore Layout Service: provides the composition of route/pages, as well as the needed data for each component. JavaScript view engine: Allows Sitecore to perform server-side rendering (SSR) of JavaScript applications, enabling use of the Sitecore Experience Editor. Application import: Developers may take a code-first approach when using JSS via the Application Import Service, which generates Sitecore renderings, templates and/or content based on data and JavaScript-defined Sitecore entities such as renderings and templates.
- For development: Disconnected dev mode - Sitecore not required, hosts locally, uses local content data. Connected dev mode - Sitecore required, hosts locally, content data from Sitecore. Integrated mode - Sitecore required, hosts on Sitecore, content data from Sitecore, server-side rendering. API-only mode - Consume personalized Sitecore layout data from any platform that understands JSON. For production: Integrated mode - Server-side rendering performed on Sitecore CD server. Headless server-side rendering mode - Server-side rendering performed on Node server, data from Sitecore CD. API-only mode - Consume personalized Sitecore layout data from any platform that understands JSON.
- This mode hosts your JSS app within a Sitecore instance. The application is server-side rendered (SSR) by the Sitecore instance