feat(server): support app init command

Author: eliranmal

README.md

@@ -19,10 +19,13 @@ once started, the server will listen to changes in the app template source files
 when a change is detected, it will re-compile the template to an output directory, allowing live inspection of the 
 generated vue.js application.
 
+after the output project is generated, if it's an NPM project, the server will collect its dependencies with `npm i`,
+and run `npm run dev` (you can customize which command will run instead of `dev`).
+
 
 ## setup
 
-- install via npm:
+- install via NPM:
 
   ```sh
   npm i vue-cli-template-dev-server -D
@@ -76,6 +79,12 @@ npm run dev -- 'dist/dev-server-out' 'my-app'
 }
 ```
 
+you can also change which NPM script will run on startup (`dev` by default), by passing the
+`TARGET_INIT_COMMAND` environment variable:
+
+```sh
+env TARGET_INIT_COMMAND='serve' npm run dev -- 'dist/dev-server-out' 'my-app'
+```
 
 
 ## demo

bin/server.sh

@@ -6,7 +6,7 @@ function usage {
 usage
 -----
 
-  [env TEMPLATE_PROJECT_DIR="$(npm prefix)"] vue-cli-template-dev-server.sh [<output_dir>] [<output_project_name>] [-h]
+  [env SOURCE_DIR="$(npm prefix)" TARGET_INIT_COMMAND="dev"] vue-cli-template-dev-server.sh [-h] [<target-dir>] [<project-name>]
 
  ''
 '
@@ -17,34 +17,50 @@ function info {
 overview
 --------
 
-  watch source files of a vue.js custom template project, and triggers the vue-cli init to rebuild the project.
+  watches source files of a vue-cli custom template project, and triggers the vue-cli init command to rebuild the project.
   to be used while developing custom templates.
 
 
-environment
------------
+flags
+-----
 
-  TEMPLATE_PROJECT_DIR
-    the local path of the vue-init custom template project to watch.
-    defaults to "$(npm prefix)".
+  -h
+    shows this help page, and quits.
 
 
-arguments
----------
+operands
+--------
 
-  output_dir
-    a local path of the desired directory to pour the generated project into.
+  target-dir
+    a path, relative to the custom template project root, of a directory to pour the generated files into.
     the generated project will be created as a child directory of that path.
-    defaults to "${TEMPLATE_PROJECT_DIR}/out".
+    defaults to "${SOURCE_DIR}/out".
 
-  output_project_name
-    a name for the directory of the project that will be generated by vue init.
+  project-name
+    a name for the generated project directory, which will be nested inside the target directory.
     defaults to "awesome-vue-app".
 
+
+environment
+-----------
+
+  SOURCE_DIR
+    the local path of the custom template project to watch.
+    defaults to "$(npm prefix)" (the host NPM project).
+
+  TARGET_INIT_COMMAND
+    the name of an NPM script command in the output project, to be run once it is generated, right after installing its dependencies.
+    defaults to "dev".
+
  ''
 '
 }
 
+# todo - make this phase 2!
+#echo '----------------------'
+#echo "${npm_package_config_initCommand:-dev}"
+#echo '----------------------'
+
 function main {
 	if [[ "$@" =~ '-h' ]]; then
 		info
@@ -59,34 +75,41 @@ function main {
 function start {
 	local temp_dir
 	local expect_file
-	local output_dir="${1:-${TEMPLATE_PROJECT_DIR}/out}"
-	local output_project_name="${2:-awesome-vue-app}"
+	# todo - is this default working properly in all cases? test it
+	local target_dir="${1:-${SOURCE_DIR}/out}"
+	local target_project_name="${2:-awesome-vue-app}"
 
-	output_dir="$(abs_path "$output_dir")"
+	target_dir="$(abs_path "$target_dir")"
 	temp_dir="$(create_temp_dir)"
 	expect_file="${temp_dir}/vue-init.exp"
 
 	set_traps "$temp_dir"
 
+	# todo - cleanup output dir before everything
+
 	log 'hi :)'
 
 	log 'starting vue init survey...'
-	start_auto_survey ${output_dir} ${expect_file} ${TEMPLATE_PROJECT_DIR} "${output_project_name}"
-	log 'project generated using provided answers'
-	log 'waiting for changes...'
+	start_auto_survey ${target_dir} ${expect_file} ${SOURCE_DIR} "${target_project_name}"
+	log 'output project generated using provided answers'
+	log 'initializing output project...'
+    initialize_target_project ${target_dir}/${target_project_name} "$TARGET_INIT_COMMAND"
+    log 'output project initialized'
 
-	fswatch -o "${TEMPLATE_PROJECT_DIR}/template" | while read num; do
+	log 'waiting for changes...'
+	fswatch -o "${SOURCE_DIR}/template" | while read num; do
 		log 'change detected'
 		log 'auto-generating output project...'
-		start_survey ${output_dir} ${expect_file}
-		log 'project regenerated using initial answers'
+		start_survey ${target_dir} ${expect_file}
+		log 'output project regenerated using initial answers'
 		log 'waiting for changes...'
 	done
 }
 
 function setup_environment {
-	validate_template_project_dir
-	ensure_template_project_dir
+	validate_source_dir
+	ensure_source_dir
+	ensure_target_init_command
 }
 
 function ensure_dependencies {
@@ -97,15 +120,15 @@ function ensure_dependencies {
 function start_auto_survey {
 	local work_dir="$1"
 	local expect_file="$2"
-	local template_project_dir="$3"
-	local output_project_name="$4"
+	local source_dir="$3"
+	local target_project_name="$4"
 
 	# create a directory to force vue-init to ask about overwriting the directory on the first time
-	ensure_dir "${work_dir}/$output_project_name"
+	ensure_dir "${work_dir}/$target_project_name"
 
 	pushd ${work_dir} >/dev/null 2>&1
 	# this will generate an expect file, all filled with answers to the vue-init survey questions
-	autoexpect -quiet -f ${expect_file} vue init ${template_project_dir} "${output_project_name}"
+	autoexpect -quiet -f ${expect_file} vue init ${source_dir} "${target_project_name}"
 	popd >/dev/null 2>&1
 
 	search_line ${expect_file} 'expect -exact.*'
@@ -121,6 +144,31 @@ function start_auto_survey {
 	chmod u+x ${expect_file}
 }
 
+function initialize_target_project {
+	local project_dir="$1"
+	local init_command="$2"
+
+	if is_npm_repo "$project_dir"; then
+		pushd ${project_dir} >/dev/null 2>&1
+
+		# install dependencies
+		npm i >/dev/null 2>&1
+		if (( $? == 1 )); then
+			quit "failed installing the output project's npm dependencies"
+		fi
+
+		# launch dev server / whatever
+		if is_npm_command_available "$init_command"; then
+			npm run "$init_command" >/dev/null 2>&1
+			if (( $? == 1 )); then
+				quit "the output project's initialize command execution failed"
+			fi
+		fi
+
+		popd >/dev/null 2>&1
+	fi
+}
+
 function start_survey {
 	local work_dir="$1"
 	local expect_file="$2"
@@ -130,30 +178,32 @@ function start_survey {
 	popd >/dev/null 2>&1
 }
 
-function validate_template_project_dir {
-	if [[ -n "$TEMPLATE_PROJECT_DIR" ]]; then
-		if [[ ! -d "$TEMPLATE_PROJECT_DIR" ]]; then
-			quit '$TEMPLATE_PROJECT_DIR is not a directory'
+function validate_source_dir {
+	if [[ -n "$SOURCE_DIR" ]]; then
+		if [[ ! -d "$SOURCE_DIR" ]]; then
+			quit '$SOURCE_DIR is not a directory'
 		fi
-		if ! is_npm_repo "${TEMPLATE_PROJECT_DIR}"; then
-			quit '$TEMPLATE_PROJECT_DIR is not an npm project'
+		if ! is_npm_repo "${SOURCE_DIR}"; then
+			quit '$SOURCE_DIR is not an npm project'
 		fi
 	else
-		# we know that npm_host_path will be the default value in case
-		# $TEMPLATE_PROJECT_DIR is empty.
+		# we know that npm_host_path will be the default value in case $SOURCE_DIR is empty.
 		if [[ -z "$(npm_host_path)" ]]; then
 			quit 'could not resolve npm host'
 		fi
 	fi
 }
 
-function ensure_template_project_dir {
-	TEMPLATE_PROJECT_DIR="${TEMPLATE_PROJECT_DIR:-$(npm_host_path)}"
-	TEMPLATE_PROJECT_DIR="${TEMPLATE_PROJECT_DIR:+$(abs_path "$TEMPLATE_PROJECT_DIR")}"
+function ensure_source_dir {
+	SOURCE_DIR="${SOURCE_DIR:-$(npm_host_path)}"
+	SOURCE_DIR="${SOURCE_DIR:+$(abs_path "$SOURCE_DIR")}"
+}
+
+function ensure_target_init_command {
+	TARGET_INIT_COMMAND="${TARGET_INIT_COMMAND:-dev}"
 }
 
 function npm_host_path {
-	local path
 	local npm_prefix="$(npm prefix)"
 	if is_npm_repo "$npm_prefix"; then
 		printf "%s" "$npm_prefix"
@@ -164,11 +214,12 @@ function npm_host_path {
 
 function is_npm_repo {
 	local dir="$1"
-	if [[ -f "${dir}/package.json" ]]; then
-		return 0
-	else
-		return 1
-	fi
+	is_file "${dir}/package.json"
+}
+
+function is_npm_command_available {
+	local cmd="$1"
+	[[ -n "$cmd" && -n "$(npm run --parseable | grep '^'"$cmd"':')" ]]
 }
 
 function abs_path {
@@ -177,12 +228,22 @@ function abs_path {
 }
 
 function ensure_dir {
-	local dir="$1"
-	if [[ ! -d "$dir" ]]; then
-		mkdir -p "$dir"
+	local path="$1"
+	if ! is_dir "$path"; then
+		mkdir -p "$path"
 	fi
 }
 
+function is_file {
+	local path="$1"
+	[[ -n "$path" && -f "$path" ]]
+}
+
+function is_dir {
+	local path="$1"
+	[[ -n "$path" && -d "$path" ]]
+}
+
 function remove_dir {
 	rm -rf "$@" >/dev/null 2>&1
 }