Including packages in index.html?


#1

I’ve come across several discussions on how to use external packages, but I cannot seem to find the answer I needed.

I would like to include VueJS. I opened package.json, and clicked “Add Package”, and included Vue. However, how do I link to it in my index.html?


#2

Short version: add app.use(express.static('node_modules/vue/dist')); under app.use(express.static('public')); and vue.js will be available in index.html at https://yourapp.gomix.me/vue.js

Long version:
This puzzled me at first too. Anything installed with npm (ie via “Add Package”) gets put in /app/node_modules, but it’s not clear where exactly and gomix doesn’t show you. In this case, vue sits in /app/node_modules/vue/dist. However, that is just where it puts the files in your container- it doesn’t mean that file will be served up to browsers. You have to tell your server that it is OK to serve up the file. If you are using express, the way you do that is with the ‘static files’ feature.: http://expressjs.com/en/starter/static-files.html. The code above says “serve up things in /app/node_modules/vue/dist at the root of the site”. You can also have it serve from to a different location like this: app.use('/src/vue',express.static('node_modules/vue/dist'))

I had the same problem a while back and did a simple project you can remix and use to see the entire folder structure of your app: https://gomix.com/#!/project/behind-curtain Or you can take that code and use it in an existing project to see where things are installed (take it out for production though!)

Also, this gets into some of the other tools like bower. I’m not up to speed enough on those, but I think they can help manage this stuff too. So the above suggestion might not be ‘best’, but should work.