Assets management tool Massets. Installation and How it works?
Tags: webdev, opensource, npm, management
Published: 2023-02-25 14:45:16

Hello everyone, today I will explain massets and how it works massets? First of all massets is asset managment tool for big projects. If your design team is naming assets in this way: Lol.png, xD.jpeg or redCar.svg also If you have to download different icons apart from icon sets as well after a certain point in the project, you tend to forget which icon you embedded. Your teammate might have also embedded that asset. So you need to see assets in white paper also you need to search from the asset name for duplication. So I thought seeing all the assets on a blank page and searching within them could show if there are any duplicates among the assets.


![Massets Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugt7eqtak53rxl3cuxvw.jpg)

and you can see demo from here: 

![massets demo video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y70kk1j3hz0hclvsyfm7.gif)

## Massets Installation

- You have to download package in your project:
`npm install massets`
`yarn add massets`

- You have to create **massets.config.json** file in main route

```
 {
   "path": "<YOUR_ASSETS_FOLDER_PATH>"
 }
```

- You have to add script in your **package.json**

```
 "scripts": {
        .
        .
        .
        "massets": "massets-start"
    },
```

- npm run massets or yarn massets
- Then it will start in http://localhost:4007/
- that's it :)

## How it works?

- First of all, it reads the 'massets.config.json' file in the specified path. Then, it traverses the path and finds PNG, JPEG, JPG, WEBP, and SVG files, using 'glob' for this process.

![massets.config.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibxj17y0s4epgxsef17e.png)

- It embeds all of these assets within the web project included in the package. The following occurs during the embedding process:

1. It creates assets.json file within the web project included in the package. Then these values write the json file:

- ImageType: Depending on the height and width values of the 'ImageType' image, it can be 1, 2, 3, or these values.

How can i detect ImageType?

![image type guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a1ilqup7f7t7qqg1t2q.jpg)

If the width/height < 1, then it is considered as type 1. As for the calculation of icons, if the height * width is less than 128 * 128, I simply write the width and height values of the icons. I need to make this calculation because I want to sort the assets in the web project.

2.Title: This title takes its value based on the name of the previous folder of the image. This title ensures that the assets are listed more neatly on the website.


![title structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2niynwfiwfib5he227ch.png)

- Then assets.json writing process is finished. I run the script with an 'sh' extension inside the web project using the shell library. This script performs the necessary operations for the web project to function.


If you want to see the package: [massets](https://www.npmjs.com/package/massets
)
You can also follow me on Twitter: [twitter](https://twitter.com/devbedirhangul)