Merge pull request #6 from eliranmal/feature/output-app-dev

Feature/output app dev

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,30 +17,41 @@ 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".
+
  ''
 '
 }
@@ -59,10 +70,13 @@ 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}"
+	local target_dir="${1:-${SOURCE_DIR}/out}"
+	local target_project_name="${2:-awesome-vue-app}"
+
+	# we have to ensure the directory exists first, as abs_path() will fail on non-existing directories
+	ensure_dir "$target_dir"
 
-	output_dir="$(abs_path "$output_dir")"
+	target_dir="$(abs_path "$target_dir")"
 	temp_dir="$(create_temp_dir)"
 	expect_file="${temp_dir}/vue-init.exp"
 
@@ -71,22 +85,26 @@ function start {
 	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,16 +115,17 @@ 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}"
-	popd >/dev/null 2>&1
+	(
+		cd ${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 ${source_dir} "${target_project_name}"
+	)
 
 	search_line ${expect_file} 'expect -exact.*'
 	if (( $? == 1 )); then
@@ -121,39 +140,69 @@ 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
+		return 0
+	fi
+
+	(
+		cd ${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
+	)
+}
+
 function start_survey {
 	local work_dir="$1"
 	local expect_file="$2"
 
-	pushd ${work_dir} >/dev/null 2>&1
-	${expect_file} >/dev/null 2>&1
-	popd >/dev/null 2>&1
+	(
+		cd ${work_dir} >/dev/null 2>&1
+		${expect_file} >/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,25 +213,44 @@ 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 {
 	local path="$1"
+	if ! path_exist "$path"; then
+		return 1
+	fi
 	printf "%s" "$(cd "$(dirname "$path")"; pwd)/$(basename "$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 path_exist {
+	local path="$1"
+	[[ -n "$path" && -e "$path" ]]
+}
+
 function remove_dir {
 	rm -rf "$@" >/dev/null 2>&1
 }

example/template/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "awesome-vue-app",
+  "version": "1.0.0",
+  "description": "example project for vue-cli-template-dev-server",
+  "private": true,
+  "author": "Eliran Malka",
+  "scripts": {
+    "dev": "echo 'running awesome-vue-app dev server...' & wait"
+  }
+}