Renaming src Folder of a Vue CLI 3 Project
Tags: vue, javascript
Published: 2019-04-03 09:40:50

---
title: Renaming src Folder of a Vue CLI 3 Project
published: true
description: Source files in a Vue CLI 3 project are contained in the folder src. This article discusses whether or not you should change the folder name and how you can do it using the CLI config file.
tags: vue,vue.js,javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i2uzzqqq30yrsftcq6d4.jpg
canoncial_link: https://vuejsdevelopers.com/2019/03/18/vue-cli-3-rename-src-folder/

---


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](https://github.com/vuejs/vue-cli/issues/1134), 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](/courses/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](https://vuejsdevelopers.com/2019/03/11/vue-cli-3-full-stack). 

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`.

```bash
$ 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](https://github.com/neutrinojs/webpack-chain) method to do this declaratively. 

<content-ad/>

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.

* * *

**Enjoy this article?**

Get more articles like this in your inbox weekly with the *Vue.js Developers Newsletter*.

[Click here to join!](https://vuejsdevelopers.com/newsletter?utm_source=devto&utm_medium=article)

* * *