Plumber for Sitecore Commerce - Tool to view Sitecore Commerce Engine Configuration
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build After init Dec 10, 2017
config Blocks Dec 26, 2017
docs New website Jan 3, 2019
install/iis Added web.config for IIS Feb 19, 2018
src Add 'pretty' formatting to displayed CLR Types. See #11 (#17) Mar 13, 2018
static Changed to different typeahead component (#15) Mar 4, 2018
test Removed unit test Feb 20, 2018
.babelrc After init Dec 10, 2017
.editorconfig After init Dec 10, 2017
.eslintignore After init Dec 10, 2017
.eslintrc.js After init Dec 10, 2017
.gitignore After init Dec 10, 2017
.postcssrc.js After init Dec 10, 2017
.prettierrc Added navbar Jan 2, 2018
.travis.yml turning on unit test Mar 13, 2018
LICENSE Update LICENSE Jan 29, 2018
README.md Update README.md Nov 9, 2018
index.html Added favicon Feb 5, 2018
package-lock.json Policy sets (#16) Mar 12, 2018
package.json Turned on unit tests Mar 13, 2018

README.md

Plumber for Sitecore Commerce

Build Status

Plumber for Sitecore Commerce

Plumber is a configuration viewer for Sitecore Commerce, a bit like showconfig.aspx in Sitecore but with built-in search capabilities.

What do you use it for?

Checking what happens in Sitecore Commerce can sometimes be a bit complicated. This tool will give you insight into how the pipelines are configured, which blocks are used and how the policies are configured per environment.

Plumber is a Vue single page application. Built for production, you can use it with any web server. It doesn't require any server side technology for itself.

A small introduction: https://commerceservertips.com/introducing-plumber-the-configuration-viewer-for-sitecore-commerce-2/

Compatibility

Plumber is compatible with Sitecore Commerce 8.2.1 and Sitecore Commerce 9 and up. If you're using Sitecore Commerce 8.2.1 see: Using Plumber with Sitecore Commerce 8.2.1

Installing Plumber

This document describes two ways of installing Plumber: as an IIS website or running it in development mode directly from NPM.

Using IIS

You can download the latest compiled version of Plumber-sc from releases. The file release.zip contains a pre-compiled version of Plumber that you can install as an IIS site.

Make sure you have installed the IIS Rewrite module (https://www.iis.net/downloads/microsoft/url-rewrite)

To use IIS to host Plumber-sc:

  1. In IIS Manager, create a new website called plumber-sc, use port 8080 and set the folder to host the application.
  2. Copy the contents of release.zip to the folder you specified in the previous step.
  3. Configure Plumber, Sitecore Identity Server and the commerce engine. Instructions are in the following paragraphs.

In development mode

If you want to run plumber-sc in development mode open a command prompt, navigate to the root of the repository and run npm run dev. This will start the tool at http://localhost:8080 in development mode. Any change you make in the code will automatically trigger a rebuild.

Configuring Plumber

Configuration of Plumber is done in config.json located in the static directory.

The default config.json looks like this:

{
  "EngineUri": "http://localhost:5000",
  "IdentityServerUri": "http://localhost:5050",
  "ClientId": "Plumber",
  "PlumberUri": "http://localhost:8080"
}

The following table describes the parameters and their default values.

ParameterDefaultDescription
EngineUri"http://localhost:5000"Base uri of the commerce engine
IdentityServerUri"http://localhost:5050"Base uri of the Sitecore Identity Server. Identity Server is used to retrieve a token to connect to Commerce Engine. This means you need a user account to be able to access it.

If you're using Sitecore Commerce 8.2.1 leave this empty. See also: Using Plumber with Sitecore Commerce 8.2.1
ClientId"Plumber"Client id used to connect to identity server. See the section on how to configure Identiy Server.
PlumberUri"http://localhost:8080"Base uri of the commerce engine

Configuring Sitecore Identity Server

Plumber-sc uses Sitecore Identity Server to get an authentication token, used to authenticate against the commerce engine. You need to add plumber-sc as a client in the configuration of Identity Server.

You can find Identity Server's configuration in the appsettings.json file in the wwwroot folder of Sitecore Identity Server.

Open the file and add the following to the Clients section:

  {
    "ClientId": "Plumber",
    "ClientName": "Plumber",
    "AccessTokenType": 0,
    "AccessTokenLifetimeInSeconds": 3600,
    "IdentityTokenLifetimeInSeconds": 3600,
    "AllowAccessTokensViaBrowser": true,
    "RequireConsent": false,
    "RequireClientSecret": false,
    "AllowedGrantTypes": [
      "implicit"
    ],
    "RedirectUris": [
      "http://localhost:8080",
      "http://localhost:8080/?"
    ],
    "PostLogoutRedirectUris": [
      "http://localhost:8080",
      "http://localhost:8080/?"
    ],
    "AllowedCorsOrigins": [
      "http://localhost:8080/",
      "http://localhost:8080"
    ],
    "AllowedScopes": [
      "openid",
      "dataEventRecords",
      "dataeventrecordsscope",
      "securedFiles",
      "securedfilesscope",
      "role",
      "EngineAPI"
    ]
  },

This configuration sets up Identity Server to allow authentication from clients authenticating with client id Plumber coming from https://localhost:8080. If you're running plumber-sc on a different port you need to adjust these settings.

Configuring your commerce engine

There are some small things you need to configure in your commerce engine to so Plumber-sc can access it.

First, you need to add plumber-sc as an allowed origin. Open config.json in the wwwroot folder of your commerce engine and add the url (by default http://localhost:8080) to the AllowedOrigins section. It should look something like this:

  "AllowedOrigins": [
      "https://localhost:4200",
      "http://localhost:4200",
      "http://localhost:8080",
      "http://sxa.storefront.com"
  ],

Using Plumber with Sitecore Commerce 8.2.1

If you're using SC 8.2.1 there are a couple of things you need to change:

Configuration

  • As 8.2.1 doesn't use Sitecore Identity Server you can leave the IdentityServerUri blank;
  • Because the commerce engine is probably not using https, change the EngineUri to http://localhost:5000

A default config.json will look like this:

{
  "EngineUri": "http://localhost:5000",
  "IdentityServerUri": "",
  "ClientId": "Plumber",
  "PlumberUri": "http://localhost:8080"
}

Adding CORS support to your engine

As Plumber is doing a cross-site request you need to enable CORS support in your commerce engine, which means you will need to rebuild and deploy it.

To add CORS support do the following:

In the Sitecore.Commerce.Engine project change the following in startup.cs:

  • In the ConfigureServices method add the following line:
    services.AddCors();

  • In the Configure method add the following line:
    app.UseCors(builder => builder.WithOrigins("http://localhost:8080").AllowCredentials().AllowAnyHeader().AllowAnyMethod());

Vue Build Setup

If you want to change something in the app, below you will find instructions on how to build the project below.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.