# Introduction
[](https://circleci.com/gh/wintercounter/mhy/tree/master) [](https://npmcharts.com/compare/mhy?minimal=true) [](https://david-dm.org/wintercounter/mhy) [](https://github.com/prettier/prettier) [](https://conventionalcommits.org) [](https://www.npmjs.com/package/mhy) [](https://www.npmjs.com/package/mhy)
## mhy [](https://twitter.com/intent/tweet?text=Try%20out%20%23mhy%20as%20your%20new%20JavaScript%20development%20environment.%20https%3A%2F%2Fmhy.js.org\&hashtags=mhy,webpack,babel,jest,typescript,frontend,developers,javascript,html)
A **zero-config**, **out-of-the-box**, **multi-purpose** *toolbox* and *development environment*.
[mhy.js.org](https://mhy.js.org)
***
## Summary
It's really hard to define what `mhy` (my) is, because it tries to create a unified developer experience for any stage of your project:
* a pre-configured **development environment** to not waste time with the set-up when starting a new project or just need a quick playground.
* a pre-configured **production environment** to help you reach production faster compiling/building your code without any necessary setup.
* an **ecosystem** to be able to run different task together at once, connected together perfectly.
* a **toolbox** help your work with the most common tasks.
* a **solution for littering** your machine with the same npm package over and over again.
* a **config management** tool to make necessary changes faster at a single place.
* an **interoperable environment** to be shared across multiple projects and ensure they are being build on the same principles/stack.
> `mhy` helps you to be able to focus on your code again rather then the tech behind it.
## Using `mhy` you'll have
* a **zero-configuration** environment **out-of-the-box**.
* a **portable** codebase without any `npm install`.
* **simple customization** if you don't favor the default settings.
* **package.json based customization** for any configs value `mhy` provides.
* **boot templates** for easy setup.
* **most common packages** provided to your work.
* **less boilerplate**.
* configs/tools **well-playing** together *(webpack+swc, jest+swc, storybook+webpack, webpack+typescript, etc.)*.
* **pre-built and public Docker images** for faster CI.
> Note that `mhy`'s focus is on client side currently, but server side features are about to come.
## Setup
### Install
```bash
npm install mhy -g
```
From `npm@7.0.0` peer dependencies are automatically being installed. `mhy` uses some dependencies that are not prepared yet for this new mechanism. We cannot do anything, but wait for updates. You need to install `mhy` using the `--legacy-peer-deps` or `--force` flag.
```bash
npm install mhy -g --legacy-peer-deps
```
### Start a new Webpack project
Create an empty project with a single `index.js` file that is being served using `webpack-dev-server` *(wds)* pre-configured with **Babel**, **React** and **React Fast-Refresh**.
```bash
mkdir src
echo "console.log('Hello mhy!')" > src/index.js
mhy wds
```
### Compile library
Create a production ready library. From the `src` folder it creates a complied `dist` folder.
```bash
mhy babel ---mhy-env=prod
```
### Build bundle
Create a production ready bundle for you website/app using pre-configured **Webpack**. From the `src` folder it creates a `build` folder with your bundle ready to be served supporting many popular features/loaders.
```bash
mhy webpack --mhy-env=prod
```
### Start the default ecosystem
It'll run Jest, Webpack Dev Server, TypeScript compiler, Storybook at once in a single Terminal UI (TUI).
```bash
mhy
```
## Supported packages
`mhy` is providing many common/popular packages \_out-of-the\_box. There are continuous adjustments being made to the includes to match the most common needs and being able to develop without the need of your own `npm install` command ever again.
## Contributors ✨
| 
Andy1210
🐛 ⚠️
| 
Pablo Henrique
📖
| 
Eugen Guriev
💻
| 
Fabian Lauer
💻
| 
Thomas Winckell
💻 📖
| 
Steven Mitts
📖
| 
Zakhar
💻 📖
|
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
Andor Polgar
💻
| 
Andrei Bunulu
💻
| | | | | |
❤ Thank you all! ❤
## Credits ❤
I'm using Webpack's logo to build an `M` shape from multiple blocks. I'd like to say **Thank You** for their great logo.
I also would like to thank to every developer's hard work which I'm using as a dependency in `mhy`. It would be really hard to collect all those people, but in case you find your work in our `package.json`, please feel free to create a pull request and add your logo and link.
| |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
wintercounter
while(!credits.length)
console.log('Example')
|
***
🌟 PLEASE STAR THIS REPO IF YOU FOUND SOMETHING INTERESTING! 🌟