Discussion on: Deploy nuxt on Firebase

View post

Great article, it really helped out a lot! But, I still had some issues

The Story

The one issue I had was with writing the scripts. Im using a mac and didn't have access to the rimraf command. I was able to write scripts just using the the rm -rf command as a substitute. However I ran into an issue when trying to run the fallowing command...

"clean:public": "rm -rf \"public/**/*!(.md)\""

Sidenote

The command should work fine if you are using git bash and run it in your terminal after enabeling extended globing and remove the escaped double quotations. The commands to do that are as fallows...

Enable

shopt -s extglob

Disabled

shopt -u extglob

This lead me on a journey to discover a little bit of information that to most is probably well known and obvious, and that is that the npm run scripts don't use the users shell. In other words if I wanted to use the extended globing feature in my scripts I would need to install additional node packages like the rimraf node package. Furthermore, using the rimraf package is apparently faster then rm -rf and is more cross platform compatible.

Take Away

I learned a few important things from trying to fallow this article. For clarity I think the article would benefit from having them included even if they seem obvious.

What the rimraf command is and that it's essentially the same as rm -rf and allows for a work around to the rm -rf with pattern matching in node scripts issue.
How to install rimraf in your dev dependencies or globally so you can use it in your npm scripts. Or at least list it somewhere as a dependency for using the scripts as they are written.

Granted most of these issues are from the view point of someone using a macOS or git bash. However, I'm assuming writing scripts on a windows computer has similar issues if you try to avoid using the packages like rimraf. I just think it would be a good thing to mention what the package is and how to use them because chances are someone like myself wont know about the package.

Scripts if using npm on macOS.

This should be fairly obvious but all you need to do is replace yarn with npm run...

"scripts": {
    // ...
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",
    "clean": "npm run clean:public && npm run clean:functions && npm run clean:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",
    "copy": "npm run copy:nuxt && npm run copy:static",
    "build:firebase": "npm run clean && npm run build && npm run copy && cd functions && npm i",
    "start:firebase": "firebase serve --only functions,hosting",
    "deploy": "firebase deploy --only functions,hosting"
   // ...
}