RFC: PWA Plugin

[yyx990803]

/cc @addyosmani @jeffposnick @sudo-suhas

So, I've been working pretty hard on the next version of vue-cli, which uses a completely plugin-based architecture, and the PWA functionalities are now fully isolated in its own module: https://github.com/vuejs/vue-cli/tree/next/packages/%40vue/cli-plugin-pwa

A brief intro for the plugin API: index.js is the runtime plugin that will be loaded when users run npm run serve or npm run build. generator contains a module that will be invoked when the user scaffolds the project with the global vue command. The API should be pretty explanatory, and seems to cover most use cases. But any feedback is greatly appreciated.

Our previous PWA template is a fork of the main webpack template and has trouble keeping up with the upstream changes. This new setup should greatly reduce the maintenance scope for PWA-related features in the future.

After the launch of vue-cli 3.0, we should deprecate the pwa template and move all collaborations under the plugin instead.

[sudo-suhas]

Hey @yyx990803, I wanted to test this out so I cloned the repo and tried to follow the steps in "Development Setup" from the readme but yarn link did not work correctly for me and the vue binary did not get installed globally. But I worked around that by doing this:

λ cd packages\test\

λ node ..\@vue\cli\bin\vue create test-app

However, after I manually selected the features, it failed to scaffold the project:

Vue CLI v3.0.0-alpha.1
✨  Creating project in E:\Projects\repos\vue-cli\packages\test\test-app.
🗃  Initializing git repository...
 ERROR  command failed: yarn add --dev @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-unit-jest @vue/cli-plugin-pwa @vue/cli-service
error An unexpected error occurred: "http://registry.npmjs.org/@vue%2fcli-plugin-babel: Not found".

What do I need to do to make this work?

Another question I had was, what about the documentation? Would each plugin have it's own documentation? Right now, the documentation for the PWA template is mostly similar to the webpack template but there is some additional documentation which touches upon things like service worker.

Is there anything else that you'd like me to help with?

Edit: Tests are failing as well.

yarn test output

λ yarn test -w 1
yarn run v1.3.2
$ jest --env node -w 1
 FAIL  packages\@vue\cli-service-global\__tests__\globalService.spec.js (18.137s)
  ● global serve

    expect(received).toMatch(expected)

    Expected value to match:
      "Updated"
    Received:
      "hi"

      51 |       await nextUpdate() // wait for child stdout update signal
      52 |       await sleep(1000) // give the client time to update
    > 53 |       expect(await helpers.getText('h1')).toMatch(`Updated`)
      54 |     }
      55 |   )
      56 | })

      at serve (packages/@vue/cli-service-global/__tests__/globalService.spec.js:53:43)


 RUNS  packages/@vue/cli-service/__tests__/serve.spec.js
 ERROR  Error: EPERM: operation not permitted, mkdir 'E:\Projects\repos\vue-cli\packages\test\e2e-serve'
 RUNS  ERROR  Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\e2e-serve-router\node_modules\.bin\vue-cli-service'
Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\e2e-serve-router\node_modules\.bin\vue-cli-service'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at setupDevProject (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\util\setupDevProject.js:24:6)
    at Creator.create (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\Creator.js:106:7)
    at <anonymous>
 FAIL  packages\@vue\cli-service\__tests__\serve.spec.js.js:188:7)
  ● serve

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create e2e-serve --force --config {"packageManager":"yarn","plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":"save"},"@vue/cli-plugin-unit-mocha-webpack":{"assertionLibrary":"chai"}},"router":false,"vuex":false}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)

  ● serve with router

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create e2e-serve-router --force --config {"packageManager":"yarn","plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":"save"},"@vue/cli-plugin-unit-mocha-webpack":{"assertionLibrary":"chai"}},"router":true,"vuex":false}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)


 RUNS  packages/@vue/cli-plugin-pwa/__tests__/pwa.spec.js
 ERROR  Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\pwa-build\node_modules\.bin\vue-cli-service'
Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\pwa-build\node_modules\.bin\vue-cli-service'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at setupDevProject (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\util\setupDevProject.js:24:6)
    at Creator.create (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\Creator.js:106:7)
 FAIL  packages\@vue\cli-plugin-pwa\__tests__\pwa.spec.js
  ● pwa

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create pwa-build --force --config {"packageManager":"yarn","plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":"save"},"@vue/cli-plugin-unit-mocha-webpack":{"assertionLibrary":"chai"},"@vue/cli-plugin-pwa":{}},"router":false,"vuex":false}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)


 RUNS  packages/@vue/cli-service/__tests__/build.spec.js
 FAIL  packages\@vue\cli-service\__tests__\build.spec.js\Projects\repos\vue-cli\packages\test\e2e-build'
  ● build

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create e2e-build --force --config {"packageManager":"yarn","plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":"save"},"@vue/cli-plugin-unit-mocha-webpack":{"assertionLibrary":"chai"}},"router":false,"vuex":false}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)


 RUNS  packages/@vue/cli-plugin-unit-mocha-webpack/__tests__/mochaPlugin.spec.js
 ERROR  Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\unit-mocha-webpack\node_modules\.bin\vue-cli-service'
Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\unit-mocha-webpack\node_modules\.bin\vue-cli-service'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at setupDevProject (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\util\setupDevProject.js:24:6)
    at Creator.create (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\Creator.js:106:7)
 FAIL  packages\@vue\cli-plugin-unit-mocha-webpack\__tests__\mochaPlugin.spec.js
  ● should work

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create unit-mocha-webpack --force --config {"packageManager":"yarn","useTaobaoRegistry":false,"plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-unit-mocha-webpack":{"assertionLibrary":"chai"}}}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)


 RUNS  packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js
 ERROR  Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\eslint\node_modules\.bin\vue-cli-service'
Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\eslint\node_modules\.bin\vue-cli-service'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at setupDevProject (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\util\setupDevProject.js:24:6)
    at Creator.create (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\Creator.js:106:7)
 FAIL  packages\@vue\cli-plugin-eslint\__tests__\eslintPlugin.spec.js
  ● should work

    Command failed: E:\Projects\repos\vue-cli\packages\@vue\cli\bin\vue create eslint --force --config {"packageManager":"yarn","useTaobaoRegistry":false,"plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"airbnb","lintOn":"commit"}}}

      at Promise.all.then.arr (node_modules/execa/index.js:236:11)

 PASS  packages\@vue\cli-service\__tests__\Service.spec.js
 PASS  packages\@vue\cli\__tests__\Generator.spec.js
 PASS  packages\@vue\cli\__tests__\Creator.spec.js
 PASS  packages\@vue\cli-plugin-eslint\__tests__\eslintGenerator.spec.js
 PASS  packages\@vue\cli\lib\promptModules\__tests__\unit.spec.js
 PASS  packages\@vue\cli\lib\promptModules\__tests__\eslint.spec.js
 PASS  packages\@vue\cli-plugin-unit-mocha-webpack\__tests__\mochaGenerator.spec.js
 PASS  packages\@vue\cli\lib\promptModules\__tests__\babel.spec.js
 PASS  packages\@vue\cli\__tests__\options.spec.js

Test Suites: 6 failed, 9 passed, 15 total
Tests:       7 failed, 46 passed, 53 total
Snapshots:   0 total
Time:        29.495s, estimated 49s
Ran all test suites.

[addyosmani]

I'm excited about this direction of encapsulating PWA functionality into a vue-cli plugin. I've handed maintainace of the PWA template to Jeff but am supportive of deprecating it in favor of the plugin once we can confirm feature parity.

Love the idea of no longer needing to keep in sync with the upstream changes to the webpack plugin. Thanks for looping us in, Evan. We'll take a look.

[addyosmani]

Similar to the comment above, instructions on running the plugin for scaffolding would be greatly appreciated. Currently seems to error out.

[yyx990803]

@sudo-suhas it seems to be Windows related.

• What error do you see from yarn link?

• The scaffolding error should be fixed in a300266, if it still has problems, try explicitly export VUE_CLI_DEBUG=true to your env before running vue create.

• Tests are failing because fs.symlinkSync failed due to EPERM. Not sure why this is happening - tests are passing on Appveyor though.

@addyosmani if you are on macOS it should work as intended, let me know if you are running into problems as well.

[yyx990803]

Re docs: we can have each plugin document itself in its README.md, and pull all the readmes together when building the docs into a single site.

[sudo-suhas]

Yes, it is related to Windows(it usually is 😉).

What error do you see from yarn link?

I actually do not see any errors:

λ yarn link
yarn link v1.3.2
warning There's already a module called "@vue/cli" registered.
Done in 0.41s.

λ yarn unlink
yarn unlink v1.3.2
success Unregistered "@vue/cli".
info You can now run `yarn unlink "@vue/cli"` in the projects where you no longer want to use this module.
Done in 0.35s.

λ yarn link
yarn link v1.3.2
success Registered "@vue/cli".
info You can now run `yarn link "@vue/cli"` in the projects where you want to use this module and it will be used instead.
Done in 0.33s.

I got an error when I tried this the first time because I had the stable version of vue-cli installed globally. But I have since removed that and as you can see above, I have tried unlink and link but that does not help.

The scaffolding error should be fixed in dc84b7e

Still faced the previous issue.

if it still has problems, try explicitly export VUE_CLI_DEBUG=true to your env before running vue create.

Tried this, but it fails due to symlinks.

Vue CLI v3.0.0-alpha.1 DEBUG
✨  Creating project in E:\Projects\repos\vue-cli\packages\test\test-app.
🗃  Initializing git repository...
 ERROR  Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\test-app\node_modules\.bin\vue-cli-service'
Error: EPERM: operation not permitted, symlink 'E:\Projects\repos\vue-cli\packages\@vue\cli-service\bin\vue-cli-service' -> 'E:\Projects\repos\vue-cli\packages\test\test-app\node_modules\.bin\vue-cli-service'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at setupDevProject (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\util\setupDevProject.js:24:6)
    at Creator.create (E:\Projects\repos\vue-cli\packages\@vue\cli\lib\Creator.js:106:7)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Regarding symlinks, I have a couple of questions

• This is only required for development right? If so, I saw some node issues(nodejs/node-v0.x-archive issues 2274, 6342) which suggest that running the terminal with admin privileges should it.
• Can lerna bootstrap help with this?
• Is there any way we can do this without using symlinks? I'd prefer to not use admin privileges if possible. In my experience, this tends to cause unexpected problems.

[yyx990803]

@sudo-suhas so turns out you need to specify type to be 'junction' when using fs.symlink on windows. Figured this out by reading npm/yarn's source code... Let me know if 071beec fixes it for you.

[jeffposnick]

That sounds like a solid plan, @yyx990803. And thanks for continuing to work on this, @sudo-suhas—I'm happy to follow your lead if you're able to get the initial port working. Do you have your experimental code pushed anywhere public right now?

One of the improvements that I'm interested in making with the PWA template is switching over from SWPrecacheWebplackPlugin to the workbox-webpack-pliugin library. And then there are some preload-webpack-plugin improvements, starting with GoogleChromeLabs/preload-webpack-plugin#51, to make as well.

[yyx990803]

@jeffposnick switching the plugin should be dead simple, just swap out this part as long as it generates the same /service-worker.js file.

As for preload plugin - I have it included in the base setup by default now with a forked version here. When my change for include: 'initial'is merged or you guys publish 3.0 I can switch over.

[sudo-suhas]

@yyx990803 I managed to advance a few steps after the recent bug fixes you made. However, the scaffolding now fails in the lint step. Here's the debug logs - vue-create-app.debug.txt

I tried running the lint script in the test-app but that too failed:

λ yarn lint
yarn run v1.3.2
$ vue-cli-service lint
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.

thanks for continuing to work on this, @sudo-suhas

It's pretty awesome that I get to collaborate with the people I admire and look up to. So it's a win-win 😄.

Do you have your experimental code pushed anywhere public right now?

Right now, the packages the test-app depends on aren't published and they are instead supposed to work via symlinks to binaries in the monorepo. I have published the app which I just created here - sudo-suhas/vue-pwa-next. But this will mostly be just a read-only repo.

[yyx990803]

@sudo-suhas that error log is again quite weird... it seems you don't have register-service-worker and @vue/test-utils installed locally, possibly due to an outdated lockfile... try run yarn clean and then yarn again and make sure both of these deps are found in yarn.lock.

[sudo-suhas]

try run yarn clean and then yarn again

My apologies, was able to create the app without errors after this. But the symlink isn't working correctly:

λ yarn serve
yarn run v1.3.2
$ vue-cli-service serve
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.

I'll try to look into this since it will be hard to debug without a Windows machine.