aweber1

// React component

import React from 'react';
import PropTypes from 'prop-types';
import { Placeholder } from '@sitecore/sitecore-jss-react';

const Welcome = (props) =>
  (<div>
    Welcome to Sitecore!
    <Placeholder name="page-header" />

aweber1

.then((app) => {
  const renderer = createRenderer();
  return renderer.renderToString(app).then((content) => ({ content, app })); // `renderToString` returns a promise
})
.then(({ content, app }) => {
  const meta = app.$meta().inject();
  const serverComponent = new Vue({
    render(createElement) {
      return createElement(ServerHtml, {
        props: {

aweber1

using Sitecore.JavaScriptServices.ViewEngine.LayoutService.Serialization;
using Sitecore.LayoutService.ItemRendering;
using RenderedJsonRendering = Sitecore.JavaScriptServices.ViewEngine.ItemRendering.RenderedJsonRendering;

namespace MyNamespace.JavaScriptServices.ViewEngine.LayoutService.Serialization
{
    public class CustomPlaceholderTransformer : PlaceholderTransformer
    {
        public override object TransformPlaceholderElement(RenderedPlaceholderElement element)
        {

aweber1

using System.Linq;
using Microsoft.Extensions.DependencyInjection;
using Sitecore.DependencyInjection;
using Sitecore.JavaScriptServices.Configuration;

namespace Sitecore.JavaScriptServices.CustomConfiguration
{
    public class RegisterDependenciesPatch : IServicesConfigurator
    {
        public void Configure(IServiceCollection serviceCollection)

aweber1

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <mvc.customizeRendering>
        <processor
          type="MyNamespace.DisableCustomization, MyLibrary"
          patch:before="Sitecore.Mvc.Analytics.Pipelines.Response.CustomizeRendering.Personalize, Sitecore.Mvc.Analytics" />
      </mvc.customizeRendering>
    </pipelines>
  </sitecore>

aweber1

In vscode, open the Debug panel, and create a new configuration. This should create .vscode folder and a default launch.json file.

In the launch.json file, use something this as a starting point:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",

aweber1

Description

The files in this gist demonstrate a fairly basic setup for a JSS rendering host.

DISCLAIMER: No guarantees that the code actually runs as-is. It was largely edited in place, so there may be typos or small syntax errors that you'll need to correct in your editor of choice. Feel free to leave a comment with any necessary fixes.

• Sitecore config: jss-app-config.config This file is meant to show you how to setup your app config to use an external rendering host.

• Entry point: jss-rendering-host-tunnel.js

aweber1

Notes

Typical examples of using Sitecore JSS with TypeScript involve using ts-node for the manifest generation process to compile manifest definition files. ts-node uses standard node resolution process to resolve modules, it does not respect the paths property from tsconfig.json which is a TypeScript compiler feature.

If you want to use the TypeScript compiler path mapping feature for manifest generation, it is recommended to use the tsconfig-paths library: https://github.com/dividab/tsconfig-paths

Then you simply need to register tsconfig-paths in config.js when you register ts-node and be sure they are both configured to use the same tsconfig.json file. This can easily be done by setting the TS_NODE_PROJECT environment variable.

Also be sure that the paths and baseUrl properties are properly set in the tsconfig.json file you use for manifest generation. Manifest generation is a separate process from building your JSS+TypeScript app, so it will typically make more sense to

aweber1

    public class MvcControllerServicesConfigurator : IServicesConfigurator
    {
        // Methods
        public void Configure(IServiceCollection serviceCollection)
        {            
            serviceCollection.AddSingleton<Func<Database, ISitecoreService>>(_ => CreateSitecoreService);
            serviceCollection.AddTransient(_ => CreateSitecoreContextService());
            serviceCollection.AddTransient(_ => CreateRequestContext());
            serviceCollection.AddTransient(_ => CreateGlassHtml());
            serviceCollection.AddScoped(_ => CreateMvcContext());

aweber1

import Link from './Link';

export function MyComponent(props) {
  // NOTE: you can use all of the same props used for `next/link`
  return (
    <div>
      <Link href="/some-rad-page">
        <a>My Link Text</a>
      </Link>
      <Link href="/en/some-rad-page">