DEV Community

Modern WebApps - Infrastructure: Vue, Parcel & Workbox

Thomas Sarmis on April 17, 2019

Single Page Applications (SPA) are web applications that are contained in a single web page, providing a seamless navigation experience due to not ...

Read full post

Corey Johnson • Apr 18 '19 • Edited

Great post! Can't wait to try it out

Edit: I tried running your sample but get an error..

sh: start: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! greekdev-template-vue-spa@1.0.0 dev: `start parcel src/web/index.html --no-hmr --out-dir ./dist/web`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the greekdev-template-vue-spa@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Thomas Sarmis • Apr 19 '19 • Edited

Oups. I will push a fix tomorrow, but you can fix it locally by removing the start command from the dev script in package.json

Correct is

"scripts": {
    "dev": "parcel src/web/index.html --no-hmr --out-dir ./dist/web"
},

Corey Johnson • Apr 19 '19

Thanks!

Thomas Sarmis • Apr 19 '19

I upload the fix and editited my previous reply... thank you for your patience

Filipe Martins • Apr 18 '19

cli.vuejs.org

Thomas Sarmis • Apr 18 '19

Yes it's a great tool, and perhaps it automates all this, but I think that by linking all the parts manually you gain some insight in the process

hksduhksdu • Apr 17 '19

Thank you for the tutorial. For the workbox script, when you have "+/", why do you still need the first two "/$" and "/"?

Thomas Sarmis • Apr 18 '19

You are correct, they are redundant, but I decided to leave them there as place holders for when the /+ gets moved to another policy or gets broken down to more detailed routes by anyone who will use this example