development environment
Image credit: bit

Are you a software engineer who struggles with development environment? Enter, Bit. A software for computer scientists and developers for their convenience. What is bit? Bit is a next-generation build system for composable software. It lets you design, develop, build and version components in an isolated environment. What exactly does bit do? It helps you take complex product requirements, and break them down into independent, and reusable pieces called “components”. It allows you to create components and compose them with each other. Components are described by names and APIs, and contain source code implementation. In this article, we’re going to explore how you can create a development environment with Bit following these 5 steps.

Table of Contents

Step 1: Pre requisites for a development environment

To start off, we need to install bit for which you’ll have to run the following command:

  • npx @teambit/bvm install

To verify your installation, run this command:

  • bit –version

If you’ve installed bit then you should see this output:-

0*Qk FtccYKedpjJLF Bit: 5 Steps To Create a Development Environment

After this, you’ll have to create an account on Bit cloud. Bit cloud lets you host your development environment in a remote scope, This allows you to utilize it on any project you want. You can create a scope after you’ve made an account.

Scope is a collaboration server for components. Scopes defines ownership on components, as a single team owns the components exported to scope. Share components to scopes according to their domain, and preserve autonomy with versioning, dependency caching, forking components and collaborate on changes.

This is the first step in making a development environment

Step 2: Create a bit workspace

You can create a workspace by using this command:

  • mkdir workspace && cd workspace && bit init

     

Next, navigate to your workspace.jsonc and update the defaultScope entry. This will ensure that all components you made in the workspace will by default be maintained in the scope. A Bit workspace is defined as:-

It allows you to create new components and import/fork (clone) existing components onto the workspace. By doing so, each component is managed with its environment. For example, you might write a backend function as a Node component that uses the Node.

In truth, dev environments are what you need to build components. Think of it like this that your environment is a component itself that other components depend on to retrieve basic information. To build a fully functional development environment, you need two things:-

  1. A react environment
  2. A node.js environment

Step 3: Building a react environment

Run the following command to create react environment:-

  • bit create react-env envs/react-mui –aspect teambit.react/react-env

This creates a custom environemnt called react-mui that you can further customize. You see the output below after creation

Bit: 5 Steps To Create a Development Environment

Even though bit does this by default, but if you want to create your custom logic, you can do that as well.

Use your env.jsonv file to handle all dependancies. This file contains all the dependencies of your components. After all this you can create react components that use MUI.

Note: We assume that you’re building react components using MUI

Step 4: build a react component for your development environment

Run this command:-

  • bit create react ui/button –env envs/react-mui

This output should be visibleBit: 5 Steps To Create a Development Environment

Now, implement the button by updating button.tsx file

  • import { Button as MUIButton, ButtonProps as MUIButtonProps } from ‘@mui/material’;

    export type ButtonProps = {
    } & MUIButtonProps;

    export function Button({ children, variant = ‘contained’, …rest }: ButtonProps) {
    return (
    <MUIButton
    variant={variant}
    {…rest}
    >
    {children}
    </MUIButton>
    );
    }

Go ahead and launch bit server with this command:-

  • bit start

Open the server through localhost:3000, You should be able to see your button component working with MUI. Export this to bit cloud by the following command:-

  • bit tag && bit export

Now, you should be able to see ripple build.Bit: 5 Steps To Create a Development Environment

This is the second last step in making a successful development environment.

Step 5: Node.js environment

Run the following command:-

bit create node-env envs/node-environment --aspect bitdev.node/node-env

Now, add Axios by updating the env.jsonc in your node component

{
/**
* standardize your component dependencies.
* @see https://bit.dev/docs/node-env/dependencies
*/
“policy”: {
/**
* peer dependencies for components using that env.
*/
“peers”: [
{
“name”: “axios”,
“version”: “^1.6.7”,
“supportedRange”: “^1.6.7”
},
// continue
}
}
}

Export this onto your scope, After which you should see a ripple build. After this, You have successfully made a development environment 

Read more from itechglam

Leave a Reply

Scroll to Top