Rocket FE build setup

This Node CLI tool helps developers quickly create multiple frontend builds for site packages using Vite 5.

Requirements

• node >= 20.18.0 (https://nodejs.org/en/download/)
• npm >= 18.17.0 (https://www.npmjs.com/get-npm)
• yarn >= 3.0.0 (https://yarnpkg.com/en/docs/install)

CLI Commands

To see available commands, run:

$ yarn rocket help

For example, to start a new build, you can run:

$ yarn rocket build --site=my-site

Config setup

Shared Vite Config (config/shared.vite.config.js)

This file contains shared Vite configuration that applies to all packages. You can extend it as needed.

import { defineConfig } from 'vite';

export const sharedViteConfig = defineConfig({
	resolve: {
		alias: {
			// ...
		},
	},
});

Package-specific Config (config/XXX.package.js)

For each package, you can override certain configurations using this setup:

import { definePackageConfig } from 'b13-rocket';

export const config = definePackageConfig({
	name: '',   // package name
	input: '',  // entry js file
	output: '', // output directory
	root: '',   // project root
	postcss: {
		sortMediaQueries: true, // default: true
	},
	sass: {
		// Optional: silence Dart Sass deprecation warnings per package
		// e.g. "slash-div" (removed in Sass 2.0) and "import" (removed in Sass 3.0)
		silenceDeprecations: silenceDeprecations: ['slash-div', 'import', 'color-functions', 'global-builtin', 'mixed-decls', 'strict-unary'],
	},
	viteConfig: {
		// Override Vite config for this package
		resolve: {
			alias: {
				// Define package-specific aliases here
			},
		},
	},
});

Disable media query sorting for one package:

export const config = definePackageConfig({
	name: 'labels',
	// ...
	postcss: {
		sortMediaQueries: false,
	},
});

Silence specific Dart Sass deprecation warnings for one package:

export const config = definePackageConfig({
	name: 'legacy-package',
	// ...
	sass: {
		silenceDeprecations: ['slash-div', 'import', 'color-functions', 'global-builtin', 'mixed-decls', 'strict-unary'],
	},
});

Extract CSS

To extract CSS from the Vite build, add the external- prefix to the CSS filename.

Example:

import 'external-rte.css';

Update

Update Yarn version and switch to vite

// switch to latest yarn version
$ yarn set version berry

// update node dependencies 
$ yarn install
$ yarn remove b13-build-cli
$ yarn add b13-rocket

Update .gitignore

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

Remove package.json 'rocket' script call

If your package.json still contains a rocket script, remove it to avoid conflicts with the new CLI version.

....
"scripts": {
    "rocket": "yarn node ./node_modules/b13-build-cli/index.js",
}
...

Use hmr inside ddev container

1. Copy files from files directory to your .ddev directory.
2. Restart ddev (ddev restart)
3. Start rocket via ddev command: ddev rocket, ddev rocket hmr --site=.... etc.