Sharing JavaScript Code Between Applications with Bit

Published in

Bits and Pieces

10 min readAug 4, 2022

Bit allows you to think of every part of your code as an independent component, independent because it can be tracked and versioned by bit and it comes with its own dependencies, and a component because it is easy to maintain and can be easily used across the same project or even installed into a totally different project that will require that component.

But wait a minute, what if I tell you that Bit also allows you to handle your JavaScript functions as independent components too? What this means is that you can comfortably reuse JavaScript functions from a previous project or a function created by someone else inside your project without having to copy and paste.

I know you might be asking, what is wrong with copying and pasting codes? Well, yes. Every developer does it. Copying and pasting have in fact saved me a couple of times. However, with Bit, when you install a component you get updated whenever changes are made to that component, so when a new version for that component is released, you will get it also. Sounds interesting right? let’s dive into the tutorial.

Objectives

At the end of this tutorial, you should be able to:

Create JavaScript function components.
Export JavaScript function components to your scope on Bit.cloud.
Install JavaScript functions into your projects.
Import components into your projects.
Modify, tag and export components.

Requirements

Install Bit binary in your local machine if you haven’t.
Open a bit.cloud account.
Basic knowledge of JavaScript.

This tutorial will be broken up into two parts: the first part will concentrate on creating and exporting a JavaScript function component, and the second part will cover installing the function component created in the first part into a different component in a different workspace as well as importing the same JavaScript function component and carrying out some modifications.

Here is a link to my scope on Bit cloud:

https://bit.cloud/aviatorscode2/theaviatorcodes2

Part 1: Creating and Exporting a JavaScript Function as a Component

Before we proceed with the tutorial, allow me to describe a scenario for you:

Emy is using a component driven approach on a JavaScript project she’s working on. She just finished implementing a function that calculates the relative difference between two dates, she then exported that Function to her Bit cloud scope as an independent component.

At this point, if you still haven’t installed Bit binary on your local machine, you can do this by running this command on your terminal:

npx @teambit/bvm install

The steps we will be following for this part 1 are:

Create a Bit workspace.
Create a component for the JavaScript Function.
Write your JavaScript Function.
Export the Function created as a component.

Create a Bit workspace

There are two ways you can go about creating a workspace with Bit, I will be using one of the methods in this Part 1 and I will use the second method in Part 2 of this tutorial.

To create a new workspace:

Create a folder in any directory of your choice.
Open the folder using the terminal or Code editor.
Run the code below to Initialize Bit in the folder.

bit init

After running the above command, you will notice these files inside your folder, when you see this, it means you have successfully created a Bit workspace.

Next thing is to go to the workspace.jsonc file and change the default scope to your Remote scope on Bit.cloud.

To learn more about the Bit scope, click the link below:

Bit - Component driven development

Bit is the leading toolchain for component-driven development. Forget monolithic apps and distribute to…

bit.dev

Change the default scope from “my-scope” to the name of your Remote scope on bit.cloud. The name of my scope is “aviatorscode2.theaviatorcodes2”.

initial remote scope

changed to the name of my default scope on bit.cloud

Create your JavaScript Function Component

After creating your Bit workspace, the next thing is to create your function component. You can create a JavaScript function component by running this command below on the terminal of your code editor:

bit create node <component-name>

The above command tells Bit to create a component from the node template with a component name of your choice.

The create command is used to create a bit template component.

<component-name> will be any name you decide to give the component, I called mine date-formatter.

If the command runs successfully you will notice an additional folder.

What’s next?

The next step is to write your JavaScript function, all you need to do is, go into the component folder you just created, go into the date-formatter.ts file and write some JavaScript code, if you used a different name for your component, locate the file with your component-name and a .ts extension.

Inside the date-formatter.ts file, I created a simple utility function that finds the relative difference between two dates.

If you don’t want to type out this code, you can fork this component using the code below:

bit fork aviatorscode2.theaviatorcodes2/date-formatter@0.0.1

In my date-formatter.spec.ts, I wrote a simple unit test for my component.

Note: Bit comes with a testing library, so you don't need to install any other testing library. If for any reason you’re getting an error from the testing library, just run the command below:

bit install

I also created a basic composition in my data-formatter.composition.tsx, the composition file helps users of your component to know how to use it.

Before we proceed, you will need to run your local workspace on the browser. the bit server will run on localhost:3000.

To spin up your workspace on the browser, run this command below:

bit start

And Boom! Your JavaScript component is ready to be exported to your Remote scope on bit.cloud.

Before you export your component to a Remote scope, you will first need to tag it.

Tagging creates an exportable component that is marked with a release version, this helps to track any changes on that component and also helps component/projects using your component to get the updated version whenever changes are made.

Also during the tagging phase, Bit will run the test of your component and build the component artifacts and dist folder.

bit tag --message "First release version"

If the tagging is successful, you should see something like this in your terminal:

new components
(first version for components)
     > aviatorscode2.theaviatorcodes2/date-formatter@0.0.1

Now, export your component to your remote scope so that it can be used by other developers. To do that, run the command below:

bit export

Here is a video on how to export your component:

Part 2: Importing a JavaScript Function Component into your project

For the second part of this tutorial, allow me to describe another scenario:

So let’s say Jonathan is working on a Booking application and while building out this application, he discovered that he will need to work on a feature that is able to tell the relative difference between two different days, months and years. He then remembered that he came across a similiar function component that Emy created on Bit.cloud. So instead of building his own function from crash or copying and pasting Emy’s code into his project. With Bit, he can just install that JavaScript component into his project and make use of it in no time.

These are the steps Jonathan will be following to achieve this:

Create a New bit Workspace
Create a new React component
Install the JavaScript function component

Here is the link to the Remote scope I created for the relative date component:

https://bit.cloud/aviatorscode2/demo

Create a new Bit workspace

Remember I told you earlier in Part 1 of this tutorial, that I will be showing you two ways of creating a new workspace, for the second method, run this code in your terminal:

bit new react <workspace-name>

The new command tells Bit that this is a new workspace and it should initialize it with the necessary files required for a Workspace as defined in the chosen Workspace template which is React.

<workspace-name> is the name you will like to call your workspace, you can choose any name of your choice, I called mine react-app.

As stated in Part 1, after creating a new Workspace, go to workspace.jsonc file and change the default scope from “my-scope” to the name of your remote scope on bit.cloud.

Create a new Bit React component

In this part, we will be using a React template for our component, you can create a new Bit react component by running this command inside the workspace you created.

bit create react <component-name>

Import the JavaScript function component

The next thing we will need to do is to import the JavaScript function component we created in Part 1 into this new workspace.

For every component created and exported to bit.cloud, Bit provides a list of CLI commands you can use to either fork, import, or install that component into your workspace.

You can do this by following these steps:

Go to bit.cloud.
Locate the component you want to import into your project.
Click on it.
Click on the use button, and a list of CLI commands will appear.

Here is the link to this component on Bit cloud:

https://bit.cloud/aviatorscode2/theaviatorcodes2/date-formatter

So to install the component into your workspace, do the following:

Copy the CLI command to install the component.
Paste the command on your Workspace and run.

bit install @aviatorscode2/theaviatorcodes2.date-formatter

If the command runs successfully, a new folder named after your bit.cloud scope will appear in your node_modules as a dependency that can be used across your application.

Making use of the imported JavaScript function component

To make use of the function component, use the import syntax to import it into the file where you need it. In this case, we need to import it into the relative-date.tsc file.

You can fork this component, if you don’t want to type out the code, using the command below:

bit fork aviatorscode2.demo/relative-date

I created some variables and passed them as a parameter into the dateFormatter function. To be sure that it works properly, run your Bit server on the browser using this command:

bit start

When you click on the dependencies button, you will see a dependency graph showing that the relative-date component is currently using the current version of the date-formatter component which is 0.0.1.

Modifying the JavaScript Function

Now that the JavaScript function is working as expected, you can also modify that JavaScript Function component.

This time instead of using the install CLI command, you will be using the import CLI command.

Copy the import command and run the command on your terminal or code editor. If the import runs successful, you will see a new component folder. Not as a dependency this time, but as a component that can be modified, tagged and exported.

Spin up your Workspace on your browser to view the components currently on your workspace, using this command:

bit start

Now, you can modify the JavaScript function component to suit your needs.

To test it out, I added some minor modifications to the date-formatter function.

Tag and export

The current component test and composition still work fine so there was no need to write a new one.

Finally, you can now tag and export both the relative-date and date-formatter components to your Remote scope on Bit cloud.

To do that, you will need to run the command below:

bit tag --message "new release"

If you prefer to tag your components separately, you can still do that by using this command:

bit tag <component-name> --message "new release"

Even without specifying a version on the date-formatter component, Bit auto tags the component, from version 0.0.1 to 0.0.2.

When you have successfully tagged your components, you can then export them to your Remote scope, using the export command:

bit export

After you must have exported your components, go to your remote scope on Bit cloud and check the dependency graph of the relative-date component, you will see that the relative-date component is currently using the latest version of the date-formatter component.

Here is the link to the relative-date component on Bit cloud:

https://bit.cloud/aviatorscode2/demo/relative-date

Conclusion

We’ve come to the end of this tutorial, we have been able to achieve the objective of this tutorial, now you should be able to successfully create a JavaScript function component, export it to a remote scope, install and import a JavaScript function component into your project and also modify the component however you want.

Drop a comment below if you find this tutorial helpful and if you have any issues using Bit that you will want us to create an article for, we are here to help.

Relevant Resources