Using the Node filesystem API (fs) to Automate File Creation (Video)

Using the Node filesystem API (fs) to Automate File Creation.

Recently on a client project, we were creating and using a design system, and we ran into a problem tailor-made for a build tool to solve: pattern generation. The way this particular design system worked was that each “pattern” lived in its own directory, which contained four files:

• a scss file

• a twig template file

• a json data file

• a js file

Typically, we’ve reached for something like Yeoman to handle these types of scaffolding problems; however, I’ve recently become exhausted with the amount of JavaScript dependencies I typically use. Therefore, I decided to see what we could accomplish with the Node standard library, and I was pleasantly surprised by what fs.writeFile had to offer.

fs

Node’s FS module provides a host of filesystem related functionality. We can use two specific methods to solve our problem without pulling down a bunch of third-party code:

1. mkdirSync

2. writeFileSync

mkdirSync creates directories given a path plus other options. At its most basic, it looks like this:

fs.mkdirSync('./src/js');.

writeFileSync creates files at a specific path and optionally fills them with data. At its most basic, it looks like this:

fs.writeFileSync('/src/js/index.js');

Basic flow

A stripped down example of our scaffold script is only 23 lines!

const fs = require('fs');

const args = process.argv.slice(2);

function makeDirs() {
  // Here we want to make sure our directories exist.
  fs.mkdirSync('./scss', { recursive: true });
  fs.mkdirSync('./js', { recursive: true });
}

function generate(fileName) {
  makeDirs();
  fs.writeFileSync(
    `./scss/${fileName}.scss`,
    `// This is a comment to begin our SCSS file.\n`
  );
  fs.writeFileSync(
    `./js/${fileName}.js`,
    `// Please follow JSDoc standards for commenting.\n`
  );
}

generate(args[0]);

We can then invoke this script from the command line like this:

node index.js slider

This command will generate our files and name them “slider.”

What’s great about this approach is the complete lack of third-party code. This is all “vanilla” Node. The basic logic of the script is:

1. Make sure the directories that will contain the created files actually exist.

2. Write the files with the necessary information inside them.

Another note is that ES6 string templates make this code even easier to follow by allowing us to easily interpolate variables into our path names.

Forward Thinking

Node has a solid standard library that can solve a wide range of problems. Relying on Node to solve problems in the frontend stack—instead of insert “flavor of the month build-tool”—protects that project from outdated dependencies in the future and provides a common set of APIs for current and future developers.