How to automate yarn add of vite plugins in Needle?

Upon discovery that I can use vite-plugin-mkcert https://www.npmjs.com/package/vite-plugin-mkcert for automation of certificates for local server to test AR on devices without security warnings, I am finding when moving between projects I have to always now run yarn add vite-plugin-mkcert -D in a terminal in that project in VS Code after editing vite.config.js to include

import {defineConfig} from'vite'
import mkcert from'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true
  },
  plugins: [mkcert()]
})

Is there any way to automate that yarn add for the included plugin? It seems like something I could automate from the imports at the top of vite.config.js by their name if they are not already added with yarn as I think I will be using that vite-plugin-mkcert in every project from now on basically

Original Post on Discord

by user 103054507105067008

You could add it to the package.json start script maybe (aka add a new script in the package.json and with that command and run it from there)

Trying putting it in package.json in scripts like:

  "scripts": {
    "includemkcert": "yarn add vite-plugin-mkcert -D",
    "start": "vite --host",
    "build:dev": "tsc && vite build && npm run copy-files",
    "build:production": "npm run build:dev && npm run pack-gltf",
    "serve": "vite preview",
    "copy-files": "copy-files-from-to",
    "pack-gltf": "npm run pack-gltf --prefix node_modules/@needle-tools/engine"
  },

by user 103054507105067008

Doesn’t seem to work when I hit play in the project

by user 103054507105067008

I mean you need to run the script too :sweat_smile: when starting the server we run start and when building we run one of the build commands

Where can I dictate it to run the script? Ideally would be during install or on first time play mode

by user 103054507105067008

there are callbacks for pre-install. You can look that up via npm docs

So I put it in as "prepare": "yarn add vite-plugin-mkcert -D", Which ran in an infinite loop of doing the yarn command so I changed it to "prepublish" instead which then when the build runs gives me the error:
16:45:37 [vite] Failed to load source map for /node_modules/@needle-tools/engine/node_modules/peerjs/dist/peerjs.min.js?v=400199c3.

by user 103054507105067008

Just reporting this back in case others have the same issue/error. Trying to figure out where best to run the yarn command and how to fix that error now

by user 103054507105067008

Is there an NPM command you use to run commands on first setup/install of Needle? Seems whenever I add the command anywhere like preinstall, it runs it forever in a loop

by user 103054507105067008

Okay I figured it out, all I had to do was add it to the "devDependencies" block in package.json as "vite-plugin-mkcert": "^1.10.1" then on the Export Info component when we run install, it calls npm install which installs all required dependencies such as the mkcert one I added. Made it super straightforward for new project/scene setups!

by user 103054507105067008