From d3e759558d2c33525a29e14daaa9f5b0c742faea Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Sun, 24 Jul 2022 23:05:48 -0500
Subject: [PATCH] refactor: Extracting project creation out to own package
 (#1708)

* refactor: Extracting out project creation to own package

* docs: Adding changeset

* refactor: Misc edits to common deps & workspace helper scripts

* test: Fixing 'create' test suite

* ci: Increase minimum Node version

* chore: Fix typos

* docs: Update ReadMe instructions

* chore: Better (and untaken) package name

* docs: Update changeset

* test: Update 'create' test suite & build output hashes

* docs: Expounding upon changeset
---
 .changeset/tiny-garlics-argue.md              |  14 +
 .github/workflows/ci.yml                      |   2 +-
 README.md                                     |  37 +-
 package.json                                  |   4 +
 packages/cli/global.d.ts                      |   9 +
 packages/cli/lib/commands/create.js           | 440 ------------------
 packages/cli/lib/commands/index.js            |   5 -
 packages/cli/lib/constants.js                 |  44 --
 packages/cli/lib/index.js                     |  10 -
 packages/cli/lib/lib/setup.js                 |  65 ---
 packages/cli/lib/util.js                      |  25 -
 packages/cli/package.json                     |  10 +-
 packages/cli/tests/create.test.js             |  43 --
 packages/cli/tests/images/build.js            |  24 +-
 packages/cli/tests/lib/cli.js                 |  11 +-
 packages/cli/tests/service-worker.test.js     |   1 +
 packages/create-cli/package.json              |  36 ++
 packages/create-cli/src/commands/create.js    | 145 ++++++
 .../lib => create-cli/src}/commands/list.js   |   0
 packages/create-cli/src/index.js              |  31 ++
 packages/create-cli/src/resources/sw.js       |   4 +
 .../create-cli/src/resources/template.html    |  15 +
 packages/create-cli/src/util.js               |  50 ++
 packages/create-cli/tests/.eslintrc           |   9 +
 packages/create-cli/tests/create.test.js      |  26 ++
 .../tests/images/create.js                    |   0
 yarn.lock                                     |  23 +-
 27 files changed, 386 insertions(+), 697 deletions(-)
 create mode 100644 .changeset/tiny-garlics-argue.md
 delete mode 100644 packages/cli/lib/commands/create.js
 delete mode 100644 packages/cli/lib/constants.js
 delete mode 100644 packages/cli/lib/lib/setup.js
 delete mode 100644 packages/cli/tests/create.test.js
 create mode 100644 packages/create-cli/package.json
 create mode 100644 packages/create-cli/src/commands/create.js
 rename packages/{cli/lib => create-cli/src}/commands/list.js (100%)
 create mode 100755 packages/create-cli/src/index.js
 create mode 100644 packages/create-cli/src/resources/sw.js
 create mode 100644 packages/create-cli/src/resources/template.html
 create mode 100644 packages/create-cli/src/util.js
 create mode 100644 packages/create-cli/tests/.eslintrc
 create mode 100644 packages/create-cli/tests/create.test.js
 rename packages/{cli => create-cli}/tests/images/create.js (100%)

diff --git a/.changeset/tiny-garlics-argue.md b/.changeset/tiny-garlics-argue.md
new file mode 100644
index 000000000..4a11690db
--- /dev/null
+++ b/.changeset/tiny-garlics-argue.md
@@ -0,0 +1,14 @@
+---
+'preact-cli': major
+'create-preact-cli': major
+---
+
+Extracts project creation functionality from `preact-cli` into `create-preact-cli`
+
+Setting up new `preact-cli` projects with `npx` is slow, as all dependencies of `preact-cli` would need to be installed, even though only a handful are used for project initialization. On the other hand, suggesting global installs is less than attractive due to NPM's poor default install location (requires `sudo`) and this can get out of sync over time.
+
+By extracting project initialization into its own package, we can provide much, much faster project setup times.
+
+To setup a new project, users will use `npm init preact-cli ...` or `yarn create preact-cli ...`.
+
+Additionally, the `--yarn` flag has been removed in favour of using the yarn initializer (`yarn create`).
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 147ad9650..3b6c79ebc 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
     steps:
       - uses: actions/checkout@v2
         with:
diff --git a/README.md b/README.md
index 084651231..13ea794e8 100644
--- a/README.md
+++ b/README.md
@@ -50,13 +50,15 @@
 ### Usage
 
 ```sh
-$ npx preact-cli create <template-name> <project-name>
+$ npm init preact-cli <template-name> <project-name>
+
+$ yarn create preact-cli <template-name> <project-name>
 ```
 
 Example:
 
 ```sh
-$ npx preact-cli create default my-project
+$ npm init preact-cli default my-project
 ```
 
 The above command pulls the template from [preactjs-templates/default], prompts for some information, and generates the project at `./my-project/`.
@@ -65,7 +67,7 @@ The above command pulls the template from [preactjs-templates/default], prompts
 
 The purpose of official preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to preact.js.
 
-All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npx preact-cli create <template-name> <project-name>` to use that template.
+All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npm init preact-cli <template-name> <project-name>` to use that template.
 
 Current available templates include:
 
@@ -81,27 +83,32 @@ Current available templates include:
 
 - [widget-typescript] - Widget template implemented in TypeScript
 
-> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npx preact-cli create <username>/<repository> <project-name>`
+> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npm init preact-cli <username>/<repository> <project-name>`
 
 ### CLI Options
 
+#### preact list
+
+Lists all the official preactjs-cli repositories
+
+```sh
+$ [npm init / yarn create] preact-cli list
+```
+
 #### preact create
 
 Create a project to quick start development.
 
 ```
-$ npx preact-cli create <template-name> <project-name>
+$ [npm init / yarn create] preact-cli <template-name> <project-name>
 
   --name        The application name.
   --cwd         A directory to use instead of $PWD.
   --force       Force option to create the directory for the new app  [boolean] [default: false]
-  --yarn        Installs dependencies with yarn.                      [boolean] [default: false]
   --git         Initialize version control using git.                 [boolean] [default: false]
   --install     Installs dependencies.                                [boolean] [default: true]
 ```
 
-Note: If you don't specify enough data to the `npx preact-cli create` command, it will prompt the required questions.
-
 #### preact build
 
 Create a production build
@@ -109,7 +116,7 @@ Create a production build
 You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-prerender`, and `--no-inline-css`.
 
 ```
-$ preact build
+$ [npm run / yarn] preact build
 
     --src              Specify source directory  (default src)
     --dest             Specify output directory  (default build)
@@ -134,7 +141,7 @@ $ preact build
 Spin up a development server with multiple features like `hot-module-replacement`, `module-watcher`
 
 ```
-$ preact watch
+$ [npm run / yarn] preact watch
 
     --src              Specify source directory  (default src)
     --cwd              A directory to use instead of $PWD  (default .)
@@ -161,18 +168,14 @@ Note:
 1. You can run dev server using `HTTPS` then you can use the following `HTTPS=true preact watch`
 2. You can run the dev server on a different port using `PORT=8091 preact watch`
 
-#### preact list
+#### preact info
 
-Lists all the official preactjs-cli repositories
+Prints debugging information concerning the local environment.
 
 ```sh
-$ preact list
+$ [npm run / yarn] preact info
 ```
 
-#### preact info
-
-Prints debugging information concerning the local environment.
-
 ### Pre-rendering
 
 Preact CLI in order to follow [PRPL] pattern renders initial route (`/`) into generated static `index.html` - this ensures that users get to see your page before any JavaScript is run, and thus providing users with slow devices or poor connection your website's content much faster.
diff --git a/package.json b/package.json
index 98b412665..f46686767 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
     "packages/*"
   ],
   "scripts": {
+    "cli": "yarn workspace cli",
+    "create-cli": "yarn workspace @preactjs/create-cli-app",
     "pretest": "yarn lint",
     "test": "lerna run test --stream",
     "prettier": "prettier --write **/*.{js,ts,tsx,json,css,scss,md,yml}",
@@ -16,6 +18,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
+    "@types/jest": "^24.9.1",
     "babel-eslint": "^10.0.1",
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.2.0",
@@ -23,6 +26,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "husky": "^6.0.0",
+    "jest": "^24.9.0",
     "lerna": "^4.0.0",
     "lint-staged": "^11.0.0",
     "ncp": "^2.0.0",
diff --git a/packages/cli/global.d.ts b/packages/cli/global.d.ts
index 6e13e1205..d45a4fcaf 100644
--- a/packages/cli/global.d.ts
+++ b/packages/cli/global.d.ts
@@ -7,6 +7,15 @@ declare namespace jest {
 	}
 }
 
+// Modified from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/shelljs/index.d.ts
+declare module 'shelljs' {
+	const shell: {
+		cd: (string) => void;
+		exec: (string) => { stdout: string; stderr: string; code: number };
+	};
+	export = shell;
+}
+
 declare module '*.module.css' {
 	const classes: { [key: string]: string };
 	export default classes;
diff --git a/packages/cli/lib/commands/create.js b/packages/cli/lib/commands/create.js
deleted file mode 100644
index 52ce59f5d..000000000
--- a/packages/cli/lib/commands/create.js
+++ /dev/null
@@ -1,440 +0,0 @@
-const ora = require('ora');
-const { promisify } = require('util');
-const fetch = require('isomorphic-unfetch');
-const glob = promisify(require('glob').glob);
-const gittar = require('gittar');
-const { existsSync, mkdirSync } = require('fs');
-const { copyFile, mkdir, readFile, writeFile } = require('fs').promises;
-const os = require('os');
-const { green } = require('kleur');
-const { resolve, join } = require('path');
-const { prompt } = require('prompts');
-const isValidName = require('validate-npm-package-name');
-const {
-	info,
-	isDir,
-	hasCommand,
-	error,
-	trim,
-	warn,
-	dirExists,
-	normalizeTemplatesResponse,
-} = require('../util');
-const {
-	CUSTOM_TEMPLATE,
-	TEMPLATES_REPO_URL,
-	TEMPLATES_CACHE_FOLDER,
-	TEMPLATES_CACHE_FILENAME,
-	FALLBACK_TEMPLATE_OPTIONS,
-} = require('../constants');
-const { addScripts, install, initGit } = require('../lib/setup');
-const { validateArgs } = require('./validate-args');
-
-const ORG = 'preactjs-templates';
-const RGX =
-	/\.(woff2?|ttf|eot|jpe?g|ico|png|gif|webp|mp4|mov|ogg|webm)(\?.*)?$/i;
-const isMedia = str => RGX.test(str);
-const capitalize = str => str.charAt(0).toUpperCase() + str.substring(1);
-
-const options = [
-	{
-		name: '--name',
-		description: 'The application name',
-	},
-	{
-		name: '--cwd',
-		description: 'A directory to use instead of $PWD',
-		default: '.',
-	},
-	{
-		name: '--force',
-		description: 'Force destination output; will override!',
-		default: false,
-	},
-	{
-		name: '--install',
-		description: 'Install dependencies',
-		default: true,
-	},
-	{
-		name: '--yarn',
-		description: 'Use `yarn` instead of `npm`',
-		default: false,
-	},
-	{
-		name: '--git',
-		description: 'Initialize git repository',
-		default: false,
-	},
-	{
-		name: '--license',
-		description: 'License type',
-		default: 'MIT',
-	},
-	{
-		name: '-v, --verbose',
-		description: 'Verbose output',
-		default: false,
-	},
-];
-
-// Formulate Questions if `create` args are missing
-function requestParams(repo, dest, argv, templates) {
-	const cwd = resolve(argv.cwd);
-
-	return [
-		// Required data
-		{
-			type: repo ? null : 'select',
-			name: 'template',
-			message: 'Pick a template',
-			choices: templates,
-			initial: 0,
-		},
-		{
-			type: prev => (prev === 'custom' ? 'text' : null),
-			name: 'template',
-			message: 'Remote template to clone (user/repo#tag)',
-		},
-		{
-			type: dest ? null : 'text',
-			name: 'dest',
-			message: 'Directory to create the app',
-		},
-		{
-			type: prev => (!dirExists(cwd, prev || dest) ? null : 'confirm'),
-			name: 'force',
-			message: 'The destination directory exists. Overwrite?',
-			initial: false,
-			onState: state => {
-				if (state.aborted || !state.value) {
-					process.stdout.write('\n');
-					warn('Aborting due to existing directory');
-					process.exit();
-				}
-			},
-		},
-		// Extra data / flags
-		{
-			type: argv.name ? null : 'text',
-			name: 'name',
-			message: 'The name of your application',
-		},
-		{
-			type: 'confirm',
-			name: 'install',
-			message: 'Install dependencies',
-			initial: true,
-		},
-		{
-			type: prev => (!argv.yarn && prev ? 'confirm' : null),
-			name: 'yarn',
-			message: 'Install with `yarn` instead of `npm`',
-			initial: false,
-		},
-		{
-			type: argv.git ? null : 'confirm',
-			name: 'git',
-			message: 'Initialize a `git` repository',
-			initial: false,
-		},
-	];
-}
-
-async function updateTemplatesCache() {
-	const cacheFilePath = join(
-		os.homedir(),
-		TEMPLATES_CACHE_FOLDER,
-		TEMPLATES_CACHE_FILENAME
-	);
-
-	try {
-		const repos = await fetch(TEMPLATES_REPO_URL).then(r => r.json());
-		await writeFile(cacheFilePath, JSON.stringify(repos, null, 2), 'utf-8');
-	} catch (err) {
-		error(`\nFailed to update template cache\n ${err}`);
-	}
-}
-
-async function fetchTemplates() {
-	let templates = [];
-	const cacheFolder = join(os.homedir(), TEMPLATES_CACHE_FOLDER);
-	const cacheFilePath = join(
-		os.homedir(),
-		TEMPLATES_CACHE_FOLDER,
-		TEMPLATES_CACHE_FILENAME
-	);
-
-	try {
-		// fetch the repos list from the github API
-		info('Fetching official templates:\n');
-
-		// check if `.cache` folder exists or not, and create if does not exists
-		if (!existsSync(cacheFolder)) {
-			await mkdir(cacheFolder);
-		}
-
-		// If cache file doesn't exist, then hit the API and fetch the data
-		if (!existsSync(cacheFilePath)) {
-			const repos = await fetch(TEMPLATES_REPO_URL).then(r => r.json());
-			await writeFile(cacheFilePath, JSON.stringify(repos, null, 2), 'utf-8');
-		}
-
-		// update the cache file without blocking the rest of the tasks.
-		updateTemplatesCache();
-
-		// fetch the API response from cache file
-		const templatesFromCache = await readFile(cacheFilePath, 'utf-8');
-		const parsedTemplates = JSON.parse(templatesFromCache);
-		const officialTemplates = normalizeTemplatesResponse(parsedTemplates || []);
-
-		templates = officialTemplates.concat(CUSTOM_TEMPLATE);
-	} catch (e) {
-		// in case github API fails to fetch the data, fallback to the hard coded listings
-		templates = FALLBACK_TEMPLATE_OPTIONS.concat(CUSTOM_TEMPLATE);
-	}
-
-	return templates;
-}
-
-async function copyFileToDestination(srcPath, destPath, force = false) {
-	if (!existsSync(destPath) || force) {
-		await copyFile(srcPath, destPath);
-	}
-}
-
-async function command(repo, dest, argv) {
-	validateArgs(argv, options, 'create');
-	// Prompt if incomplete data
-	if (!repo || !dest) {
-		const templates = await fetchTemplates();
-		const questions = requestParams(repo, dest, argv, templates);
-		const onCancel = () => {
-			info('Aborting execution');
-			process.exit();
-		};
-		const response = await prompt(questions, { onCancel });
-
-		Object.assign(argv, response);
-		repo = repo || response.template;
-		dest = dest || response.dest;
-	}
-
-	if (!repo || !dest) {
-		warn('Insufficient arguments!');
-		info('Alternatively, run `preact create --help` for usage info.');
-		return;
-	}
-
-	let cwd = resolve(argv.cwd);
-	let target = resolve(cwd, dest);
-	let isYarn = argv.yarn && hasCommand('yarn');
-	let exists = isDir(target);
-
-	if (exists && !argv.force) {
-		return error(
-			'Refusing to overwrite current directory! Please specify a different destination or use the `--force` flag',
-			1
-		);
-	}
-
-	if (exists && argv.force) {
-		let { enableForce } = await prompt({
-			type: 'confirm',
-			name: 'enableForce',
-			message: `You are using '--force'. Do you wish to continue?`,
-			initial: false,
-		});
-
-		if (enableForce) {
-			info('Initializing project in the current directory!');
-		} else {
-			return error('Refusing to overwrite current directory!', 1);
-		}
-	}
-
-	// Use `--name` value or `dest` dir's name
-	argv.name = argv.name || dest;
-
-	let { errors } = isValidName(argv.name);
-	if (errors) {
-		errors.unshift(`Invalid package name: ${argv.name}`);
-		return error(errors.map(capitalize).join('\n  ~ '), 1);
-	}
-
-	if (!repo.includes('/')) {
-		repo = `${ORG}/${repo}`;
-		info(`Assuming you meant ${repo}...`);
-
-		// TODO: Remove this after updating all templates
-		if (repo.endsWith('default') || repo.endsWith('typescript')) {
-			repo += '#main';
-		}
-	}
-
-	if (!existsSync(resolve(cwd, dest, 'src'))) {
-		mkdirSync(resolve(cwd, dest, 'src'), { recursive: true });
-	}
-
-	// Attempt to fetch the `template`
-	let archive = await gittar.fetch(repo).catch(err => {
-		err = err || { message: 'An error occured while fetching template.' };
-
-		return error(
-			err.code === 404
-				? `Could not find repository: ${repo}`
-				: (argv.verbose && err.stack) || err.message,
-			1
-		);
-	});
-
-	let spinner = ora({
-		text: 'Creating project',
-		color: 'magenta',
-	}).start();
-
-	// Extract files from `archive` to `target`
-	// TODO: read & respond to meta/hooks
-	let keeps = [];
-	await gittar.extract(archive, target, {
-		strip: 2,
-		filter(path, obj) {
-			if (path.includes('/template/')) {
-				obj.on('end', () => {
-					if (obj.type === 'File' && !isMedia(obj.path)) {
-						keeps.push(obj.absolute);
-					}
-				});
-				return true;
-			}
-		},
-	});
-
-	if (keeps.length) {
-		// eslint-disable-next-line
-		const dict = new Map();
-		const templateVar = str => new RegExp(`{{\\s?${str}\\s}}`, 'g');
-
-		dict.set(templateVar('pkg-install'), isYarn ? 'yarn' : 'npm install');
-		dict.set(templateVar('pkg-run'), isYarn ? 'yarn' : 'npm run');
-		dict.set(templateVar('pkg-add'), isYarn ? 'yarn add' : 'npm install');
-		dict.set(templateVar('now-year'), new Date().getFullYear());
-		dict.set(templateVar('license'), argv.license || 'MIT');
-
-		// TODO: concat author-driven patterns
-		['name'].forEach(str => {
-			// if value is defined
-			if (argv[str] !== void 0) {
-				dict.set(templateVar(str), argv[str]);
-			}
-		});
-		// Update each file's contents
-		let buf,
-			entry,
-			enc = 'utf8';
-		for (entry of keeps) {
-			buf = await readFile(entry, enc);
-			dict.forEach((v, k) => {
-				buf = buf.replace(k, v);
-			});
-			await writeFile(entry, buf, enc);
-		}
-	} else {
-		return error(`No \`template\` directory found within ${repo}!`, 1);
-	}
-
-	spinner.text = 'Parsing `package.json` file';
-
-	// Validate user's `package.json` file
-	let pkgData,
-		pkgFile = resolve(target, 'package.json');
-
-	if (pkgFile) {
-		pkgData = JSON.parse(await readFile(pkgFile));
-		// Write default "scripts" if none found
-		pkgData.scripts =
-			pkgData.scripts || (await addScripts(pkgData, target, isYarn));
-	} else {
-		warn('Could not locate `package.json` file!');
-	}
-
-	// Update `package.json` key
-	if (pkgData) {
-		spinner.text = 'Updating `name` within `package.json` file';
-		pkgData.name = argv.name.toLowerCase().replace(/\s+/g, '_');
-	}
-	// Find a `manifest.json`; use the first match, if any
-	let files = await glob(target + '/**/manifest.json');
-	let manifest = files[0] && JSON.parse(await readFile(files[0]));
-	if (manifest) {
-		spinner.text = 'Updating `name` within `manifest.json` file';
-		manifest.name = manifest.short_name = argv.name;
-		// Write changes to `manifest.json`
-		await writeFile(files[0], JSON.stringify(manifest, null, 2));
-		if (argv.name.length > 12) {
-			// @see https://developer.chrome.com/extensions/manifest/name#short_name
-			process.stdout.write('\n');
-			warn('Your `short_name` should be fewer than 12 characters.');
-		}
-	}
-
-	if (pkgData) {
-		// Assume changes were made ¯\_(ツ)_/¯
-		await writeFile(pkgFile, JSON.stringify(pkgData, null, 2));
-	}
-
-	const sourceDirectory = join(resolve(cwd, dest), 'src');
-
-	if (!repo.includes('widget')) {
-		// Copy over template.html
-		const templateSrc = resolve(
-			__dirname,
-			join('..', 'resources', 'template.html')
-		);
-		const templateDest = join(sourceDirectory, 'template.html');
-		await copyFileToDestination(templateSrc, templateDest);
-
-		// Copy over sw.js
-		const serviceWorkerSrc = resolve(
-			__dirname,
-			join('..', '..', 'sw', 'sw.js')
-		);
-		const serviceWorkerDest = join(sourceDirectory, 'sw.js');
-		await copyFileToDestination(serviceWorkerSrc, serviceWorkerDest);
-	}
-
-	if (argv.install) {
-		spinner.text = 'Installing dependencies:\n';
-		spinner.stopAndPersist();
-		await install(target, isYarn);
-	}
-
-	spinner.succeed('Done!\n');
-
-	if (argv.git) {
-		await initGit(target);
-	}
-
-	let pfx = isYarn ? 'yarn' : 'npm run';
-
-	process.stdout.write(
-		trim(`
-		To get started, cd into the new directory:
-		  ${green('cd ' + dest)}
-
-		To start a development live-reload server:
-		  ${green(pfx + ' dev')}
-
-		To create a production build (in ./build):
-		  ${green(pfx + ' build')}
-
-		To start a production HTTP/2 server:
-		  ${green(pfx + ' serve')}
-	`) + '\n\n'
-	);
-}
-
-module.exports = {
-	command,
-	options,
-};
diff --git a/packages/cli/lib/commands/index.js b/packages/cli/lib/commands/index.js
index 35a2c9282..852c41ce5 100644
--- a/packages/cli/lib/commands/index.js
+++ b/packages/cli/lib/commands/index.js
@@ -1,14 +1,9 @@
 const { command: build, options: buildOptions } = require('./build');
-const { command: create, options: createOptions } = require('./create');
-const list = require('./list');
 const { command: watch, options: watchOptions } = require('./watch');
 
 module.exports = {
 	build,
 	buildOptions,
-	create,
-	createOptions,
-	list,
 	watch,
 	watchOptions,
 };
diff --git a/packages/cli/lib/constants.js b/packages/cli/lib/constants.js
deleted file mode 100644
index ca031df11..000000000
--- a/packages/cli/lib/constants.js
+++ /dev/null
@@ -1,44 +0,0 @@
-exports.TEMPLATES_REPO_URL =
-	'https://api.github.com/users/preactjs-templates/repos';
-
-exports.CUSTOM_TEMPLATE = {
-	value: 'custom',
-	title: 'Custom',
-	description: 'Use your own template',
-};
-
-exports.FALLBACK_TEMPLATE_OPTIONS = [
-	{
-		value: 'preactjs-templates/default',
-		title: 'default',
-		description: 'The default template for Preact CLI',
-	},
-	{
-		value: 'preactjs-templates/typescript',
-		title: 'typescript',
-		description: 'The default template for Preact CLI in typescript',
-	},
-	{
-		value: 'preactjs-templates/material',
-		title: 'material',
-		description: 'The material design `preact-cli` template',
-	},
-	{
-		value: 'preactjs-templates/simple',
-		title: 'simple',
-		description: 'A simple, minimal "Hello World" template for Preact CLI',
-	},
-	{
-		value: 'preactjs-templates/netlify',
-		title: 'netlify',
-		description: 'A preactjs and netlify CMS template',
-	},
-	{
-		value: 'preactjs-templates/widget',
-		title: 'widget',
-		description: 'Template for a widget to be embedded in another website',
-	},
-];
-
-exports.TEMPLATES_CACHE_FOLDER = '.cache';
-exports.TEMPLATES_CACHE_FILENAME = 'preact-templates.json';
diff --git a/packages/cli/lib/index.js b/packages/cli/lib/index.js
index 7b076a87e..b7cf1208d 100755
--- a/packages/cli/lib/index.js
+++ b/packages/cli/lib/index.js
@@ -40,14 +40,6 @@ commands.buildOptions.forEach(option => {
 });
 buildCommand.action(commands.build);
 
-const createCommand = prog
-	.command('create [template] [dest]')
-	.describe('Create a new application');
-commands.createOptions.forEach(option => {
-	createCommand.option(option.name, option.description, option.default);
-});
-createCommand.action(commands.create);
-
 const watchCommand = prog
 	.command('watch [src]')
 	.describe('Start a live-reload server for development');
@@ -56,8 +48,6 @@ commands.watchOptions.forEach(option => {
 });
 watchCommand.action(commands.watch);
 
-prog.command('list').describe('List official templates').action(commands.list);
-
 prog
 	.command('info')
 	.describe('Print out debugging information about the local environment')
diff --git a/packages/cli/lib/lib/setup.js b/packages/cli/lib/lib/setup.js
deleted file mode 100644
index ab2f449b6..000000000
--- a/packages/cli/lib/lib/setup.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const spawn = require('cross-spawn-promise');
-const { hasCommand, warn } = require('../util');
-
-const stdio = 'ignore';
-
-exports.install = function (cwd, isYarn) {
-	let cmd = isYarn ? 'yarn' : 'npm';
-	return spawn(cmd, ['install'], { cwd, stdio: 'inherit' });
-};
-
-exports.addScripts = async function (obj, cwd, isYarn) {
-	let cmd = isYarn ? 'yarn' : 'npm';
-	let args = isYarn ? ['add', '--dev'] : ['install', '--save-dev'];
-
-	// Install `if-env`
-	await spawn(cmd, [...args, 'if-env'], { cwd, stdio });
-
-	return {
-		build: 'preact build',
-		serve: 'preact build && preact serve',
-		start: `if-env NODE_ENV=production && ${cmd} run -s serve || ${cmd} run -s watch`,
-		watch: 'preact watch',
-	};
-};
-
-// Initializes the folder using `git init` and a proper `.gitignore` file
-// if `git` is present in the $PATH.
-exports.initGit = async function (target) {
-	let git = hasCommand('git');
-
-	if (git) {
-		const cwd = target;
-
-		await spawn('git', ['init'], { cwd });
-		await spawn('git', ['add', '-A'], { cwd });
-
-		let gitUser, gitEmail;
-		const defaultGitUser = 'Preact CLI';
-		const defaultGitEmail = 'preact-cli@users.noreply.github.com';
-
-		try {
-			gitEmail = (await spawn('git', ['config', 'user.email'])).toString();
-		} catch (e) {
-			gitEmail = defaultGitEmail;
-		}
-
-		try {
-			gitUser = (await spawn('git', ['config', 'user.name'])).toString();
-		} catch (e) {
-			gitUser = defaultGitUser;
-		}
-
-		await spawn('git', ['commit', '-m', 'initial commit from Preact CLI'], {
-			cwd,
-			env: {
-				GIT_COMMITTER_NAME: gitUser,
-				GIT_COMMITTER_EMAIL: gitEmail,
-				GIT_AUTHOR_NAME: defaultGitUser,
-				GIT_AUTHOR_EMAIL: defaultGitEmail,
-			},
-		});
-	} else {
-		warn('Could not locate `git` binary in `$PATH`. Skipping!');
-	}
-};
diff --git a/packages/cli/lib/util.js b/packages/cli/lib/util.js
index bfcecf631..6b6a8dde2 100644
--- a/packages/cli/lib/util.js
+++ b/packages/cli/lib/util.js
@@ -2,29 +2,12 @@ const { blue, yellow, red } = require('kleur');
 const { normalize, resolve } = require('path');
 const { statSync, existsSync } = require('fs');
 const symbols = require('./symbols');
-const which = require('which');
 const net = require('net');
 
 exports.isDir = function (str) {
 	return existsSync(str) && statSync(str).isDirectory();
 };
 
-exports.dirExists = function (workingDir, destDir) {
-	if (workingDir && destDir) {
-		const target = resolve(workingDir, destDir);
-		return exports.isDir(target);
-	}
-	return false;
-};
-
-exports.hasCommand = function (str) {
-	return !!which.sync(str, { nothrow: true });
-};
-
-exports.trim = function (str) {
-	return str.trim().replace(/^\t+/gm, '');
-};
-
 exports.info = function (text, code) {
 	process.stderr.write(symbols.info + blue(' INFO ') + text + '\n');
 	code && process.exit(code);
@@ -44,14 +27,6 @@ exports.normalizePath = function (str) {
 	return normalize(str).replace(/\\/g, '/');
 };
 
-exports.normalizeTemplatesResponse = function (repos = []) {
-	return repos.map(repo => ({
-		title: repo.name || '',
-		value: repo.full_name || '',
-		description: repo.description || '',
-	}));
-};
-
 exports.toBool = function (val) {
 	return val === void 0 || (val === 'false' ? false : val);
 };
diff --git a/packages/cli/package.json b/packages/cli/package.json
index fd7ed492c..c92b6941f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -34,9 +34,8 @@
   "homepage": "https://github.com/preactjs/preact-cli",
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/jest": "^24.9.1",
+    "glob": "^8.0.3",
     "html-looks-like": "^1.0.2",
-    "jest": "^24.9.0",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "ncp": "^2.0.0",
@@ -91,7 +90,6 @@
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^9.1.0",
     "critters-webpack-plugin": "^3.0.2",
-    "cross-spawn-promise": "^0.10.1",
     "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "^16.0.0",
@@ -100,8 +98,6 @@
     "esm": "^3.2.25",
     "fork-ts-checker-webpack-plugin": "^7.1.1",
     "get-port": "^5.0.0",
-    "gittar": "^0.1.0",
-    "glob": "^8.0.3",
     "html-webpack-plugin": "^5.5.0",
     "html-webpack-skip-assets-plugin": "1.0.3",
     "ip": "^1.1.8",
@@ -111,13 +107,11 @@
     "minimatch": "^3.0.3",
     "native-url": "0.3.4",
     "optimize-plugin": "^1.3.0",
-    "ora": "^5.4.1",
     "postcss": "^8.4.13",
     "postcss-load-config": "^3.1.4",
     "postcss-loader": "^6.2.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "promise-polyfill": "^8.2.3",
-    "prompts": "^2.4.2",
     "react-refresh": "0.11.0",
     "rimraf": "^3.0.2",
     "sade": "^1.8.1",
@@ -128,7 +122,6 @@
     "terser-webpack-plugin": "^5.3.0",
     "typescript": "^4.6.4",
     "update-notifier": "^5.1.0",
-    "validate-npm-package-name": "^4.0.0",
     "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.9.0",
@@ -136,7 +129,6 @@
     "webpack-merge": "^5.8.0",
     "webpack-plugin-replace": "^1.2.0",
     "webpack-remove-empty-scripts": "^0.7.2",
-    "which": "^2.0.2",
     "workbox-cacheable-response": "^6.5.3",
     "workbox-core": "^6.5.3",
     "workbox-precaching": "^6.5.3",
diff --git a/packages/cli/tests/create.test.js b/packages/cli/tests/create.test.js
deleted file mode 100644
index 35dcece05..000000000
--- a/packages/cli/tests/create.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const { readFile } = require('fs').promises;
-const { relative, resolve } = require('path');
-const { create } = require('./lib/cli');
-const { expand } = require('./lib/utils');
-const snapshots = require('./images/create');
-
-describe('preact create', () => {
-	it(`scaffolds the 'default' official template`, async () => {
-		let dir = await create('default');
-
-		let output = await expand(dir).then(arr => {
-			return arr.map(x => relative(dir, x));
-		});
-
-		expect(output.sort()).toEqual(snapshots.default);
-	});
-
-	it(`should use template.html from the github repo`, async () => {
-		let dir = await create('netlify');
-
-		const templateFilePath = resolve(__dirname, dir, 'src', 'template.html');
-		const template = await readFile(templateFilePath, 'utf8');
-
-		expect(template.includes('twitter:card')).toEqual(true);
-	});
-
-	it(`should have 'apple-touch-icon' meta tag`, async () => {
-		let dir = await create('simple');
-
-		const templateFilePath = resolve(__dirname, dir, 'src', 'template.html');
-		const template = await readFile(templateFilePath, 'utf8');
-
-		expect(template.includes('apple-touch-icon')).toEqual(true);
-	});
-
-	it('should fail given an invalid name', async () => {
-		// @ts-ignore
-		const exit = jest.spyOn(process, 'exit').mockImplementation(() => {});
-		await create('simple', '*()@!#!$-Invalid-Name');
-
-		expect(exit).toHaveBeenCalledWith(1);
-	});
-});
diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
index 67aa6937b..852d4f18e 100644
--- a/packages/cli/tests/images/build.js
+++ b/packages/cli/tests/images/build.js
@@ -13,10 +13,10 @@ exports.default = {
 	'ssr-build/ssr-bundle.js.map': 30625,
 	'ssr-build/asset-manifest.json': 82,
 
-	'bundle.3f496.js': 21323,
-	'bundle.3f496.js.map': 85534,
-	'bundle.3f496.legacy.js': 22514,
-	'bundle.3f496.legacy.js.map': 106422,
+	'bundle.86ff2.js': 21323,
+	'bundle.86ff2.js.map': 85534,
+	'bundle.86ff2.legacy.js': 22514,
+	'bundle.86ff2.legacy.js.map': 106422,
 	'bundle.a2557.css': 945,
 	'bundle.a2557.css.map': 1758,
 
@@ -31,17 +31,17 @@ exports.default = {
 	'push-manifest.json': 450,
 	'asset-manifest.json': 943,
 
-	'route-home.chunk.b9f12.js': 306,
-	'route-home.chunk.b9f12.js.map': 1615,
-	'route-home.chunk.b9f12.legacy.js': 363,
-	'route-home.chunk.b9f12.legacy.js.map': 1913,
+	'route-home.chunk.b77d6.js': 306,
+	'route-home.chunk.b77d6.js.map': 1490,
+	'route-home.chunk.b77d6.legacy.js': 363,
+	'route-home.chunk.b77d6.legacy.js.map': 1752,
 	'route-home.chunk.6eaee.css': 112,
 	'route-home.chunk.6eaee.css.map': 224,
 
-	'route-profile.chunk.d94b1.js': 2469,
-	'route-profile.chunk.d94b1.js.map': 9736,
-	'route-profile.chunk.d94b1.legacy.js': 2624,
-	'route-profile.chunk.d94b1.legacy.js.map': 12373,
+	'route-profile.chunk.d8eb4.js': 2469,
+	'route-profile.chunk.d8eb4.js.map': 9736,
+	'route-profile.chunk.d8eb4.legacy.js': 2624,
+	'route-profile.chunk.d8eb4.legacy.js.map': 12373,
 	'route-profile.chunk.0af3e.css': 118,
 	'route-profile.chunk.0af3e.css.map': 231,
 };
diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js
index 8bc6eaca8..f6bfd1bc3 100644
--- a/packages/cli/tests/lib/cli.js
+++ b/packages/cli/tests/lib/cli.js
@@ -1,6 +1,9 @@
 const { join } = require('path');
 const { mkdir, symlink, readFile, writeFile } = require('fs').promises;
-const cmd = require('../../lib/commands');
+const { build: buildCmd, watch: watchCmd } = require('../../lib/commands');
+const {
+	create: createCmd,
+} = require('../../../create-cli/src/commands/create');
 const { tmpDir } = require('./output');
 const { disableOptimizeConfig, disableOptimize } = require('./utils');
 
@@ -44,7 +47,7 @@ exports.create = async function (template, name) {
 	let dest = await tmpDir();
 	name = name || `test-${template}`;
 
-	await cmd.create(template, dest, { name, cwd: '.' });
+	await createCmd(template, dest, { name, cwd: '.' });
 
 	return dest;
 };
@@ -55,7 +58,7 @@ const build = (exports.build = async function (cwd, options) {
 	await linkPackage('preact-render-to-string', root, cwd);
 
 	let opts = Object.assign({}, { cwd }, argv, options);
-	return await cmd.build(opts.src, opts);
+	return await buildCmd(opts.src, opts);
 });
 
 exports.buildFast = async function (cwd, options) {
@@ -68,5 +71,5 @@ exports.watch = function (cwd, port, host = '127.0.0.1') {
 	delete args.dest;
 	delete args['inline-css'];
 	let opts = Object.assign({ cwd, host, port, https: false }, args);
-	return cmd.watch(argv.src, opts);
+	return watchCmd(argv.src, opts);
 };
diff --git a/packages/cli/tests/service-worker.test.js b/packages/cli/tests/service-worker.test.js
index 7f21e8e7a..503d5cb00 100644
--- a/packages/cli/tests/service-worker.test.js
+++ b/packages/cli/tests/service-worker.test.js
@@ -4,6 +4,7 @@ const { create, build } = require('./lib/cli');
 const { sleep } = require('./lib/utils');
 const { getServer } = require('./server');
 const startChrome = require('./lib/chrome');
+const fetch = require('isomorphic-unfetch');
 
 async function enableOfflineMode(page, browser) {
 	await sleep(2000); // wait for service worker installation.
diff --git a/packages/create-cli/package.json b/packages/create-cli/package.json
new file mode 100644
index 000000000..b7d1cf8df
--- /dev/null
+++ b/packages/create-cli/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "create-preact-cli",
+  "version": "3.4.0",
+  "description": "Start building a Preact Progressive Web App in seconds.",
+  "repository": "preactjs/preact-cli",
+  "main": "src/index.js",
+  "bin": "src/index.js",
+  "scripts": {
+    "pretest": "rimraf ../cli/tests/output",
+    "test": "jest"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "preact",
+    "cli",
+    "pwa",
+    "project",
+    "generator"
+  ],
+  "license": "MIT",
+  "bugs": "https://github.com/preactjs/preact-cli/issues",
+  "homepage": "https://github.com/preactjs/preact-cli",
+  "dependencies": {
+    "cross-spawn-promise": "^0.10.1",
+    "gittar": "^0.1.0",
+    "isomorphic-unfetch": "^3.1.0",
+    "kleur": "^4.1.4",
+    "ora": "^5.4.1",
+    "sade": "^1.8.1"
+  }
+}
diff --git a/packages/create-cli/src/commands/create.js b/packages/create-cli/src/commands/create.js
new file mode 100644
index 000000000..c8de27d92
--- /dev/null
+++ b/packages/create-cli/src/commands/create.js
@@ -0,0 +1,145 @@
+const { mkdir, readFile, stat, writeFile } = require('fs/promises');
+const { join, resolve } = require('path');
+
+const ora = require('ora');
+const gittar = require('gittar');
+const { green } = require('kleur/colors');
+
+const {
+	copyTemplateFile,
+	error,
+	initGit,
+	installDependencies,
+	warn,
+} = require('../util.js');
+
+exports.create = async function create(repo, dest, argv) {
+	let cwd = resolve(argv.cwd);
+	let target = resolve(cwd, dest);
+	const packageManager = /yarn/.test(process.env.npm_execpath || '')
+		? 'yarn'
+		: 'npm';
+
+	try {
+		if ((await stat(target)).isDirectory() && !argv.force) {
+			error(
+				'Refusing to overwrite current directory! Please specify a different destination or use the `--force` flag',
+				1
+			);
+		}
+	} catch {}
+
+	// Use `--name` value or `dest` dir's name
+	argv.name = argv.name || dest;
+
+	if (!repo.includes('/')) {
+		repo = `preactjs-templates/${repo}`;
+
+		// TODO: Remove this after updating all templates
+		if (repo.endsWith('default') || repo.endsWith('typescript')) {
+			repo += '#next';
+		}
+	}
+
+	await mkdir(resolve(cwd, dest), { recursive: true });
+
+	// Attempt to fetch the template
+	let archive = await gittar.fetch(repo).catch(err => {
+		err = err || { message: 'An error occured while fetching template.' };
+
+		return error(
+			err.code === 404
+				? `Could not find repository: ${repo}`
+				: (argv.verbose && err.stack) || err.message,
+			1
+		);
+	});
+
+	let spinner = ora({
+		text: 'Creating project',
+		color: 'magenta',
+	}).start();
+
+	// Extract files from `archive` to `target`
+	// TODO: read & respond to meta/hooks
+	let hasValidStructure = false;
+	await gittar.extract(archive, target, {
+		strip: 2,
+		filter(path) {
+			if (path.includes('/template/')) {
+				hasValidStructure = true;
+				return true;
+			}
+		},
+	});
+
+	if (!hasValidStructure) {
+		error(
+			`No 'template' directory found within ${repo}! This is necessary for project creation.`,
+			1
+		);
+	}
+
+	try {
+		spinner.text = 'Updating `name` within `manifest.json` file';
+		const manifestPath = join(target, 'src', 'manifest.json');
+
+		let manifest = JSON.parse(await readFile(manifestPath, 'utf-8'));
+		manifest.name = manifest.short_name = argv.name;
+
+		await writeFile(manifestPath, JSON.stringify(manifest, null, 2));
+		if (argv.name.length > 12) {
+			// @see https://developer.chrome.com/extensions/manifest/name#short_name
+			warn('Your `short_name` should be fewer than 12 characters.');
+		}
+	} catch {}
+
+	if (!repo.includes('widget')) {
+		const sourceDirectory = join(resolve(cwd, dest), 'src');
+
+		// Copy over template.html
+		const templateSrc = resolve(
+			__dirname,
+			join('..', 'resources', 'template.html')
+		);
+		const templateDest = join(sourceDirectory, 'template.html');
+		await copyTemplateFile(templateSrc, templateDest, argv.force);
+
+		// Copy over sw.js
+		const serviceWorkerSrc = resolve(
+			__dirname,
+			join('..', 'resources', 'sw.js')
+		);
+		const serviceWorkerDest = join(sourceDirectory, 'sw.js');
+		await copyTemplateFile(serviceWorkerSrc, serviceWorkerDest, argv.force);
+	}
+
+	if (argv.install) {
+		spinner.text = 'installing dependencies...';
+		spinner.stopAndPersist();
+		await installDependencies(target, packageManager);
+	}
+
+	if (argv.git) {
+		await initGit(target);
+	}
+
+	spinner.succeed('Done!\n');
+
+	let pfx = packageManager === 'yarn' ? 'yarn' : 'npm run';
+
+	const result = `
+		To get started, cd into the new directory:
+		  ${green('cd ' + dest)}
+
+		To start a development live-reload server:
+		  ${green(pfx + ' dev')}
+
+		To create a production build (in ./build):
+		  ${green(pfx + ' build')}
+
+		To start a production HTTP/2 server:
+		  ${green(pfx + ' serve')}
+	`;
+	process.stdout.write(result.trim().replace(/^\t+/gm, '') + '\n\n');
+};
diff --git a/packages/cli/lib/commands/list.js b/packages/create-cli/src/commands/list.js
similarity index 100%
rename from packages/cli/lib/commands/list.js
rename to packages/create-cli/src/commands/list.js
diff --git a/packages/create-cli/src/index.js b/packages/create-cli/src/index.js
new file mode 100755
index 000000000..fe0362cff
--- /dev/null
+++ b/packages/create-cli/src/index.js
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+const sade = require('sade');
+const { create } = require('./commands/create.js');
+//const { create } = require('./commands/create.js)';
+const { error } = require('./util.js');
+
+const prog = sade('create-preact-app').version('0.1.3');
+
+prog
+	.command('create <template> <dest>', '', { default: true })
+	.describe('Create a new application')
+	.option('--name', 'The application name')
+	.option('--cwd', 'A directory to use instead of $PWD', '.')
+	.option('--force', 'Force destination output; will override!', false)
+	.option('--install', 'Install dependencies', true)
+	.option('--git', 'Initialize git repository', true)
+	.action(create);
+
+//prog
+//    .command('list')
+//    .describe('List official templates')
+//    .action(list);
+
+prog.parse(process.argv, {
+	unknown: arg => {
+		const cmd = process.argv[2];
+		error(
+			`Invalid argument '${arg}' passed to ${cmd}. Please refer to 'preact ${cmd} --help' for the full list of options.\n`
+		);
+	},
+});
diff --git a/packages/create-cli/src/resources/sw.js b/packages/create-cli/src/resources/sw.js
new file mode 100644
index 000000000..146aa01dd
--- /dev/null
+++ b/packages/create-cli/src/resources/sw.js
@@ -0,0 +1,4 @@
+import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/';
+
+setupRouting();
+setupPrecaching(getFiles());
diff --git a/packages/create-cli/src/resources/template.html b/packages/create-cli/src/resources/template.html
new file mode 100644
index 000000000..4b33acd6f
--- /dev/null
+++ b/packages/create-cli/src/resources/template.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title><% preact.title %></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>assets/icons/apple-touch-icon.png">
+		<% preact.headEnd %>
+	</head>
+	<body>
+		<% preact.bodyEnd %>
+	</body>
+</html>
diff --git a/packages/create-cli/src/util.js b/packages/create-cli/src/util.js
new file mode 100644
index 000000000..72a3977ab
--- /dev/null
+++ b/packages/create-cli/src/util.js
@@ -0,0 +1,50 @@
+const { access, copyFile } = require('fs/promises');
+
+const spawn = require('cross-spawn-promise');
+const { blue, red, yellow } = require('kleur/colors');
+
+exports.copyTemplateFile = async function copyTemplateFile(
+	srcPath,
+	destPath,
+	force
+) {
+	try {
+		await access(destPath);
+		if (force) {
+			await copyFile(srcPath, destPath);
+		}
+	} catch {
+		await copyFile(srcPath, destPath);
+	}
+};
+
+/**
+ * @param {string} cwd
+ * @param {'yarn' | 'npm'} packageManager
+ */
+exports.installDependencies = async function installDependencies(
+	cwd,
+	packageManager
+) {
+	await spawn(packageManager, ['install'], { cwd, stdio: 'inherit' });
+};
+
+/**
+ * @param {string} cwd
+ */
+exports.initGit = async function initGit(cwd) {
+	await spawn('git', ['init'], { cwd });
+};
+
+exports.info = function (text) {
+	process.stderr.write(`${blue(text)}`);
+};
+
+exports.error = function error(text, code = 1) {
+	process.stderr.write(`${red(text)}\n`);
+	code && process.exit(code);
+};
+
+exports.warn = function warn(text) {
+	process.stdout.write(`${yellow(text)}\n`);
+};
diff --git a/packages/create-cli/tests/.eslintrc b/packages/create-cli/tests/.eslintrc
new file mode 100644
index 000000000..8c8f368f4
--- /dev/null
+++ b/packages/create-cli/tests/.eslintrc
@@ -0,0 +1,9 @@
+{
+  "env": {
+    "jest": true,
+    "jasmine": true
+  },
+  "globals": {
+    "jasmine": true
+  }
+}
diff --git a/packages/create-cli/tests/create.test.js b/packages/create-cli/tests/create.test.js
new file mode 100644
index 000000000..a0938b6ea
--- /dev/null
+++ b/packages/create-cli/tests/create.test.js
@@ -0,0 +1,26 @@
+const { readFile } = require('fs/promises');
+const { relative, resolve } = require('path');
+const { create } = require('../../cli/tests/lib/cli');
+const { expand } = require('../../cli/tests/lib/utils');
+const snapshots = require('./images/create');
+
+describe('preact create', () => {
+	it('scaffolds the `default` official template', async () => {
+		let dir = await create('default');
+
+		let output = await expand(dir).then(arr => {
+			return arr.map(x => relative(dir, x));
+		});
+
+		expect(output.sort()).toEqual(snapshots.default);
+	});
+
+	it('should use template.html from the repo if one exists', async () => {
+		let dir = await create('netlify');
+
+		const templateFilePath = resolve(__dirname, dir, 'src', 'template.html');
+		const template = await readFile(templateFilePath, 'utf8');
+
+		expect(template.includes('twitter:card')).toEqual(true);
+	});
+});
diff --git a/packages/cli/tests/images/create.js b/packages/create-cli/tests/images/create.js
similarity index 100%
rename from packages/cli/tests/images/create.js
rename to packages/create-cli/tests/images/create.js
diff --git a/yarn.lock b/yarn.lock
index 08ea9064f..c0cd19d30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4031,13 +4031,6 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-builtins@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/builtins/-/builtins-5.0.1.tgz#87f6db9ab0458be728564fa81d876d8d74552fa9"
-  integrity sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==
-  dependencies:
-    semver "^7.0.0"
-
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
@@ -11529,7 +11522,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prompts@^2.0.1, prompts@^2.4.2:
+prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
   integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
@@ -12516,13 +12509,6 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.0.0:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
-  dependencies:
-    lru-cache "^6.0.0"
-
 semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
@@ -14129,13 +14115,6 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-validate-npm-package-name@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz#fe8f1c50ac20afdb86f177da85b3600f0ac0d747"
-  integrity sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==
-  dependencies:
-    builtins "^5.0.0"
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"