Can I easily run a vue.js webapp in a sails.js assets directory?

Question

I am learning how to use Sails.js and vue.js. So I'm trying to develop a small app where there's a vue.js application located inside the assets/ directory of sails.js. The idea is to serve both applications with the same server (command sails lift), but I'm getting some trouble to make it work.

The reason is because the sails server can serve the index file of my vue app (assets/web/dist/index.html), but other vue resources will 404, because my vue index.html file will ask for addresses like localhost:1337/static/etc instead of localhost:1337/web/dist/static/etc.

So I could make it work running npm run-script build in assets/web (my vue directory) and creating a copy of assets/web/dist in my assets directory. This way my vue app is served by the sails.js dev server. But I have to "compile" vue and copy it everytime I change something. It would be fine for production, but is terrible for developing.

Is there some easy way to develop this application using only one dev server, or should I split them in two apps and serve them separatelly (in dev environment) ?

I'm using sails v1.0.2 and latest bootstrap-vue (currently bootstrap ^4.0.0-beta.2 and vue ^2.5.2)

(it's available in https://github.com/lampsbr/projetao)

Julian Julian · Accepted Answer · 2018-09-15T07:25:40

You should split it, e. g. frontend/backend directory, and it's better to have different terminal sessions for both servers because if not, it might get messy. In my example project with Vue.js and Sails.js, it's still possible to start both simultaneously. But that's only for very quick changes.

This is how I do it inside the package.json:

"scripts": {
    "dev": "cd backend && npm run dev & cd frontend && npm run dev",
    "install": "cd frontend && npm i && cd ../backend && npm i && cd .."
},

You have to compile your Vue.js application only when going production and, as you mentioned, it will be pushed into assets directory of Sails.js. That said, only your compiled Vue.js application should be located inside your assets directory, no source files!

Another common approach is to have a client directory inside your Sails.js directory.

Can I easily run a vue.js webapp in a sails.js assets directory?

1 Answers