How to write your own components library with hot-reloading, using yarn-workspaces and babel

Introduction

At Inato, we are creating a product that includes several front-end applications. All these apps are located in a single mono-repo which we manage with yarn-workspaces, where each app is a javascript module.

For example, let’s imagine that we have 2 front-end modules, app and back-office. The file structure would look like this:

.
├── package.json
├── packages
│   ├── app
│   │   ├── package.json
│   │   └── src
│   │       └── index.js
│   │
│   └── back-office
│       ├── package.json
│       └── src
│           └── index.js
│       
└── yarn.lock

For each of these front-end app, we have a nice developer experience with hot-reloading, so we have a quick feedback when we design new components, especially when we write styles.

At some point, we discovered that some UI components were duplicated across different apps. So, we decided to refactor all these components into a new UI-dedicated module, enforcing code unicity and UI integrity:

.
├── package.json
├── packages
│   ├── app
│   │   ├── package.json
│   │   └── src
│   │       └── index.js
│   │   
│   ├── back-office
│   │   ├── package.json
│   │   └── src
│   │       └── index.js
│   │   
│   └── ui
│       ├── package.json
│       └── src
└── yarn.lock

In this article, I will explain how you can build the ui module while keeping a great hot-reloading experience.

How to build the module with hot-reloading

The standard way is to process and copy the source files into a lib folder. Using babel, a command like babel src --out-dir lib will do the trick.

Then,you can import your components in your app and back-office front-end modules with: import { SomeComponent } from 'ui/lib/SomeComponent'.

In order to build the files each time they are edited, you can add a “watch” option in the babel command :

babel src --out-dir lib -w

Now, when you change something in ui, the processed files are updated in lib, and hot-reloading is triggered in app and back-office!

The end

I hope you enjoyed this short article. If you have any question, just drop a comment below.

In my next article, I will explain how to export flow definitions from a javascript module.

Also, if you are curious about Inato activities, we are currently hiring software engineers! Check out the open positions: https://angel.co/inato/jobs.