docs(cli-ui): add more notes for local development #2281
Conversation
packages/@vue/cli-ui/README.md
Outdated
| Then you should start a local Apollo server: | ||
|
|
||
| ``` | ||
| yarn run apollo |
There was a problem hiding this comment.
This needs to be run in the cli-ui folder (not cli-ui-addon-webpack).
There was a problem hiding this comment.
I though cd - in the previous code block (like it's done in https://github.com/vuejs/vue-cli/blob/dev/.github/CONTRIBUTING.md) was enough. 🤔
Anyway I'm gonna change it to be more clear
packages/@vue/cli-ui/README.md
Outdated
| cd - | ||
| ``` | ||
|
|
||
| Then you should start a local Apollo server: |
There was a problem hiding this comment.
start the ui server (based on Apollo)
packages/@vue/cli-ui/README.md
Outdated
| yarn run apollo | ||
| ``` | ||
|
|
||
| And then in another terminal, you should serve cli-ui: |
packages/@vue/cli-ui/README.md
Outdated
| Just after, you should build `@vue/cli-ui-addon-webpack` by running: | ||
| ```bash | ||
| cd ../cli-ui-addon-webpack | ||
| yarn build |
There was a problem hiding this comment.
Instead: run yarn serve in a 3rd terminal.
There was a problem hiding this comment.
Hum, I think I will revert to yarn build. Using yarn serve give me this error during g4-tasks spec:
Error: Cannot find module '@vue/cli-ui-addon-webpack/dist'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
at Function.resolve (internal/modules/cjs/helpers.js:18:19)
at serve (/home/kocal/Dev/vue-cli/packages/@vue/cli-ui/apollo-server/connectors/client-addons.js:56:34)
at Layer.handle [as handle_request] (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:317:13)
at /home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:284:7
at param (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:354:14)
at param (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:365:14)
at param (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/home/kocal/Dev/vue-cli/node_modules/express/lib/router/index.js:410:3)
There was a problem hiding this comment.
For the tests you need to build the webpack addon at least once.
There was a problem hiding this comment.
So what's the point for using yarn serve since it doesn't output anything in dist folder?
Or am I missing something? 🤔
There was a problem hiding this comment.
It's serving the hot-reloaded webpack dashboard components on localhost which are then loaded in the UI when run in dev mode.
packages/@vue/cli-ui/README.md
Outdated
| yarn run test:e2e | ||
| ``` | ||
|
|
||
| Then in another terminal: |
There was a problem hiding this comment.
yarn run test:e2e should be enough. It both starts the apollo server and the vue-cli e2e service (yarn run test:e2e:dev).
There was a problem hiding this comment.
It seems not.
When running yarn run test:e2e alone, it just starts an Apollo server and waits (and nothing happens).
I have to run both command yarn run test:e2e and yarn run test:e2e:dev in order to run tests (and make them work).
Maybe this is a bug?
There was a problem hiding this comment.
Make sure http://localhost:4040 works. It should start test:e2e:dev script as soon as http://localhost:4040 responds.
There was a problem hiding this comment.
Yep it works, it show me a GraphQL Playground webapp.
This is my output:
➜ cli-ui git:(chore/docs-cli-ui) yarn run test:e2e
yarn run v1.7.0
$ yarn run test:clear && start-server-and-test apollo:run:test http://localhost:4040 test:e2e:dev
$ rimraf ../../test/cli-ui-test && rimraf ./live-test
starting server using command "npm run apollo:run:test"
and when url "http://localhost:4040" is responding
running tests using command "test:e2e:dev"
> @vue/cli-ui@3.0.1 apollo:run:test /home/kocal/Dev/vue-cli/packages/@vue/cli-ui
> cross-env VUE_CLI_UI_TEST=true VUE_APP_GRAPHQL_PORT=4040 VUE_APP_CLI_UI_URL=ws://localhost:4040/graphql VUE_CLI_IPC=vue-cli-test vue-cli-service apollo:watch
$ cross-env VUE_CLI_DEBUG=true VUE_CLI_IPC=vue-cli-dev vue-cli-service apollo:run --delay
✔️ GraphQL Server is running on http://localhost:4040/graphql
There was a problem hiding this comment.
So there is something strange here
There was a problem hiding this comment.
I'm gonna open a new issue and apply your changes
3b4ca4e to
50f6267
Compare
50f6267 to
9cbb436
Compare
This should improve actual README with more user-friendly notes for starting local development and explaining how to run tests in local aswell.