CODEWITHSUNDEEP
javascriptnode.jsexpressvue.jses6-modules
fadedbee
fadedbee

Reputation: 44807

Project structure when using VueJS, VuelidateJS with NodeJS/Express

My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.

My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.

I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.

While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.

If I use VueJS's preferred option of WebPack, how should I change the structure of my code?

Upvotes: 0

Views: 508

Answers (1)

Martin Bean
Martin Bean

Reputation: 39409

I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.

If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.

If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:

mix.js('lib/your-entry-point-script.js', 'public/js/app.js');

Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.

Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.

You can read more about Mix at https://laravel.com/docs/5.7/mix

Upvotes: 1

Related Questions