@meniga/cli

@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

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.json 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.

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