Chief Make-It-Happen Officer, Non-profit Marketing Chair, DLT Advocate, and Investor in Blockchain
I’m building a project with the Foxx microservices framework and Vue. It’s pretty exciting, but I ran into some annoyances when it came to tooling. I was making changes rapidly and I had to invoke both webpack to bundle my front-end files and foxx-manager to “upgrade” the ArangoDB/Foxx service. On a side note, I was surprised that making changes to a static file in Foxx requires an upgrade. I need to dig into that further.
A few years ago, as I was migrating to a more back-end-centric role, the front-end world went bonkers for task runners and compilers. It left me scratching my head — being that I’m old, I remember one of the compelling reason to write in an interpreted language was that you didn’t have to wait on a compiler. Oh well, turns out it wasn’t just a short lived fad. Most modern front-end frameworks require (or strongly encourage) the use of some sort of tooling. Thankfully, the backend JS world and the front-end world have started to normalize and with tools like webpack, you’re seeing the worlds merge.
But first, let’s back up and describe webpack. Webpack is slightly different than other front end tooling in that it’s a module bundler rather than a task runner like Gulp or Grunt. It’s mission is to take modules (used broadly) and package them into front-end friendly assets. How it makes modules digestible for the front end is by managing and packaging the assets. Webpack itself runs in Node.js as a CLI tool or as a module. Webpack also has a built-in development web server and file watcher.
It might seem a bit off to do this as the package.json file is a distinctly node thing, but we’ll be using a little bit of Node.js here as well.
After you’ve answered your questions in the npm initialization process, we can add a few development dependencies.
npm install --save-dev webpack
npm install --save-dev webpack-shell-plugin
Let’s build our configuration file. It’s customary to name this file webpack.config.js although it could be anything. My file looked like this:
Going through this file, let’s examine a few key points.
import joi from 'joi-browser';
…to get access to a module. Webpack will manage the dependencies for you.
4. The output object of module.exports (line 7–9) defines the output file mentioned in the entry property.
5. Probably the most interesting part is the use of WebpackShellPlugin on line 12. This is where we’re going to trigger the foxx-manager upgrade. Now, in this example, I’ve put in the development credentials for a localhost server. You might want to include a file from outside the repo to manage the username, password, mount point and database name. I tried to access webpack’s command line arguments but no dice. I’d be curious to know of a workaround to be able to pass in arguments or a path to a JSON file to manage these credentials.
Now, to run this, you can run webpack from the command line in your project directory.
./node_modules/.bin/webpack --config webpack.config.js
This will first package up your webpack file then run foxx-manager. If you want to get really fancy, you can add the watch command line switch and webpack and foxx-manager will run automatically when you change the webpack managed file.
./node_modules/.bin/webpack --config webpack.config.js --watch
There you have it. Webpack will run foxx-manager automatically when you alter your webpacked dependencies. Now, this will run the foxx-manager only for file in module.exports.entry, so if you alter another static file you’ll need to manually re-run foxx-manager.
P.S. If you’re interested in ArangoDB, you might also want to checkout Getting started with ArangoDB and Foxx: Joifully CRUD-y in the best way.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
Create your free account to unlock your custom reading experience.