zero-configuration

Many web development projects often contain numerous configuration files in the project's root directory, with little to no actual source code. While many plugins nowadays require configuration files, this plugin aims to generate them without the necessity of committing anything to the source code.

- No configuration files in your source code.
- Support for gitignore, TypeScript, ESLint, Prettier, Biome, VS Code, Playwright, Cypress, Tailwind, PostCSS, babel, Metro, Drizzle, Vercel and Vitest.
- Quickly configure bundlers like Vite, Rsbuild and Farm.
- Generate boilerplate before publishing: LICENSE.md.
- JSON based configuration in package.json.
- Optional typed programmatic interface in configuration.ts.
- Recommended configurations to easily extend.
- Add your own shared configurations.

Templates

The easiest way to get started is through a template. The following templates will be installed using create-now and are taken from the /template directory in this repository. The first argument specifies the destination directory and the second the template to pick.

``sh
bun create now zero-configuration # Default template (React app built and served with Bun)
bun create now zero-configuration . web # Fully featured React application using Rsbuild
bun create now zero-configuration . epic # EPIC Framework (experimental React alternative)
bun create now zero-configuration . plugin-bun # TypeScript plugin
bun create now zero-configuration . plugin-react # Plugin with JSX
bun create now zero-configuration . server # Elysia & drizzle server with eipiai routes
bun create now zero-configuration . desktop # Electron desktop application
bun create now zero-configuration . mobile # React Native mobile application for Android and iOS

Instead of the "." (current folder) you can also specify any other directory:


bun create now zero-configuration ./my-react-rsbuild-app web
`

Integration and Usage

Add the plugin to an existing project using bun install zero-configuration. In your package.json list the configurations you would like to have added.

`json
{
"name": "my-web-application",
"configuration": {
"biome": "recommended"
}
}
`

Run bunx zero-configuration to create the necessary configuration files in your project. The files themselves will automatically be added to the .gitignore file, so there is never a need to edit or commit the whole configuration files with all the boilerplate in them. To automatically add the configurations during installation add the plugin as a trustedDependency.

`json
{
"name": "my-web-application",
"trustedDependencies": ["zero-configuration"]
}
`

When using the automatic Vercel build cache postinstall will only be called if the dependency has updated. To ensure your project is ready after installation use bun install && bunx zero-configuration as the Install Command.

Configuration

In general there are four ways to add a configuration for any supported tool. The first is to simply enable the default configuration by setting it to true. The second is to use one of the suggested configurations included with this plugin. The third is to extend a shared configuration from your dependencies. The fourth, which can be combined with the first two, is to add write your own configuration specific to this project.

`ts
// configuration.ts
export const eslint = true
export const prettier = 'recommended'
export const biome = '@my-company/shared-configurations/biome'
export const typescript = {
compilerOptions: {
lib: ['ES2020', 'DOM']
}
}
// Generate multiple files.
export const tsconfig = [
{
extends: 'recommended'
},
{
extends: 'web',
folder: 'test/demo', // <= Specify folder!
compilerOptions: { skipLibCheck: false }
},
{
extends: 'react-native',
folder: 'app'
}
]
`

$3

`ts
export const typescript = true | 'recommended' | 'plugin' | 'web' | 'server' | { extends: 'web', include: ['index.tsx' ] }
export const tsconfig // Alias for typescript
export const biome = true | 'recommended' | 'ninja' | 'test' | 'server' | { extends: 'recommended', files: { ignore: ['demo'] } }
export const eslint = true | 'recommended' | [{ rules: { semi: 'error' } }]
export const prettier = true | 'recommended' | { extends: 'recommended', printWidth: 140, ignore: ['test/fixture'] }
export const vscode = true | 'biome' | 'prettier-eslint' | { settings: { ... }, extensions: { ... } } | { settings: { 'editor.defaultFormatter': 'biomejs.biome' } }
export const playwright = object | File
export const vite = object | File
export const rsbuild = object | File
export const farm = object | File
export const next = object | File
export const vitest = object | File
export const cypress = object | File
export const tailwind = object | File
export const postcss = object | File
export const babel = object | File (JavaScript only)
export const metro = object | 'react-native' | File (JavaScript only)
export const reactNative = object | File
export const drizzle = 'basic' | object | File
export const vercel = 'spa' | 'SPA' | 'single-page-application' | 'spa-routes' | 'github-silent' | { extends: 'spa', routes: { ... }}
export const license = 'recommended' | 'MIT' | 'mit' | 'public' | 'cc0' | 'commercial' | 'ccbync4' | { extends: 'MIT', authors: [{ name: 'Anyone' }, { name: 'Someone', year: 2022 }]}
export const ignore = true | 'recommended' | 'bundle' | 'numic' | string[] | ['extends:bundle', ...]
export const gitignore = // Alias for ignore
`

For any configuration it also passible to pass an array to generate multiple files. Using the folder` property the destination of the configuration file can be set.