Allow passing non interactive options

[italomaia]

It would be quite nice if it was possible to pass the prompt responses from the command line. This way, it would be possible to create a new vue project in a non-interactive way, which is quite convenient for templates that use vue-cli as part of it.

[posva]

Why do you use vue-cli inside of a template?

[italomaia]

I have a project recipe where vue-cli is used to build the frontend, so, I kind of would like to create the vue project in a non-interactive fashion. My project structure:

project
- app (backend; provides the api)
- ux (vue project)
- web (nginx setup)
other_files

[posva]

I think that's not the goal of vue-cli. vue-cli is meant to scaffold the whole project. Is there a reason you cannot scaffold the whole project with it?

[italomaia]

Vue Cli would still scaffold. It would just make it possible to do so in a non-interactive way.
Well, I could use vue-cli as the base, but that would probably mean a LOT of work. Not the plan, right now.

[Joshfindit]

Looking for this especially to build docker images where the templates and dependencies are cached.
docker-compose build needs to run non-interactively to make this work.

[shailendher]

I had a look at this issue and unfortunately 'commander.js' does not support arbitrary/dynamic options. Hence running a command like the one below is not possible (commander.js#609).
'vue init webpack my-sample-project --build runtime-only --lint standard'

possible solutions:

1. switch from 'commander' to another package like 'yargs' or 'omlette' (similar to raml2html#331)
2. provide options as a config file like vue init webpack my-sample-project --run-with-config default-config.json. Then we can skip the questions for which the values are already available.

If we could agree on the approach, I could give it a shot and submit a PR.

[italomaia]

'yargs' seems like a safe bet.

[wdmtech]

I was thinking this myself 🤔 to test my template, I run vue init wdmtech/webpack && yarn install && npm run dev and then I have to hit return until the project is scaffolded. I was looking for a:

vue init xxx/xxx . -y (non-interactive) option

if it exists, (or a better damn way of testing my template!) 😂

[sobolevn]

In the meanwhile you can still use old-good expect to generate your project (for tests as an example):

#!/usr/bin/env expect
set timeout 360

spawn ./node_modules/.bin/vue init . test-project

# This happens because of
# https://github.com/vuejs/vue-cli/issues/291
expect "Project name" { send "\n" }
expect "Project description" { send "\n" }
expect "Project URL" { send "\n" }
expect "Organization" { send "\n" }
expect "vue-cli · Generated" { send "\n" }

[Harti]

@sobolevn how would I use this within a Dockerfile?

[sobolevn]

@Harti you need to make sure that spawn is installed. Other things should not change.
See: https://github.com/wemake-services/wemake-vue-template/blob/master/tests/test.sh

[Harti]

@sobolevn Appreciate your input, it doesn't truly help me though.

Dockerfile:

FROM node:9-stretch

RUN apt-get update && apt-get install -y expect

# install vue-cli for easy template generation: https://vuejs-templates.github.io/webpack/
RUN npm install -g vue-cli

# init app template
WORKDIR /usr/local/
COPY ./vue-cli-interaction.exp /usr/local/vue-cli-interaction.exp
RUN ls -la
CMD ["vue-cli-interaction.exp"]
WORKDIR /usr/local/app
RUN ls -la
RUN npm install && npm dedupe

EXPOSE 3000

ENTRYPOINT /opt/entrypoint.sh

vue-cli-interaction.exp: (note: quotes or not after spawn command did NOT matter)

#!/usr/bin/expect
set timeout 360

spawn "vue init webpack app"

expect "Project name" { send "\n" }
expect "Project description" { send "\n" }
expect "Project URL" { send "\n" }
expect "Organization" { send "\n" }
expect "vue-cli · Generated" { send "\n" }

interact

Output:

Step 1/12 : FROM node:9-stretch
 ---> e6d883010309
Step 2/12 : RUN apt-get update && apt-get install -y expect
 ---> Using cache
 ---> 6a9f21ffc293
Step 3/12 : RUN npm install -g vue-cli
 ---> Using cache
 ---> 3a676a09bcc0
Step 4/12 : WORKDIR /usr/local/
 ---> Using cache
 ---> 425c34c23456
Step 5/12 : COPY ./vue-cli-interaction.exp /usr/local/vue-cli-interaction.exp
 ---> 3487cc6a6dfb
Step 6/12 : RUN ls -la
 ---> Running in be3fc18f5304
total 196
drwxrwsr-x 1 root staff  4096 May  2 16:46 .
drwxr-xr-x 1 root root   4096 Mar 12 00:00 ..
-rw-rw-r-- 1 root staff 54051 Apr  5 04:48 CHANGELOG.md
-rw-rw-r-- 1 root staff 62033 Apr  5 04:48 LICENSE
-rw-rw-r-- 1 root staff 27805 Apr  5 04:48 README.md
drwxrwxr-x 1 root staff  4096 May  2 16:38 bin
drwxrwsr-x 2 root staff  4096 Mar 12 00:00 etc
drwxrwsr-x 2 root staff  4096 Mar 12 00:00 games
drwxrwxr-x 1 root staff  4096 Apr  5 04:48 include
drwxrwxr-x 1 root staff  4096 Apr  5 04:48 lib
lrwxrwxrwx 1 root staff     9 Mar 12 00:00 man -> share/man
drwxrwsr-x 2 root staff  4096 Mar 12 00:00 sbin
drwxrwxr-x 1 root staff  4096 Apr  5 04:48 share
drwxrwsr-x 2 root staff  4096 Mar 12 00:00 src
-rwxr-xr-x 1 root root    279 May  2 16:45 vue-cli-interaction.exp
Removing intermediate container be3fc18f5304
 ---> 6273226b513b
Step 7/12 : CMD ["vue-cli-interaction.exp"]
 ---> Running in fd431986eb48
Removing intermediate container fd431986eb48
 ---> a7fe50fb56d4
Step 8/12 : WORKDIR /usr/local/app
Removing intermediate container 33c224469b5c
 ---> 972899a7b86c
Step 9/12 : RUN ls -la
 ---> Running in 8aa498a0bd21
total 8
drwxr-sr-x 2 root staff 4096 May  2 16:38 .
drwxrwsr-x 1 root staff 4096 May  2 16:46 ..

Removing intermediate container 339bf7bd3b6e
 ---> 96c48d961913
Step 10/12 : RUN npm install && npm dedupe
 ---> Running in 572dc3a12384
npm WARN saveError ENOENT: no such file or directory, open '/usr/local/app/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/usr/local/app/package.json'
npm WARN app No description
npm WARN app No repository field.
npm WARN app No README data
npm WARN app No license field.

up to date in 0.074s
npm WARN saveError ENOENT: no such file or directory, open '/usr/local/app/package.json'
up to date in 0.06s
Removing intermediate container 572dc3a12384
 ---> 890a6a9aaeac
Step 11/12 : EXPOSE 3000
 ---> Running in e3067e5f929c
Removing intermediate container e3067e5f929c
 ---> 8c453b4af193
Step 12/12 : ENTRYPOINT /opt/entrypoint.sh
 ---> Running in 8a663396591f
Removing intermediate container 8a663396591f
 ---> aa9ee2f8a8d8

Successfully built aa9ee2f8a8d8

There is nothing created and I don't know how to debug this.
Why would it be impossible to add a -y flag to this again?

[paul-hammant]

Some vue-init usages spit out ANSI color codes too. I'm not able to get unix's expect to work with it, not even if I remove ANSI color codes using tr. I'm lost. I've spend 20 years automating things, but Im going to advise my devs to do a once-off manual invocation of vue init because it will not work without STDIN usage. For want of a simple -y option to avoid hours and hours of work....

[jukefr]

making my expect script a bit more patient made it work
by that I mean that I wait for informative stuff like "downloading template" or the generation successful message and simply respond a new line, this seems to work

#!/usr/bin/expect
set timeout 10

spawn vue init nuxt-community/starter-template .

expect "Generate project in current directory?"
send "y\r"
expect "downloading template"
send "\r"
expect "Project name"
send "client\r"
expect "Project description"
send "demo\r"
expect "Author"
send "robot\r"
expect "Generated"
send "\r"

interact

[paul-hammant]

@jukefr - your execution environment doen't have ANSI colors turned on, does it.. ?

[jukefr]

Actually I do have colours in my output, haven't done anything settings wise to achieve this though. What you can try is simply expect the parts without colours as expect will only loosely wait for a match, simply omit the weird parts.

[paul-hammant]

Cool. It might be possible to write something with http://pexpect.readthedocs.io in order to wholly deliver the ask of #291.

[Harti]

Using @vue/cli 3.0+, I think we can put the pitchforks away now:

A Vue CLI preset is a JSON object that contains pre-defined options and plugins for creating a new project so that the user don't have to go through the prompts to select them.

https://cli.vuejs.org/guide/plugins-and-presets.html#presets

[jukefr]

I saw that v3 has this option, however from what I saw it is 100% incompatible with v2 templates, and nobody has converted their templates yet obviously so this is pretty much useless for me as of yet.

[Akryum]

Nobody will convert their template because there is no template system anymore. On the other hand, the new system is plugin-based and we have a rapidly growing list of community plugins plus all the built-in plugins like pwa or typescript.

[jukefr]

Alright, thank you for taking some time to answer.
I will look into the available plugins.

[gabrielstuff]

#!/usr/bin/expect set timeout 10 spawn vue init nuxt-community/starter-template . expect "Generate project in current directory?" send "y\r" expect "downloading template" send "\r" expect "Project name" send "client\r" expect "Project description" send "demo\r" expect "Author" send "robot\r" expect "Generated" send "\r" interact

Thanks a lot @jukefr expect works very nicely.

[eliranmal]

for anyone interested in this, i have put together some of the proposals here into a single script, that can be run as an NPM script.

here is the repository, see the readme setup section for a quick start.

💜

---

---

@Joshfindit @italomaia @shailendher @wdmtech @sobolevn @Harti @paul-hammant @jukefr @gabrielstuff