When I started with my first web app years ago I soon ended up using a lot of tools. Like Babel for transpiling my next level JS. Or Webpack for bundling my code. And then I wanted to use a linter. And tests for sure!
Configuring these tools can be very tricky and time consuming. And once I maintained a couple of apps, I started copying all config files over and over again. It soon became quite difficult to manage.
Confy abstracts away the configuration of these tools. It comes with some opinionated defaults, but all configurations can be adjusted and extended on a project level. Without "ejecting".
The following tools are included in the @confy/core package:
- Babel
- ESLint
- Prettier
- Webpack
- Jest
Confy offers ready-to-use presets for the following setups:
- React (@confy/preset-react)
- TypeScript (@confy/preset-typescript)
- Sass/SCSS (@confy/preset-sass)
👉 Confy requires
Node >=8.6withNPM >=5.6orYarn >=1.0
When you want to set up a new app in an empty folder, you can use @confy/cli by running:
npx @confy/cli init react
This will set up your new project with all tools mentioned above and additionally pre-configured for usage with React.
💡 Confy CLI will automatically use Yarn when it's available, otherwise NPM. With
--install=npmyou can manually set the installer.
Install @confy/core to your project's devDependencies:
npm i --save-dev @confy/core
// or
yarn add -D @confy/core
The core package provides a CLI, that you can call in your NPM scripts:
// package.json
{
"scripts": {
"init": "confy-core init --env=development",
"start": "confy-core start --env=development",
"build": "confy-core build --env=production",
"test": "confy-core test --env=test",
"config": "confy-core show-config --env=development"
}
}npm run init will generate IDE related config files in your project, like .eslintrc or .prettierrc. These will also be updated when you run the other scripts.
By running npm start you can start the Webpack DevServer with the default Confy settings. Make sure your app matches these settings or otherwise adjust them to your needs.
💡 The @confy/core package has a more detailed command list.
You can use one or more presets in your Confy project.
If you want to add support for TypeScript for example, you need to a add the preset to your devDependencies:
npm i --save-dev @confy/preset-typescript
// or:
yarn add -D @confy/preset-typescript
Next, add the name of the preset to your project's .apprc.js file:
// .apprc.js file in your project root folder
module.exports = {
presets: ['typescript'],
};Finally you should npm run init, to update config files for your IDE.
👍 You can now compile
.tsfiles in your project.
If you want to change the default config, you can do that in the .apprc.js file in your project root folder.
// basic outline of .apprc.js
module.exports = {
presets: [], // like 'react', 'typescript', 'my-custom-git-preset'
options: {
srcDir: 'src',
entryFiles: ['index.js'], // relative to srcDir
htmlTemplate: 'index.html', // relative to srcDir
// a few more ...
},
addons: (config) => ({
babel: {/* adjust babelrc */},
eslint: {/* adjust eslintrc */},
prettier: {/* adjust prettierrc */},
}),
runners: (config) => ({
webpack: {/* adjust webpack.config.js */},
jest: {/* adjust jest.config.js */},
}),
};💡 You can find a list of all available options in the @confy/core package.
In the concept of Confy not all tools are handled equally. They are divided in addons and runners. If you define these properties as functions, they will receive the current config object. This means the addons will receive { options } and the runners receive { options, addons }.
The reason for this is related to how Confy merges multiple configurations from presets to your own app.
💡 You can read more about it in the @confy/core package, if you want to.
A preset source must contain a valid package.json in order to be installable by NPM.
It can contain an extended configuration for Confy by providing a root
apprc.js file.
You can also use a preset for project boilerplating.
If your preset contains a root folder /boilerplate, then all the content inside will be copied
to your project root upon initialization (CLI only). Sub directory structures included.
Here's a basic file structure of how a preset can look:
/
boilerplate/
src/
index.js
apprc.js
package.json
Using NPM presets: Preset names get resolved internally by prefixing @confy/preset-.
Therefore a preset name like react is resolved and installed as @confy/preset-react.
☝ If you want to publish an NPM Confy preset, please create a PR for now.
Using Git presets: When using a preset from Git directly, the repository name needs to match the name in the preset's package.json.
So when using an url like git://github.com/user/some-preset.git
the package name should be some-preset.
Every solution that abstracts configuration has its limitations. So does Confy:
- Confy provides configurations for front-end web apps right now. If you want to use it to create a library or a Node server app, this might be an issue.
- kcd-scripts might be a good alternative for library use cases.
- Server apps with Confy is something that may come in the future.
- Confy doesn't write out the config files for runners, like
webpack.config.js. So if you rely on your IDE reading and using these files, this might be an issue. - The list of tools that Confy uses at its core is not extendable. This means you can not add another tool to the stack. You can only configure the existing core tools for now. So if you want to bundle with Rollup or use Mocha for your tests, this might be an issue.
There will be more limitations! Please file an issue, if you find one.
Confy is inspired by these awesome projects:
kcd-scripts
create-react-app
preact-cli
MIT