feat: add console output

Author: b-x-wu

.gitignore

@@ -0,0 +1 @@
+node_modules/

bin/index.js

@@ -5,8 +5,12 @@
 const fs = require('fs').promises;
 const path = require('node:path')
 const util = require('util')
-const exec = util.promisify(require('child_process').exec)
+const loadingSpinner = require('loading-spinner')
+const { spawn } = require('node:child_process')
+
 const fsOptions = { encoding: 'utf-8' }
+const spinnerOptions = { clearChar: true, hideCursor: true }
+const SPINNER_SPEED = 400
 
 if (process.argv.length < 3) {
     console.error('Please speicify the project directory')
@@ -20,28 +24,63 @@ fs.mkdir(sandboxDirectory).then(() => Promise.all([
     // create the sandbox structure
     fs.mkdir(path.join(sandboxDirectory, 'src')),
     fs.mkdir(path.join(sandboxDirectory, 'public'))
-])).then(() => Promise.all([
+])).then(() => {
     // get the contents of the files to be put into the sandbox
-    fs.readFile(path.join(__dirname, './static/.babelrc'), fsOptions),
-    fs.readFile(path.join(__dirname, './static/index.html'), fsOptions),
-    fs.readFile(path.join(__dirname, './static/index.jsx'), fsOptions),
-    fs.readFile(path.join(__dirname, './static/webpack.config.js'), fsOptions),
-    fs.readFile(path.join(__dirname, './static/package.json'), fsOptions)
-])).then((fileTexts) => {
+    process.stdout.write('Retrieving sandbox configuration ')
+    loadingSpinner.start(SPINNER_SPEED, spinnerOptions)
+    return Promise.all([
+        fs.readFile(path.join(__dirname, './static/.babelrc'), fsOptions),
+        fs.readFile(path.join(__dirname, './static/index.html'), fsOptions),
+        fs.readFile(path.join(__dirname, './static/index.jsx'), fsOptions),
+        fs.readFile(path.join(__dirname, './static/webpack.config.js'), fsOptions),
+        fs.readFile(path.join(__dirname, './static/package.json'), fsOptions)
+    ])
+}).then((fileTexts) => {
     // create the files in the sandbox
     const [babelrcText, indexHtmlText, indexJsxText, webpackConfigText, packageJsonText] = fileTexts
     const packageOptions = JSON.parse(packageJsonText)
     packageOptions.name = sandboxDirectory
 
+    loadingSpinner.stop()
+    process.stdout.write('\rRetrieved sandbox configuration!\n')
+    process.stdout.write('Initializing the sandbox ')
+    loadingSpinner.start(SPINNER_SPEED, spinnerOptions)
+
     return Promise.all([
         fs.writeFile(path.join(sandboxDirectory, './.babelrc'), babelrcText),
         fs.writeFile(path.join(sandboxDirectory, './public/index.html'), indexHtmlText),
         fs.writeFile(path.join(sandboxDirectory, './src/index.jsx'), indexJsxText),
         fs.writeFile(path.join(sandboxDirectory, './webpack.config.js'), webpackConfigText),
         fs.writeFile(path.join(sandboxDirectory, './package.json'), JSON.stringify(packageOptions, null, 4))
     ])
-}).then(() => exec(`cd ${sandboxDirectory} && npm install`)).then(() => { // initialize the project
-    console.log(`React sandbox is set up. Run \`cd ${sandboxDirectory} && npm start\` to begin.`)
+}).then(() => {
+    // install the package dependencies
+    loadingSpinner.stop()
+    process.stdout.write('\rInitialized the sandbox!\n')
+    process.stdout.write('Installing dependencies ')
+    loadingSpinner.start(SPINNER_SPEED, spinnerOptions)
+
+    // https://stackoverflow.com/a/43285131
+    const npmCommand = /^win/.test(process.platform) ? 'npm.cmd' : 'npm'
+    const npmInit = spawn(npmCommand, ['install'], {
+        cwd: './' + sandboxDirectory
+    })
+
+    npmInit.stdout.on('data', (data) => {
+        loadingSpinner.stop()
+        process.stdout.write('\rInstalled dependencies!\n')
+        process.stdout.write(data.toString())
+    })
+
+    npmInit.stderr.on('data', (data) => {
+        loadingSpinner.stop()
+        process.stdout.write('\rError installing dependencies!\n')
+        process.stdout.write(data.toString())
+    })
+
+    npmInit.on('exit', (code) => {
+        console.log(`React sandbox is set up. Run \`cd ${sandboxDirectory} && npm start\` to begin. Happy hacking!`)
+    })
 }).catch((err) => {
     console.log(err)
 })

package-lock.json

@@ -1,12 +1,20 @@
 {
   "name": "create-react-sandbox",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Create a lightweight React sandbox on your local system that runs like Create React App but without all the dependencies.",
   "author": "Bruce Wu <[email protected]>",
   "license": "ISC",
   "bin": {
     "create-react-sandbox": "bin/index.js"
   },
-  "keywords": ["react", "create-react-app", "sandbox", "boilerplate"],
-  "homepage": "https://github.com/bruce-x-wu/create-react-sandbox"
+  "keywords": [
+    "react",
+    "create-react-app",
+    "sandbox",
+    "boilerplate"
+  ],
+  "homepage": "https://github.com/bruce-x-wu/create-react-sandbox",
+  "dependencies": {
+    "loading-spinner": "^1.2.1"
+  }
 }