# @zhupengji/create-config

> frontend pages'configuration files generator

Latest version **1.2.1** (published 2025-06-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zhupengji/create-config
pnpm add @zhupengji/create-config
yarn add @zhupengji/create-config
bun add @zhupengji/create-config
```

Provides the command `create-config`.

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2025-06-24 |
| First published | 2022-09-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zhupengji |
| Keywords | configuration, deploy, API_URL |

## Links

- npm: https://www.npmjs.com/package/@zhupengji/create-config
- npm.io page: https://npm.io/package/@zhupengji/create-config

## Dependencies (6)

- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [dotenv](https://npm.io/package/dotenv.md) ^16.0.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.1.0
- [commander](https://npm.io/package/commander.md) ^9.4.0
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^9.0.0
- [standard-version](https://npm.io/package/standard-version.md) ^9.5.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2025-06-24
- 1.1.1 — 2025-06-24
- 1.0.3 — 2023-02-07
- 1.0.2 — 2022-10-10
- 1.0.1 — 2022-09-20

## README

# create-config

CC(create-config) is a tool to generate a front-app-configuration-file for web pages' deployment.
It supports [`vite`](https://vitejs.dev/) at first priority.

![create-config](result.png)

## Get Started

```bash
npm i --save-dev create-config
```

add a quick script in `package.json`:

```json
{
  "scripts": {
    "config": "create-config"
  }
}
```

If you have a `.env` file, and there are variables starts with `VITE_`

```
VITE_XXXX=XXXX
```

After run `npm run config`, then you can find `dist/_app.config.js` contains the content:

```js
window.APP_CONFIG = {
  VITE_XXXX: "XXXX",
};
Object.freeze(window.APP_CONFIG);
Object.defineProperty(window, "APP_CONFIG", {
  configurable: false,
  writable: false,
});
```

## Usage

### For vite (Strongly recommended)

If you are using vite, you can use our `vite-plugin-create-config`:

```js
// vite.config.js
import { defineConfig } from "vite";
import { vitePluginCreateConfig } from "@zhupengji/create-config/vite-plugin-create-config";

export default defineConfig({
  plugins: [
    // ...
    vitePluginCreateConfig(),
  ],
});
```

Except generated a `dist/_app.config.js` file with `window.APP_CONFIG` definition at `dist`, this plugin would replace
`import.meta.env` content with `window.APP_CONFIG` in production automatically.

### Others (Without vite)

This is also what `vite-plugin-create-config` does. But you need to do these works by yourself if without vite.

1. Modify your html entry file manually or by tools like webpack.

```html
<script src="./_app.config.js"></script>
```

2. Using global config data in condition.

```js
function getGlobalConfig() {
  if (process.env.NODE_ENV === "production") return window["APP_CONFIG"];
  // ... otherwise
}
```

## Cosmiconfig

We use [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) to find your config file.

A `create-config.config.js` is expected in the root directory of your project.

Here is the default config file:

```js
module.exports = {
  CONFIG_FILE_NAME: "_app.config.js",
  CONFIG_NAME: "APP_CONFIG",
  PREFIX: "VITE_",
  OUTPUT_DIR: "dist",
  RC: "appConfig.json",
  ENV: ".env",
  ENV_PRODUCTION: ".env.production",
};
```

## Further

### Javascript API

**You will rarely to use this. It's recommended to use in the npm-scripts way.**

Use in your node code, usually at `post-build` stage. Provide the `config` object.

```js
const { createConfig } = require("create-config");

createConfig({
  config: {
    config_api_url: "http://localhost:8080",
  },
});
```

#### options

| key            | default            | description                                    |
| -------------- | ------------------ | ---------------------------------------------- |
| config         | -                  | required                                       |
| output         | `"dist"`           | -                                              |
| configName     | `"APP_CONFIG"`     | -                                              |
| configFileName | `"_app.config.js"` | -                                              |
| prefix         | `"VITE_"`          | case sensitive; if you use vite, maybe `VITE_` |
| packageName    | -                  | `npm_package_name + npm_package_version`       |

### CLI

We provided a CLI for convenience when using `npm-scripts`.

Here is the options(you can get the list by `npx create-config --help`):

```
  -o, --output <string>            output directory where to put the generated file (default: "dist")
  -f, --config-file-name <string>  filename of the generated file (default: "_app.config.js")
  -n, --config-name <string>       the key name of global(window) (default: "APP_CONFIG")
  -x, --prefix <string>            only keys start with the prefix would be preserved (default: "VITE_")
  -h, --help                       display help for command
  -v, --verbose                    verbose mode: show specific settings from rc file
```

### Without `dotenv`

It's recommended to use `dotenv`, which is used widely in modern front-end dev environments.
We automatically read configs from your `.env.production | .env` file.

Besides, there is one more way without `dotenv`. A `appConfig.json` at root is also available.

```
| - appConfig.json
| - .env.production
| - .env
```

---
_Source: https://npm.io/package/@zhupengji/create-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._