Npx script for creating a new Onlook project (#292)

cli/README.md

@@ -4,7 +4,7 @@ A command line interface for Onlook.
 This package contains the following functionality
 
 - [x] Setting up your project
-- [ ] Install template projects
+- [X] Install template projects
 - [ ] Auto generate component library
 - [ ] Migrating your Onlook configuration
 

cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onlook",
   "description": "The Onlook Command Line Interface",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "dist/index.js",
   "bin": {
     "onlook": "dist/index.cjs"
@@ -32,6 +32,7 @@
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/bun": "latest",
+    "@types/degit": "^2.8.6",
     "esbuild": "^0.23.1",
     "tslib": "^2.6.3",
     "typescript": "^5.0.0"
@@ -42,6 +43,8 @@
     "@babel/traverse": "^7.14.5",
     "@babel/types": "^7.14.5",
     "commander": "^12.1.0",
-    "glob": "^11.0.0"
+    "degit": "^2.8.4",
+    "glob": "^11.0.0",
+    "ora": "^8.1.0"
   }
 }

cli/src/create/constant.ts

@@ -0,0 +1 @@
+export const NEXT_TEMPLATE_REPO = 'onlook-dev/starter';

cli/src/create/index.ts

@@ -0,0 +1,52 @@
+import { exec } from 'child_process';
+import degit from 'degit';
+import * as fs from 'fs';
+import ora from 'ora';
+import * as path from 'path';
+import { promisify } from 'util';
+import { NEXT_TEMPLATE_REPO } from './constant';
+
+const execAsync = promisify(exec);
+
+export async function create(projectName: string) {
+    const targetPath = path.join(process.cwd(), projectName);
+
+    console.log(`Creating a new Onlook project: ${projectName}`);
+
+    // Check if the directory already exists
+    if (fs.existsSync(targetPath)) {
+        console.error(`Error: Directory ${projectName} already exists.`);
+        process.exit(1);
+    }
+
+    const spinner = ora('Initializing project').start();
+
+    try {
+        // Clone the template using degit
+        spinner.text = 'Cloning template';
+        const emitter = degit(NEXT_TEMPLATE_REPO, {
+            cache: false,
+            force: true,
+            verbose: true,
+        });
+
+        await emitter.clone(targetPath);
+
+        // Change to the project directory
+        process.chdir(targetPath);
+
+        // Install dependencies
+        spinner.text = 'Installing dependencies';
+        await execAsync('npm install');
+
+        spinner.succeed('Project created successfully');
+
+        console.log('\nTo get started:');
+        console.log(`  cd ${projectName}`);
+        console.log('  npm run dev');
+    } catch (error) {
+        spinner.fail('Project creation failed');
+        console.error('An error occurred:', error);
+        process.exit(1);
+    }
+}

cli/src/index.ts

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
+import { create } from './create';
 import { setup } from './setup';
 
 declare let PACKAGE_VERSION: string;
@@ -13,9 +14,9 @@ export function createProgram() {
         .version(typeof PACKAGE_VERSION !== 'undefined' ? PACKAGE_VERSION : '0.0.0');
 
     program
-        .command('create')
+        .command('create <project-name>')
         .description('Create a new Onlook project from scratch')
-        .action(() => console.log("Coming soon!"));
+        .action(create);
 
     program
         .command('setup')