Upgrading from 0.6.x to 0.7.x

Version 0.7 of Page Kit removes the custom page-kit CLI tool. Apps should use webpack-cli directly instead. The dotcom-build-* packages, which used to be plugins for page-kit, now work directly as Webpack plugins.

Update dependencies

Remove the @financial-times/dotcom-page-kit-cli package:

npm remove --save-dev @financial-times/dotcom-page-kit-cli

Check your package.json and upgrade all Page Kit packages to 0.7 with e.g.:

npm install --save-dev @financial-times/dotcom-build-js@0.7 # et cetera

You'll also need to install @financial-times/dotcom-build-base, which replaces the base Webpack settings from page-kit CLI, along with webpack, and webpack-cli:

npm install --save-dev @financial-times/dotcom-build-base webpack webpack-cli

Migrate page-kit.config.js to webpack.config.js

There is no longer a Page Kit-specific config file. Rename page-kit.config.js to webpack.config.js. To begin with, it will look something like this:

const js = require('@financial-times/dotcom-build-js')

module.exports = {
	settings: {
		build: {
			scripts: 'client/main.js'
		}
	},
	plugins: [
		js.plugin()
	]
}

Add the dotcom-build-base plugin to the start of the array. The other Page Kit plugins have changed from functions like js.plugin() to classes like new PageKitJsPlugin(), and use named exports; check the README for each plugin to make sure the name is correct.

If you have any custom plugins in this array (these will likely be a function that looks something like ({ on }) => on(hooks.WEBPACK_CONFIG, {}), talk to the #cp-platforms-team channel about migrating these.

+ const { PageKitBasePlugin } = require('@financial-times/dotcom-build-base');
- const js = require('@financial-times/dotcom-build-js');
+ const { PageKitJsPlugin } = require('@financial-times/dotcom-build-js');

module.exports = {
	settings: {
		build: {
			entry: {
				scripts: 'client/main.js'
			}
		}
	},
	plugins: [
+		new PageKitBasePlugin(),
-		js.plugin()
+		new PageKitJsPlugin()
	]
}

Move the settings.build.entry object to the top level in the configuration. If you have any other settings in settings.build, these have been removed. Talk to the #dotcom-page-kit channel about migrating them.

const { PageKitBasePlugin } = require('@financial-times/dotcom-build-webpack-config');
const { PageKitJsPlugin } = require('@financial-times/dotcom-build-js');

module.exports = {
-	settings: {
-		build: {
-			entry: {
-				scripts: 'client/main.js'
-			}
-		}
-	},
+	entry: {
+		scripts: 'client/main.js'
+	},
	plugins: [
		new PageKitBasePlugin(),
		new PageKitJsPlugin()
	]
}

Update your Makefile

Your Makefile should have build, build-production, and watch targets that reference the page-kit CLI:

build:
	page-kit build --development

build-production:
	page-kit build

watch:
	page-kit build --development --watch

Replace these with the equivalent Webpack commands:

build:
-	page-kit build --development
+	webpack --progress --mode=development

build-production:
-	page-kit build
+	webpack --mode=production

watch:
-	page-kit build --development --watch
+	webpack --progress --mode=development --watch

Also search for other calls to page-kit, which may be in package.json scripts or other build scripts.

Test it

Run make install build, and verify that your app still runs as expected. No changes to your client-side code should be needed. If you run into any issues, come chat to us in the #dotcom-page-kit channel.