Bit Training Course: A Detailed look🔬 at the bit add Command

18 min readNov 18, 2021

If the Bit docs📚 are boring😦, come to me 🏃 . I’ll clarify everything for you in a way you’ll never forget 😊

We will look at one Bit CLI’s most important command, the bit add. These Bit commands are the same thing as Git commands. The only difference is that G in git changed to B 😀

In Git, git add is used to stage files. If I have a project like this:

prj/
    one.js
    two.js
    three.js

First, I will initialize a Git environment git init, likewise in Bit bit init.

Git will create .git folder and Bit will create .bit folder. Let’s say we want to stage the one.js file in Git. We will run git add one.js So also in Bit to stage one.js before launching to bit.dev space we have to stage with bit add one.jscommand.

Bit add command has a plethora of sub-commands that we are going to look into here.

Let’s add things up

After bit init, bit add is the first step you take towards sharing your components with Bit. This command stages the components, yes like a potter he will first put the clay he would use on his potter’s wheel. Here putting the clay on the potter’s wheel is staging the clay, the first step towards making a pot with the clay.

It is on the potter’s wheel (the stage) that the clay will be molded into a pot, designs added, fired, and dried.

So just like Bit, the add is used to bring our components on the Bit’s wheel :), there it will be tagged with version, built, and exported.

Also, an artist trying to put up a drawing will stage his drawing paper or any drawing medium on his drawing board.

There, he renders his drawings, paints them, does any work on them, then before upstaging the drawing paper to shares it with the world.

There are somethings we need to understand. Bit works with majorly three things:

id
entry point
namespace

The id is thename Bit will assign a component so we can work with the name with bit commands and also the name it will bear when exported to our collection. Your component must have a name Bit will identify it with.

entry point is the execution starting point of your component. This entry point is the file that exports all your file dependents. You must tell Bit the entry point of your component, this entry point will be used by Bit to build your component pointing your entry point to the bundler (either Rollup or Webpack).

namespace is used to organize related components in Bit workspace. They also act like folders in Bit collection.

The general structure of the bit add command:

bit add|a <files> [-i|--id <id>] [-m|--main <main file name>] [-t|--tests <tests>] [-n|--namespace <namespace>] [-e|--exclude <files to exclude>] [-o|--override]

: is the name of the file(s) you want to add separated by space, specifies the file you want to be staged.
id: is the name of the component,
main: specifies the entry point,
tests: the test files associated with the component,
namespace: holds the group name of the component(s),
exclude: the files you don’t want to be added.
override: Used to replace an existing component, the default value is false.

Whenever we run the bit add command, the files are added to the .bitmap file. The file generated when we ran the bit init command

The .bitmap have this structure:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "COMPONENT_ID": {
        "files": [
            {
                "relativePath": "FILE_PATH_HERE",
                "test": ADDED_WITH_TEST_FILE(S)?,
                "name": "FILE_NAME"
            }
            ...
        ],
        "mainFile": "ENTRY_POINT_PATH_HERE",
        "trackDir": "DIR_OF_THE_ENTRY_POINT_FILE",
        "origin": "AUTHORED",
        "exported": IS_THE_COMPONENT_EXPORTED?
    },
    "version": "BIT_CLI_VERSION_HERE"
}

COMPONENT_ID holds the name(or id) of the component.

Each component has mainFile, trackDir, origin and exported.

mainFile: holds the full path of the entry point file.
trackDir: holds the directory of the entry point file.
origin: Indicates that the component originated from the project or not from the project.
exported: holds a boolean that states whether the component has been exported or not.

“files” holds in array the files associated with the component.

The files have relativePath, test, and name.

relativePath: The full path of the file associated with the component.
test: Boolean value that indicates whether test files.
name: name of the associated file path.

Let’s take one different aspects of using the command.

We have a project like below:

prj/
    src/
        one.js
        two.js
        three.js

The files are all components that are re-usable.

We want to stage the one.js file. To do that, we do this:

bit add src/one.js

Bit knows we want to add src/one.js file. We didn’t specify and id and the main entry point, which is what Bit works with. Therefore here, Bit will take the name of the file minus the file extension: one to be the id, then set the entry point to be src/one.js since we didn’t specify one.

See the .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "one": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            }
        ],
        "mainFile": "src/one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

“one” is the component id or name, see the “mainFile” the entry point of the component is pointing to src/one.js. So no id takes the name of the file and no entry point takes the name of the file.

We can set the id of the component by using the id flag:

bit add src/one.js --id onename

See the .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "onename": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            }
        ],
        "mainFile": "src/one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See the one is changed to onename, this is because will told Bit to set the component name to be onename. This is the name we will use to run bit commands (tag, untrack, build, export, etc) on the component.

Let’s say the one.js file has an entry point that exports it, oneindex.js

prj/
    src/
        one.js
        two.js
        three.js
        oneindex.js

We will add the oneindex.js to mark it as the entry point:

bit add src/one.js --main src/oneindex.js

The .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "one": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            },
            {
                "relativePath": "src/oneindex.js",
                "test": false,
                "name": "oneindex.js"
            }
        ],
        "mainFile": "src/oneindex.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See the mainFile will point to oneindex.js, this will be the entry point because we specified it with the — main flag.

We can track one.js and two.js at the same time. It’s possible looking at the bit add command bit add|a , the could be a file or files separated by a space.

bit add src/one.js src/two.js

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "one": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            }
        ],
        "mainFile": "src/one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "two": {
        "files": [
            {
                "relativePath": "src/two.js",
                "test": false,
                "name": "two.js"
            }
        ],
        "mainFile": "src/two.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

We can group the added files as one component:

bit add src/one.js src/two.js --id compo

This will throw an error. Why? because we are adding two files one.js and two.js as one component (compo) without an entry point. Bit won’t know which one of them would be the entry point. If the added file is one, then Bit can infer the added file should be the entry point since it is the only file.

So, we will use the main flag to set the entry point.

bit add src/one.js src/two.js --id compo --main src/one.js

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "compo": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            },
            {
                "relativePath": "src/two.js",
                "test": false,
                "name": "two.js"
            }
        ],
        "mainFile": "src/one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, compo as the component name, and two.js and one.js are listed in the “files” array as its files. The “mainFile” is set to one.js, that’s the file we specified in the main flag.

Also if we run

bit add src/one.js src/two.js --main src/one.jserror: the components two does not contain a main file.
please either use --id to group all added files as one component or use our DSL to define the main file dy
namically.
see troubleshooting at [https://docs.bit.dev/docs/add-and-isolate-components#component-entry-point](https://docs.bit.dev/docs/add-and-isolate-components#component-entry-point)

This will throw an error because Bit won’t know the id to give the component. There are two files, if it’s one Bit will take the name of the file as the component id. But being two you have to tell Bit the name of the component would bear.

Tracking with respect to directories

We can track a directory as a component. Instead of adding a file we can add the files of a whole directory.

Let’s say we add a dir folder to our prj folder.

prj/
    src/
        dir/
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

Now, let’s track dir folder as a component

bit add src/dir

Whenever we are adding a directory as a component the directory name will be its component id. Here the component name will be dir.

This will fail because we didn’t specify the entry point. Yeah, it will fail because there are many files in the directory so Bit doesn’t know which one will be the entry point.

We will add the main flag to the above command

bit add src/dir --main dir/dirone.js

See, we make the dirone.js as the entry point. Let’s see the .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

Yes, “dir” as the name of the component (name of the directory), dirone.js, dirtwo.js are listed as the “files”. “mainFile”, the entry point points to dir/dirone.js.

We can set the name of the component using the id flag. Maybe we don’t want the name of the directory to be the name of the component:

bit add src/dir --main src/dir/dirone.js --id dirname

Here, we set the component name to be dirname. Without it, it will be dir, the name of the directory.

See, our .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dirname": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See the component id is dirname.

Now, another thing if we don’t specify the entry point, Bit will search for an index file, if not found it will throw an error. So we can remove the main flag and add an index.js file in our dir to see what happens.

prj/
    src/
        dir/
            dirone.js
            dirtwo.js
            index.js
        one.js
        two.js
        three.js

We have index.js in the dir directory. Bit will use it as the entry point if we omit the main flag.

bit add src/dir

Here the component id will be dir and the entry point index.js

See the .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            },
            {
                "relativePath": "src/dir/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/index.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

Boom!!!

Now, if we specify the id the index.js will still be the entry point:

bit add src/dir --id dirname

The .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dirname": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            },
            {
                "relativePath": "src/dir/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/index.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

We can track the contents of a directory: files and directory as separate components.

bit add src/dir/*

We use the glob pattern * to tell Bit to add all the contents of the directory as components.

To track the contents of dir: we have dirone.js, dirtwo.js, and index.js. All these files will be added as components

See .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dirone": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "dirtwo": {
        "files": [
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirtwo.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "index": {
        "files": [
            {
                "relativePath": "src/dir/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/index.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See all the files have the component id as their file names

dirone.js is dirone, dirtwo.js is dirtwo, index.js is index

and the entry point points to them.

Note: Even the index.* file will be added as components

Now, we had only files in our dir folder. IF we have a directory in the dir folder like this

prj/
    src/
        dir/
            dir1/
                dir1one.js
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

bit add src/dir/* will add the files and folders in the dir as components.

dir1 folder will be added as a component. Bit will add it entry point as dir1one.js, this is because there is only one file in the folder if there are multiple files like this

prj/
    src/
        dir/
            dir1/
                dir1one.js
                dir1two.js
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

Bit will throw an error because it doesnt know which will be the entry point.

In cases like this, We should add an index.js file to the sub-directory so Bit will use it. To solve the above issue we will add index.js file to dir1

prj/
    src/
        dir/
            dir1/
                dir1one.js
                dir1two.js
                index.js
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

bit add src/dir/*

will succeed

The .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir1": {
        "files": [
            {
                "relativePath": "src/dir/dir1/dir1one.js",
                "test": false,
                "name": "dir1one.js"
            },
            {
                "relativePath": "src/dir/dir1/dir1two.js",
                "test": false,
                "name": "dir1two.js"
            },
            {
                "relativePath": "src/dir/dir1/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/dir1/index.js",
        "trackDir": "src/dir/dir1",
        "origin": "AUTHORED",
        "exported": false
    },
    "dirone": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "dirtwo": {
        "files": [
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirtwo.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "index": {
        "files": [
            {
                "relativePath": "src/dir/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/index.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

We can track sub-dirs only without single files using the **

Now, we have this:

prj/
    src/
        dir/
            dir1/
                dir1one.js
                dir1two.js
                index.js
            dirone.js
            dirtwo.js
            index.js
        one.js
        two.js
        three.js

If we do this:

bit add src/**/

Bit will add only the sub-dirs of src only, the sub-dirs is only dir, the one.js and two.js files would not be added. The files and folders in the sub-dirs would be added:

The .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir1/dir1one.js",
                "test": false,
                "name": "dir1one.js"
            },
            {
                "relativePath": "src/dir/dir1/dir1two.js",
                "test": false,
                "name": "dir1two.js"
            },
            {
                "relativePath": "src/dir/dir1/index.js",
                "test": false,
                "name": "index.js"
            },
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            },
            {
                "relativePath": "src/dir/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir/index.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See the dirone.js and dirtwo.js are added and the files in the dir1 folder are all added. The component name will be the name of the sub-dirs. The index.js will be the entry point. If we didn’t have the index.js file, Bit will look into the sub-dirs of dir for index.js, if found it will use it as the entry point for dir.

prj/
    src/
        dir/
            dir1/
                dir1one.js
                dir1two.js
                index.js
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

The index.js in dir is gone.

bit add src/**/

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir.js",
                "test": false,
                "name": "dir.js"
            },
            {
                "relativePath": "src/dir/dir1/dir1one.js",
                "test": false,
                "name": "dir1one.js"
            },
            {
                "relativePath": "src/dir/dir1/dir1two.js",
                "test": false,
                "name": "dir1two.js"
            },
            {
                "relativePath": "src/dir/dir1/index.js",
                "test": false,
                "name": "index.js"
            },
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dir1/index.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, the index.js file in dir1 is used, dir1 a sub-dir of dir.

Note: When using the glob pattern you should be very careful. /** is still equalt to /*. We may be thinking that /** is equal to /**/, no.

To achieve the effect of // the last slash must end it. If we do this bit add src/ intending to get result for bit add src/**/ we will get the result for git add src/*.

Now, we can track a component for each file in a sub-dir.

Let’s say our prj folder is this:

prj/
    src
        dir/
            dir.js
            dirone.js
            dirtwo.js
        one.js
        two.js

We want to create components out of the sub-dirs in src, we will run this:

bit add src/**/*

This will create components out of files in the dir folder without the files in the src folder.

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir.js",
                "test": false,
                "name": "dir.js"
            }
        ],
        "mainFile": "src/dir/dir.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "dirone": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "dirtwo": {
        "files": [
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirtwo.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, dir is the only sud-dir in the src folder, so it picked all the files in the dir folder and made each a component, ofcourse using their file names as component id.

Now, let’s say we hate a file and we don’t want to include it, simple we will use the exclude flag in our command with the name of the file.

We have this:

prj/
    src
        dir/
            dir.js
            dirone.js
            dirtwo.js
        one.js
        two.js

Then we want to add dir as a component with dirone.js as an entry point but we don’t want to include dir.js. We will run this:

bit add src/dir --main src/dir/dirone.js --exclude src/dir/dir.js

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirone.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, there is no dir.js, if we remove the — exclude flag the dir.js will enter as the dir component files.

We can exclude a directory. Let’s say we want to include all dirs in src dir but don’t want to include dir.

We have this folder

prj
    dir/
        dirone.js
        dirtwo.js
    dir1/
        dir1one.js
    one.js
    two.js

To exclude dir, we run this:

bit add src/**/ --exclude src/dir

Bit will add only dir1 as dir1 component.

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir1": {
        "files": [
            {
                "relativePath": "src/dir1/dir1one.js",
                "test": false,
                "name": "dir1one.js"
            }
        ],
        "mainFile": "src/dir1/dir1one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, the dir folder is not included only the dir1 directory.

We can exclude multiple files.

prj
    dir/
        dir.js
        dirone.js
        dirtwo.js
    one.js
    two.js

Let’s say we want to add the dir folder but don’t want to add dir.js and dirtwo.js. We can do so like ths:

bit add src/dir --exclude 'src/dir/dir.js,src/dir/dirone.js'

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirtwo.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See the dir.js and dirone.js was excluded, only dirtwo.js was added.

We can add a file later to an existing component. Like how we excluded the dir.js and dirone.js, we might come to forgive dir.js for his deeds but not dirone.js then we will decide to add dir.js to component dir already existing, we do this:

bit add src/dir/dir.js --id dir

The .bitmap will be this:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir.js",
                "test": false,
                "name": "dir.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dirtwo.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, the dir.js was added to the files of the already existing dir component.

Overriding components

Now, we can write on an existing component. For example:

In this prj folder:

prj/
    src/
        dir/
            dirone.js
            dirtwo.js
        one.js
        two.js
        three.js

We added the one.js file:

bit add src/one.js

This will create a component one:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "one": {
        "files": [
            {
                "relativePath": "src/one.js",
                "test": false,
                "name": "one.js"
            }
        ],
        "mainFile": "src/one.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

We can want to add a component but to bear the name one, whereas the one component is already existing. Here, we will use the override flag. Though the override flag is by default included in our commands holding the value false.

Here, we will set it to true. Now, to add the two.js file but to bear the name one, we will do this:

bit add src/two.js --id one --main src/two.js --override true

We set the id to one, set the entry point to the file two.js and set the override flag to true.

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "one": {
        "files": [
            {
                "relativePath": "src/two.js",
                "test": false,
                "name": "two.js"
            }
        ],
        "mainFile": "src/two.js",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, one thing we have to note here is that we must tell Bit the mainFile (ie the entry point), if not Bit will throw an error, like this:

bit add src/two.js --id one --override true

Bit will throw an error:

failed adding or updating a .bitmap record of one. mainFile src/one.js is not in the files list
This error should have never happened. Please report this issue on Github https://github.com/teambit/bit/i
ssues

Using the override on folders

Let’s say we have this folder:

prj
    dir/
        dirone.js
        dirtwo.js
    dir1/
        dir1one.js
    one.js
    two.js

Then we added the dir folder:

bit add src/dir

The .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir.js",
                "test": false,
                "name": "dir.js"
            },
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dir.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, the component name is dir.

We can then decide to add the dir1 folder to have dir as a component name. We may do this:

bit add src/dir1 --id dir --override true

This will fail because Bit will try to set the original entry point which points to src/dir/dir.js.

So we have to set the entry point using the main flag.

bit add src/dir1 --id dir --main src/dir1/index.js --override true

See the .bitmap:

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir1/dir1one.js",
                "test": false,
                "name": "dir1one.js"
            },
            {
                "relativePath": "src/dir1/index.js",
                "test": false,
                "name": "index.js"
            }
        ],
        "mainFile": "src/dir1/index.js",
        "trackDir": "src/dir1",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

The dir now points to dir1 folder. See the “files” array points to files in the dir1. The entry point points to src/dir1/index.js.

Using file name as the directory to set an entry point

We have a folder like this:

prj
    dir/
        dirone.js
        dirtwo.js
    dir1/
        dir1one.js
    one.js
    two.js

And we want to track the dir folder as a component, so we do this:

bit add src/dir

This will fail like we have seen because there is no index.js file and we didn’t specify the entry point since we didn’t have index.js there.

Now, we can specify the entry point by creating a file in the dir folder that has the same name as dir.

prj
    dir/
        dirone.js
        dirtwo.js
        dir.js
    dir1/
        dir1one.js
    one.js
    two.js

If we didn’t specify the entry point and there is no index.js file, Bit will look for a file that has the same name as the folder and make the file the entry point. here dir.js will be the entry point.

bit add src/dir

The .bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */{
    "dir": {
        "files": [
            {
                "relativePath": "src/dir/dir.js",
                "test": false,
                "name": "dir.js"
            },
            {
                "relativePath": "src/dir/dirone.js",
                "test": false,
                "name": "dirone.js"
            },
            {
                "relativePath": "src/dir/dirtwo.js",
                "test": false,
                "name": "dirtwo.js"
            }
        ],
        "mainFile": "src/dir/dir.js",
        "trackDir": "src/dir",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.4.3"
}

See, the dir.js is the entry point.

In our next post, we will look at namespaces the virtual way Bit group component ids and adding test files.

Conclusion

Don’t worry I’ll be updating this article as the bit commands change. I’ll flow with the tide 😁

Note: Every example and command in this post were actually tested with the prj folder described in this post in my machine using bit version 14.4.3. The .bitmaps were generated in my machine in the prj folder for every example and command here.

Ask me anything you want about bit add command I’ll answer you.

I’m a Bit developer expert 😀

Drop your comments below if there are any corrections

Bit Training Course: A Detailed look🔬 at the bit add Command

Let’s add things up

Next post

Conclusion

Written by Chidume Kenneth

No responses yet