Renaming src Folder of a Vue CLI 3 Project

The challenge of designing a good CLI tool is to balance sensible defaults with the freedom to customize.

One of the best CLI tools I know of is Vue CLI 3. One of its "sensible defaults" is that the source files, e.g. uncompiled components and JavaScript files, will be in a directory src.

But what if you have your own unique app structures you want to use like MVC, or perhaps your own convention you use across all your code bases, so you'd prefer to give the source folder a different name like view, app, client etc.

In this GitHub issue, a user asked how src can be renamed to something else.

The answer is that this is not something that can be done directly. As Evan said in his closing comment in the issue:

"There will not be a first-class option for this because we prefer all Vue CLI projects to have a consistent, standard directory structure. Using a different directory name is only a matter of personal taste, so if you insist on changing that, you are on your own."

Let sleeping dogs lie?

So why mess with this? It's just a folder name, does it matter?

This was the question I had to ask myself when drafting my Enterprise Vue course, which is centered around creating a full-stack Vue/Express app including Vue CLI 3. This app is structured such that it includes server/API files in a subfolder of the scaffold.

I discuss my thoughts about using Vue CLI 3 to house a full-stack app in this previous post: Vue CLI 3 Full-Stack App Structure.

As a staunch individualist and a hopeless perfectionist, I found I just couldn't leave the client source files in the generically named src folder while the server source files were in the more descriptively named server folder.

Changing the name of src can be done if you really believe the integrity of your folder structure is worth the difficulty it incurs which I'll explain below.

Webpack config

The main issue you'll butt up against is that the Webpack config under the hood of Vue CLI 3 has hardcoded src as the name of the source directory.

Webpack config is opaque in Vue CLI 3 by design, but if you do need to see it, you can use the inspect command.

My tip is to write it to a file and search for usages of src.

$ vue inspect > webpack.txt

In a typical Vue CLI installation, you'll see two instances of src, one in the alias section, and one in the entry file.

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/src',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

To change these, you'll need to create or add to the Vue config file and override this Webpack config. I like using the Webpack Chain method to do this declaratively.

The following show how you could override the rules that hardcode the src directory and change them to something else:

vue.config.js

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .add("./client/main.js")
      .end();
    config.resolve.alias
      .set("@", path.join(__dirname, "./client"))
  }
};

With that done, inspecting the Webpack config again you will see src has been replaced:

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/client',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './client/main.js'
    ]
  }
}

Problem solved...or is it? Keep in mind that Vue CLI 3 plugins will all assume src is the main folder, so be prepared to keep modifying the config in a similar way each time you add a plugin.