I’m building a project with the microservices framework and . 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. Foxx Vue 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 as a CLI tool or as a module. Webpack also has a built-in development web server and file watcher. Node.js My first thought was that maybe Foxx itself could run webpack as a module. After all the setup script ( in ) is the perfect place to do this kind of thing. And it’s all . Unfortunately, that didn’t work out very well. The Foxx implementation of lacks the function and only has the . Which makes sense because ArangoDB implements Javascript synchronously. I probably could have patched much of it together but why swim against the stream? scripts.setup manifest.json Javascript fs readFile readFileSync Since Arango can’t run webpack, then maybe I could get webpack to run foxx-manager. In webpack you can run a simple setup with the command line or create a Javascript module that defines your configuration. I decided to go that route. First things first, however, let’s pulldown webpack. Since we want to have a repeatable setup, let’s initialize a file. package.json npm init It might seem a bit off to do this as the file is a distinctly node thing, but we’ll be using a little bit of Node.js here as well. package.json After you’ve answered your questions in the npm initialization process, we can add a few development dependencies. npm install --save-dev webpacknpm install --save-dev webpack-shell-plugin Let’s build our configuration file. It’s customary to name this file although it could be anything. My file looked like this: webpack.config.js Going through this file, let’s examine a few key points. On line 2, we’re using the . This allows webpack to act as a rudimentary task runner. foxx-manager is very simple from a command line perspective, we just need to run something — no inputs or outputs. It should fit our needs. webpack-shell-plugin The module is used to smooth out differences on different platforms. I haven’t tested my script on anything aside from macOS, but this makes sure we’re generally constructing our paths with the right directory dividers. path The property of (line 6) is the single file that we’re going to run webpack over. In this file, you can do cool things like… entry module.exports import joi from 'joi-browser'; …to get access to a module. Webpack will manage the dependencies for you. 4. The object of (line 7–9) defines the output file mentioned in the property. output module.exports entry 5. Probably the most interesting part is the use of 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. WebpackShellPlugin 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 so if you alter another static file you’ll need to manually re-run foxx-manager. module.exports.entry, 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 is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Using Webpack with ArangoDB and Foxx

Too Long; Didn't Read

Company Mentioned

Kyle

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using Webpack with ArangoDB and Foxx

Too Long; Didn't Read

Company Mentioned

Kyle

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES