@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