craco-plugin-env

An environment plugin for craco

Usage no npm install needed!

<script type="module">
  import cracoPluginEnv from 'https://cdn.skypack.dev/craco-plugin-env';
</script>

README

Installation

First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Then install craco-plugin-env:

$ yarn add craco-plugin-env -D

# OR

$ npm i craco-plugin-env -D

Usage

Add the plugin into your craco.config.js.

/* craco.config.js */

const CracoEnvPlugin = require('craco-plugin-env')

module.exports = {
  plugins: [
    {
      plugin: CracoEnvPlugin,
      options: {
        variables: {}
      }
    }
  ]
}

Configuration

You can pass an options object to configure the plugin.

  • options.variables
    • Default: {}
    • Custom additional environment variables. For more detailed env parsing rules, please refer to the documentation of dotenv.

Mode

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

You can overwrite the default mode used for a command by passing the --mode option flag. For example, if you want to use development variables in the build command:

/* package.json */

"scripts": {
    "start": "craco start",
    "build": "craco build",
+   "build:dev": "craco build --mode development"
}

You can refer to the documentation of Vue CLI.