Switch over to riff-raff deploys (#1720)

Co-authored-by: Charlotte Emms <[email protected]>

.github/workflows/ci.yml

@@ -150,6 +150,6 @@ jobs:
           configPath: ./riff-raff.yaml
           contentDirectories: |
             frontend-static/commercial:
-              - dist/riff-raff/js/commercial
+              - dist/prod/artifacts/commercial
             commercial-bundle-path:
-              - dist/riff-raff/cloudformation
+              - dist/prod/cloudformation

.prout.json

@@ -0,0 +1,8 @@
+{
+	"checkpoints": {
+		"PROD": {
+			"url": "https://assets.guim.co.uk/commercial/prout",
+			"overdue": "10M"
+		}
+	}
+}

README.md

@@ -2,9 +2,15 @@
 
 This package contains the code for the commercial bundle that is loaded on all pages on theguardian.com.
 
+There are 2 main parts to this repo:
+- The commercial bundle itself, which is a set of javascript files that is loaded on all pages on theguardian.com.
+- Some modules that are used by other parts of the Guardian codebase, such as DCR. This is published as a package to npm, `@guardian/commercial`.
+
+The exported modules are in `src/core`, everything else is part of the commercial bundle.
+
 ## Installation
 
-To install the package, run `yarn add @guardian/commercial`.
+To install the npm package, run `pnpm i @guardian/commercial`.
 
 ## Development
 
@@ -19,33 +25,16 @@ To install the package, run `yarn add @guardian/commercial`.
 
 To install dependencies, run `pnpm`.
 
-To develop locally, run `pnpm serve` to start a local server. This will watch for changes and rebuild the bundle. Serving it at `http://localhost:3031`.
+To develop locally on the bundle, run `pnpm serve` to start a local server. This will watch for changes and rebuild the bundle. Serving it at `http://localhost:3031`.
 
-### Releasing
+### Releasing to NPM
 
 This repository uses [changesets](https://github.com/changesets/changesets) for version management
 
 To release a new version with your changes, run `pnpm changeset add` and follow the prompts. This will create a new changeset file in the `.changeset` directory. Commit this file with your PR.
 
 When your PR is merged, changeset will analyse the changes and create a PR to release the new version.
 
-### Bumping @guardian/commercial in Frontend
-Run [this script](./scripts/bump_commercial.sh) to raise a PR that bumps `@guardian/commercial` in Frontend to the specified version.
-
-
-Execute the script as follows:
-
-```bash
-./scripts/bump_commercial.sh [VERSION_NUMBER]
-```
-
-Eg
-```bash
-./scripts/bump_commercial.sh 11.11.1
-```
-
-This will automatically create a pull request in the Frontend repository.
-
 ### Pull requests
 
 Try to write PR titles in the conventional commit format, and squash and merge when merging. That way your PR will trigger a release when you merge it (if necessary).
@@ -96,18 +85,19 @@ Frontend will then use the local bundle instead of the one from PROD/CODE.
 
 ### Testing on CODE
 
-To test the bundle on CODE, create a PR, add the `[beta] @guardian/commercial` label, this will release a beta version of the bundle to NPM, the exact version will be commented on your PR.
+To test the bundle on CODE, create a PR, wait for github actions to run and a riff-raff comment should appear. Click the link in the comment to confirm the CODE deployment.
 
-In order to do this, first run: `pnpm changeset add`, again, This will create a new changeset file in the `.changeset` directory. Commit this file with your PR.
+Although you can deploy CODE changes without deploying Frontend or DCR, it's a good idea to flag any CODE deployments on the dotcom semaphore chat in case it has an effect on anything anyone else is testing.
 
-**Note**: Once the beta version is released, the label will be removed from the PR, so you will need to add it again if you want to release subsequent new versions.
+#### Testing changes to the `@guardian/commercial` npm package
+You can add the [beta] @guardian/commercial label to your pull request, this will release a beta version of the bundle to NPM, the exact version will be commented on your PR.
 
-On a branch on frontend you can update the version of the bundle to the beta version and deploy to CODE to test.
+In order to do this, run `pnpm changeset`. This will create a new changeset file in the .changeset directory. Commit this file with your PR.
 
-### Deploying to PROD
+Note: Once the beta version is released, the label will be removed from the PR, so you will need to add it again if you want to release subsequent new versions.
 
-Ensure your PR has a chageset and has been merged to main. This will trigger a changesets release PR, which will bump the version of the package, once this is merged the package will be published to NPM.
+### Deploying to PROD
 
-To get your changes live on the site, you will need to update the `@guardian/commercial` version in the [Frontend](https://github.com/guardian/frontend) repository. You can do this by running the [bump_commercial.sh](./scripts/bump_commercial.sh) script.
+When you merge to main the commercial bundle will be deployed automatically and should be live within a few minutes.
 
-We're experimenting with direct deployments via riff-raff, when you merge to main a a riff-raff build will be created but you will need to manually deploy it in the riff-raff GUI, these deployments are currently only available behind a server side test that you'll need to opt in to.
+[More details on deployment](docs/deployment/readme.md)

docs/deployment/readme.md

@@ -0,0 +1,11 @@
+# Deployment
+
+## This repo
+When building in production, as well as generating bundle javascripts, cloudformation for updating a key in parameter store is created. This key is used by the frontend to determine the path to the commercial bundle.
+
+This is neccessary as the production bundle files have a hash in their paths for cache busting, so the path is not the same for each build.
+
+As part of the CI process a build is created in riff-raff with the javascripts and cloudformation. When deployment is initiated in riff-raff (automatically on prod, or manually for PRs on CODE) the javascripts are uploaded to the dotcom static S3 bucket, and the cloudformation updating the bundlepath is executed.
+
+## Frontend
+[Frontend](https://github.com/guardian/frontend/blob/ad634eed65451a5994413da1039665a4c3cea574/common/app/common/CommercialBundle.scala) perioducally checks the parameter store for the path to the commercial bundle, caching it for 1 minute. This is to avoid hitting the parameter store on every request.

package.json

@@ -17,10 +17,9 @@
 	"main": "dist/cjs/core/index.js",
 	"module": "dist/esm/core/index.js",
 	"scripts": {
-		"build": "npm-run-all clean --parallel compile:core:* build:prod build:dev build:riff-raff",
+		"build": "npm-run-all clean --parallel compile:core:* build:prod build:dev",
 		"build:dev": "webpack -c webpack.config.dev.mjs",
 		"build:prod": "webpack -c webpack.config.prod.mjs",
-		"build:riff-raff": "webpack -c webpack.config.riff-raff.mjs",
 		"clean": "rm -rf dist",
 		"compile:core:common": "tsc --project ./tsconfig.core.json --outDir ./dist/cjs --module CommonJS",
 		"compile:core:esm": "tsc --project ./tsconfig.core.json --outDir ./dist/esm",

src/commercial.ts

@@ -1,21 +1,6 @@
 import { getConsentFor, onConsent } from '@guardian/libs';
 import { commercialFeatures } from './lib/commercial-features';
 
-const { frontendAssetsFullURL, page } = window.guardian.config;
-
-const decideAssetsPath = () => {
-	if (process.env.OVERRIDE_BUNDLE_PATH) {
-		return process.env.OVERRIDE_BUNDLE_PATH;
-	}
-
-	const assetsPath = frontendAssetsFullURL ?? page.assetsPath;
-	return `${assetsPath}javascripts/commercial/`;
-};
-
-if (!process.env.RIFFRAFF_DEPLOY) {
-	__webpack_public_path__ = decideAssetsPath();
-}
-
 /**
  * Choose whether to launch Googletag or Opt Out tag (ootag) based on consent state
  */

webpack.config.dev.mjs

@@ -1,14 +1,9 @@
 import { join } from 'path';
-import webpack from 'webpack';
 import { merge } from 'webpack-merge';
 import { setupFixturesServer } from './scripts/fixtures/fixtures-server.js';
 import config from './webpack.config.mjs';
 
-const { DefinePlugin, ProvidePlugin } = webpack;
-
 const port = 3031;
-const overrideBundlePath = `http://localhost:${port}/`;
-const shouldOverrideBundle = !!process.env.OVERRIDE_BUNDLE;
 
 // eslint-disable-next-line import/no-default-export -- webpack config
 export default merge(config, {
@@ -20,26 +15,6 @@ export default merge(config, {
 		path: join(import.meta.dirname, 'dist', 'bundle', 'dev'),
 		clean: true,
 	},
-	plugins: shouldOverrideBundle
-		? [
-				new ProvidePlugin({
-					process: 'process/browser',
-				}),
-				new DefinePlugin({
-					'process.env.OVERRIDE_BUNDLE_PATH':
-						JSON.stringify(overrideBundlePath),
-				}),
-			]
-		: [
-				new ProvidePlugin({
-					process: 'process/browser',
-				}),
-			],
-	resolve: {
-		alias: {
-			process: 'process/browser',
-		},
-	},
 	/** @type {import('webpack-dev-server').Configuration} */
 	devServer: {
 		port,

webpack.config.mjs

@@ -1,5 +1,17 @@
+import { execSync } from 'child_process';
 import { join } from 'path';
 import CircularDependencyPlugin from 'circular-dependency-plugin';
+import webpack from 'webpack';
+
+const gitCommitSHA = () => {
+	try {
+		return execSync('git rev-parse HEAD').toString().trim();
+	} catch (_) {
+		return;
+	}
+};
+
+const { DefinePlugin } = webpack;
 
 /**
  * @type {import('webpack').Configuration}
@@ -55,6 +67,9 @@ const config = {
 		],
 	},
 	plugins: [
+		new DefinePlugin({
+			'process.env.COMMIT_SHA': JSON.stringify(gitCommitSHA()),
+		}),
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-call -- circular-dependency-plugin is not typed
 		new CircularDependencyPlugin({
 			// exclude detection of files based on a RegExp

webpack.config.prod.mjs

@@ -1,31 +1,21 @@
-import { execSync } from 'child_process';
 import { join } from 'path';
 import TerserPlugin from 'terser-webpack-plugin';
-import webpack from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
+import { PROutPlugin } from './webpack/prout-plugin.mjs';
+import { UpdateParameterStorePlugin } from './webpack/update-parameter-store-plugin.mjs';
 import config from './webpack.config.mjs';
 
-const { DefinePlugin } = webpack;
-
-const gitCommitSHA = () => {
-	try {
-		const commitSHA = execSync('git rev-parse HEAD').toString().trim();
-		return { 'process.env.COMMIT_SHA': JSON.stringify(commitSHA) };
-	} catch (_) {
-		return {};
-	}
-};
-
 const prefix = process.env.BUNDLE_PREFIX ?? '[chunkhash]/';
 
 // eslint-disable-next-line import/no-default-export -- webpack config
 export default merge(config, {
 	mode: 'production',
 	output: {
-		filename: `${prefix}graun.standalone.commercial.js`,
-		chunkFilename: `${prefix}graun.[name].commercial.js`,
-		path: join(import.meta.dirname, 'dist', 'bundle', 'prod'),
+		filename: `commercial/${prefix}graun.standalone.commercial.js`,
+		chunkFilename: `commercial/${prefix}graun.[name].commercial.js`,
+		path: join(import.meta.dirname, 'dist', 'prod', 'artifacts'),
+		publicPath: 'auto',
 		clean: true,
 	},
 	devtool: 'source-map',
@@ -36,12 +26,8 @@ export default merge(config, {
 			analyzerMode: 'static',
 			openAnalyzer: false,
 		}),
-		new DefinePlugin({
-			'process.env.NODE_ENV': JSON.stringify('production'),
-			'process.env.OVERRIDE_BUNDLE_PATH': JSON.stringify(false),
-			'process.env.RIFFRAFF_DEPLOY': JSON.stringify(false),
-			...gitCommitSHA(),
-		}),
+		new UpdateParameterStorePlugin(),
+		new PROutPlugin(),
 	],
 	optimization: {
 		minimize: true,