# @meniga/cli

@meniga/cli is a command line tool for transpiling code using webpack and babel but has also some other useful features to help during development of web applications using React. 

This should help developers start a project quickly with minimal config.

A lot of commands have two variants one for apps and another for packages depending on if you are running a monorepo or not.

## Getting started

---

Your applications should at least have the following file structure
```
.
├── app/
│   ├── configs/
├── index.js
├── package.json
``` 

Inside the app folder you should place all the application source code to run. 
index.js is the main entry point for the application. 

Install @meniga/cli as a dev dependency

```
yarn add @meniga/cli --dev
```
After it is installed you should be able to run the `dr` commands, use the `dr --help` to get list of all commands, and `dr [command] --help` to get details about a specific command, example: 

```
dr dev --help
```

### For develoment

If you want to run a development environment you can use the following command.
It will serve up your app on port 9000 using root `index.js` as an entry point
```
dr dev
```

Another useful command is `dr clean`. It will clean your repositiory of installed dependancies (node_modules) and
is specially useful when working in a monorepo. 

### For production

If you want to create a production build you can use the build command and it will output to a `_dist` folder in you application all you 
transpiled code and other resources needed
```
dr build
```

After a successfull build you can use the `dr serve` command to test out the build in a browser. 

## Working in a monorepo / workspaces

---

This tool is specially useful if working inside a monorepo. 
The folder structure should look something like this

```
.
├── apps/
│   ├── application1/
│   ├── application2/
├── packages/
│   ├── package1/
│   └── pacakge2/
│   └── pacakge3/
├── lerna.json
├── package.json
```

Working with this setup is similar to when not using monorepo, but you run the `init` command to link all packages together

```
yarn add @meniga/cli --dev
dr init
``` 
Then you should be able to go to any app folder and run `dr dev` or `dr build` to start the application

Many commands run differently depending on if you are inside the root of a monorepo. Internally we use lerna to handle 
a lot of the monorepo commands. We check if it is a monorepo by checking if there is a lerna.json file present.
If it is not we run a normal version of the command. More info on the lerna.json file can be found [here](https://github.com/lerna/lerna#lernajson)

## Config

---

**@meniga/cli** expects a `configs` folder inside the `app` folder. There you can place all the config files needed for the system. 
During build **@meniga/cli** will create a config.js file in your artifact where it is all merged to one big config object that 
**@meniga/config** can read from.

By default it reads all the `*.js` files in the folder and merges them to one big object. This can be overridden depending on environments.
By default it searches in the `local` folder to find matching filenames to override the files in the main config folder but this can be 
overridden by setting the `SERVER_ENV` environment variable. This can be useful if you need to create a special config for development/CI environments. 

## Webpack

---

**@meniga/cli** comes with default webpack.config to get started quickly. To override parts of it you can place 
a webpack.custom.config.js file in the root of your application. 

If used, webpack.custom.config.js should export a function and gets passed a list of useful plugins. 
The results of the function will be merged with the default webpack.config. 

```javascript
module.exports = function ({ plugins }) {
	return {
		entry: {
			Fonts: 'theme-mms/styles/fonts/fonts.less',
			Silent_renew: 'cosmic-identity/src/components/SilentRenew.js',
		},
		plugins: [
			new plugins.CosmicResolve({
				theme: THEME,
			}),
			new plugins.HtmlWebpackPlugin({
				title: 'Merchant Management System',
				favicon: resolve(__dirname, './app/assets/img/favicon-16x16.png'),
				excludeChunks: ['Silent_renew'],
				template: resolve(__dirname, 'index.html'),
				hash: true,
				meta: {
					version: pkg.version,
				},
			}),
			new plugins.HtmlWebpackPlugin({
				chunks: ['Silent_renew'],
				title: 'Identity server silent renew',
				filename: 'silent_renew.html',
				hash: false,
			}),
		],
	}
}
```

### List of plugins

* HtmlWebpackPlugin
* ExtractTextPlugin
* HtmlWebpackIncludeAssetsPlugins
* CopyWebpackPlugin
* ContextReplacementPlugin
* TerserPlugin
* CosmicResolve (internal plugin for theming @meniga/ui)

## Development

---

[Here you can find info on how to set up the development environment](../../README.md)
