# 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! 🌟
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://mhy.js.org/readme.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.