CMS 💘 JavaScript

Integrating front-end & back-end better

CMS ❤ JavaScript

Purpose

Look at good patterns for integrating JavaScript + frameworks into traditional CMS ASP.NET solutions.

CMS ❤ JavaScript

Benefits of a good integration

  • Easy to run
  • Fast dev cycle
  • Easy debugging
  • Module bundling & code splitting
  • Modern JS features (ES 20xx)
  • Simple to pass data from CMS to JS
  • Smooth source control & deployments

Working with webpack

CMS ❤ JavaScript

What is webpack?

Webpack is a static module bundler for modern JavaScript applications. It can compile/transpile and package up JS, CSS, and other front-end assets.

// header.js
import MainNavigation from 'components/mainNavigation';

export default Header ({ page }) {
  return <header>
    <MainNavigation {...page.header} />
  </header>
}
CMS ❤ JavaScript

Webpack features

  • Module bundling (with npm/yarn)
  • Source maps
  • Code splitting
  • Watch mode for development
  • Versioning for cache busting
  • Modern JS features (using Babel)
CMS ❤ JavaScript

Webpack config

// webpack.dev.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

> webpack --config webpack.dev.js

CMS ❤ JavaScript

Environment configurations

  • webpack-merge can merge configs (common / dev / prod)
  • webpack mode for development / production
CMS ❤ JavaScript

npm scripts as shortcuts

// package.json
{
  "scripts": {
    // episerver
    "build-dev": "webpack --config webpack.dev.js",
    "develop": "webpack --config webpack.dev.js -w",
    "build-prod": "webpack --config webpack.prod.js",

    // sitecore
    "build-dev": "webpack --config webpack.dev.js && gulp deploy-whatever"
  }
}
  • run environment specific configurations
  • combine tasks from webpack and gulp

> npm run build-dev

CMS ❤ JavaScript

npm task runner

VS extension allows running scripts from Visual Studio

npm task runner

CMS ❤ JavaScript

Local deployment after build

  • Episerver: Run website out of IIS Express so you can build and run from source folder
  • Sitecore: Build in place with webpack, deploy to IIS folder with gulp watch. Don't rely on a VS publish!
CMS ❤ JavaScript

How are we doing?

✅ Easy to run (npm scripts + VS extension)

✅ Fast dev cycle (with watch)

✅ Easy debugging (with source maps)

✅ Module bundling & code splitting

✅ Modern JS features (use babel w/ webpack)

⏳ Simple to pass data from CMS to JS

⏳ Smooth source control & deployments

Integrating with ASP.NET

CMS ❤ JavaScript

ReactJS.NET

  • Allows for server-side rendering (SSR)
  • SSR is better for SEO
  • Maintained by React team
CMS ❤ JavaScript

Boostrapping client-side components from cshtml

CMS ❤ JavaScript

Pass data from CMS to JavaScript

  • ReactJS.NET
  • Attributes w/ Angular Elements or React + web components
  • Webpack externals imports modules from global namespace at runtime
  • Web API + fetch API
CMS ❤ JavaScript

HTML injection

  • HtmlWebpackPlugin works with cshtml
  • Use hash: true for revision hash in query string
  • Use minify: false to avoid minification
CMS ❤ JavaScript

Souce control & publishing

  • Don't source control compiled files
  • Do include files you want to publish in your csproj
CMS ❤ JavaScript

DevOps build pipeline

  • Run your bundler in your build pipeline
  • Use npm ci instead of npm install

> npm ci
> npm run build-prod

CMS ❤ JavaScript

How did we do?

✅ Easy to run (nop scripts + VS extension)

✅ Fast dev cycle (with watch)

✅ Easy debugging (with source maps)

✅ Module bundling & code splitting

✅ Modern JS features (use babel w/ webpack)

✅ Simple to pass data from CMS to JS (props or externals)

✅ Smooth source control & deployments

Thank you!

Gulp vs webpack??

VS code run tasks?

why react? similar to why webpack?