• This repository has been archived on 06/Jan/2021
  • Stars
    star
    6,313
  • Rank 6,317 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ”€ Cross platform setting of environment scripts

cross-env πŸ”€

Run scripts that set and use environment variables across platforms

🚨 NOTICE: cross-env still works well, but is in maintenance mode. No new features will be added, only serious and common-case bugs will be fixed, and it will only be kept up-to-date with Node.js over time. Learn more


Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct

The problem

Most Windows command prompts will choke when you set environment variables with NODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there's a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%.

This solution

cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it's running on a POSIX system, and cross-env will take care of setting it properly.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev cross-env

WARNING! Make sure that when you're installing packages that you spell things correctly to avoid mistakenly installing malware

NOTE : Version 7 of cross-env only supports Node.js 10 and higher, to use it on Node.js 8 or lower install version 6 npm install --save-dev cross-env@6

Usage

I use this in my npm scripts:

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

Ultimately, the command that is executed (using cross-spawn) is:

webpack --config build/webpack.config.js

The NODE_ENV environment variable will be set by cross-env

You can set multiple environment variables at a time:

{
  "scripts": {
    "build": "cross-env FIRST_ENV=one SECOND_ENV=two node ./my-program"
  }
}

You can also split a command into several ones, or separate the environment variables declaration from the actual command execution. You can do it this way:

{
  "scripts": {
    "parentScript": "cross-env GREET=\"Joe\" npm run childScript",
    "childScript": "cross-env-shell \"echo Hello $GREET\""
  }
}

Where childScript holds the actual command to execute and parentScript sets the environment variables to use. Then instead of run the childScript you run the parent. This is quite useful for launching the same command with different env variables or when the environment variables are too long to have everything in one line. It also means that you can use $GREET env var syntax even on Windows which would usually require it to be %GREET%.

If you precede a dollar sign with an odd number of backslashes the expression statement will not be replaced. Note that this means backslashes after the JSON string escaping took place. "FOO=\\$BAR" will not be replaced. "FOO=\\\\$BAR" will be replaced though.

Lastly, if you want to pass a JSON string (e.g., when using ts-loader), you can do as follows:

{
  "scripts": {
    "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} node some_file.test.ts"
  }
}

Pay special attention to the triple backslash (\\\) before the double quotes (") and the absence of single quotes ('). Both of these conditions have to be met in order to work both on Windows and UNIX.

cross-env vs cross-env-shell

The cross-env module exposes two bins: cross-env and cross-env-shell. The first one executes commands using cross-spawn, while the second one uses the shell option from Node's spawn.

The main use case for cross-env-shell is when you need an environment variable to be set across an entire inline shell script, rather than just one command.

For example, if you want to have the environment variable apply to several commands in series then you will need to wrap those in quotes and use cross-env-shell instead of cross-env.

{
  "scripts": {
    "greet": "cross-env-shell GREETING=Hi NAME=Joe \"echo $GREETING && echo $NAME\""
  }
}

The rule of thumb is: if you want to pass to cross-env a command that contains special shell characters that you want interpreted, then use cross-env-shell. Otherwise stick to cross-env.

On Windows you need to use cross-env-shell, if you want to handle signal events inside of your program. A common case for that is when you want to capture a SIGINT event invoked by pressing Ctrl + C on the command-line interface.

Windows Issues

Please note that npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that, then you need to update your .npmrc to set the script-shell to powershell. Learn more here.

Inspiration

I originally created this to solve a problem I was having with my npm scripts in angular-formly. This made contributing to the project much easier for Windows users.

Other Solutions

  • env-cmd - Reads environment variables from a file instead
  • @naholyr/cross-env - cross-env with support for setting default values

Issues

Looking to contribute? Look for the Good First Issue label.

πŸ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

πŸ’‘ Feature Requests

This project is in maintenance mode and no new feature requests will be considered.

Learn more

Contributors ✨

Thanks goes to these people (emoji key):


Kent C. Dodds

πŸ’» πŸ“– πŸš‡ ⚠️

Ya Zhuang

πŸ”Œ πŸ“–

James Harris

πŸ“–

compumike08

πŸ› πŸ“– ⚠️

Daniel RodrΓ­guez Rivero

πŸ› πŸ’» πŸ“–

Jonas Keinholz

πŸ› πŸ’» ⚠️

Hugo Wood

πŸ› πŸ’» ⚠️

Thiebaud Thomas

πŸ› πŸ’» ⚠️

Daniel Rey LΓ³pez

πŸ’» ⚠️

Amila Welihinda

πŸš‡

Paul Betts

πŸ› πŸ’»

Turner Hayes

πŸ› πŸ’» ⚠️

Suhas Karanth

πŸ’» ⚠️

Sven

πŸ’» πŸ“– πŸ’‘ ⚠️

D. NicolΓ‘s Lopez Zelaya

πŸ’»

Johan Hernandez

πŸ’»

Jordan Nielson

πŸ› πŸ’» ⚠️

Jason Cooke

πŸ“–

bibo5088

πŸ’»

Eric Berry

πŸ”

MichaΓ«l De Boey

πŸ’»

Lauri Eskola

πŸ“–

devuxer

πŸ“–

Daniel

πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

Note: this was added late into the project. If you've contributed to this project in any way, please make a pull request to add yourself to the list by following the instructions in the CONTRIBUTING.md

LICENSE

MIT

More Repositories

1

match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript
TypeScript
3,719
star
2

advanced-react-patterns

This is the latest advanced react patterns workshop
JavaScript
2,885
star
3

babel-plugin-macros

🎣 Allows you to build simple compile-time libraries
JavaScript
2,622
star
4

react-hooks

Learn React Hooks! 🎣 βš›
JavaScript
2,550
star
5

bookshelf

Build a ReactJS App workshop
JavaScript
2,533
star
6

kentcdodds.com

My personal website
MDX
2,143
star
7

use-deep-compare-effect

πŸ‹ It's react's useEffect hook, except using deep comparison on the inputs, not reference equality
TypeScript
1,726
star
8

mdx-bundler

🦀 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
JavaScript
1,702
star
9

react-performance

Let's make our apps fast ⚑
JavaScript
1,557
star
10

advanced-react-patterns-v2

Created with CodeSandbox
JavaScript
1,499
star
11

testing-workshop

A workshop for learning how to test JavaScript applications
JavaScript
1,363
star
12

babel-plugin-preval

🐣 Pre-evaluate code at build-time
TypeScript
1,357
star
13

advanced-react-patterns-v1

The course material for my advanced react patterns course on Egghead.io
HTML
1,092
star
14

react-testing-library-course

Test React Components with Jest and React Testing Library on TestingJavaScript.com
JavaScript
1,004
star
15

testing-react-apps

A workshop for testing react applications
JavaScript
977
star
16

kcd-scripts

CLI toolbox for common scripts for my projects
JavaScript
870
star
17

stop-runaway-react-effects

πŸƒ Catches situations when a react use(Layout)Effect runs repeatedly in rapid succession
JavaScript
788
star
18

netlify-shortener

Your own free URL shortener with Netlify
JavaScript
778
star
19

beginners-guide-to-react

The Beginner's Guide To ReactJS
HTML
757
star
20

react-suspense

React Suspense workshop
JavaScript
746
star
21

old-kentcdodds.com

Kent's Homepage
JavaScript
736
star
22

ng-stats

Little utility to show stats about your page's angular digest/watches.
JavaScript
657
star
23

dotfiles

Shell
510
star
24

js-testing-fundamentals

Fundamentals of Testing in JavaScript on TestingJavaScript.com
JavaScript
500
star
25

react-toggled

Component to build simple, flexible, and accessible toggle components
JavaScript
453
star
26

jest-cypress-react-babel-webpack

Configure Jest for Testing JavaScript Applications and Install, Configure, and Script Cypress for JavaScript Web Applications on TestingJavaScript.com
JavaScript
442
star
27

advanced-remix

TypeScript
393
star
28

react-testing-library-examples

Created with CodeSandbox
HTML
380
star
29

testing-node-apps

Test Node.js Backends on TestingJavaScript.com
JavaScript
365
star
30

es6-workshop

A very hands on πŸ‘ workshop πŸ’» about ES6 and beyond.
JavaScript
362
star
31

es6-todomvc

The vanillajs example converted to es6
JavaScript
353
star
32

babel-plugin-codegen

πŸ’₯ Generate code at build-time
TypeScript
347
star
33

eslint-config-kentcdodds

ESLint configuration for projects that I do... Feel free to use this!
JavaScript
338
star
34

cloc

An npm module for distributing cloc by Al Danial
JavaScript
325
star
35

asts-workshop

Improved productivity πŸ’― with the practical πŸ€“ use of the power πŸ’ͺ of Abstract Syntax Trees 🌳 to lint ⚠️ and transform πŸ”€ your code
JavaScript
295
star
36

how-jest-mocking-works

JavaScript
294
star
37

js-mocking-fundamentals

JavaScript Mocking Fundamentals on TestingJavaScript.com
JavaScript
281
star
38

webpack-config-utils

Utilities to help your webpack config be easier to read
JavaScript
262
star
39

express-app-example

How I structure Express Apps (example repo)
JavaScript
261
star
40

dom-testing-library-with-anything

Use DOM Testing Library to test any JS framework on TestingJavaScript.com
JavaScript
217
star
41

learn-react

Learn React with a laser focused, guided approach.
JavaScript
213
star
42

the-webs-next-transition

TypeScript
211
star
43

modern-react

workshop about React's hottest new features in 16.7.0
JavaScript
207
star
44

react-jest-workshop

JavaScript
199
star
45

react-github-profile

JavaScript
199
star
46

react-ava-workshop

🐯 A workshop repository for testing React βš› with AVA πŸš€ --> slides
JavaScript
192
star
47

api-check

VanillaJS version of ReactJS propTypes
JavaScript
191
star
48

starwars-names

Get a random Star Wars name
JavaScript
185
star
49

import-all.macro

A babel-macro that allows you to import all files that match a glob
JavaScript
177
star
50

remix-todomvc

An Implementation of TodoMVC with Remix
TypeScript
172
star
51

rtl-css-js

RTL for CSS in JS
JavaScript
162
star
52

react-workshop-app

An abstraction for all my React workshops
TypeScript
144
star
53

generator-kcd-oss

A yeoman generator for my open source modules
JavaScript
140
star
54

remix-workshop

TypeScript
133
star
55

issue-template

A way for github projects to make templates for github issues.
JavaScript
131
star
56

react-hooks-and-suspense-egghead-playlist

This is the code for the egghead playlist "React Hooks and Suspense"
JavaScript
128
star
57

modern-javascript

Get up to speed on the latest, most useful JavaScript features to level up your programming
JavaScript
123
star
58

kcd-discord-bot-v1

The bot for the KCD discord community
TypeScript
123
star
59

app-dev-tools

An example of how to create and hook up App DevTools to improve your development productivity of your application
JavaScript
122
star
60

preval.macro

Pre-evaluate code at build-time with babel-macros
JavaScript
120
star
61

split-guide

A tool to help generate code for workshop repositories
JavaScript
108
star
62

kcd-learning-clubs-ideas

πŸ“ Ideas for curriculum and schedule templates for KCD Learning Clubs
106
star
63

simply-react

JavaScript
104
star
64

nps-utils

Utilities for http://npm.im/nps (npm-package-scripts)
JavaScript
101
star
65

glamorous-website

This is still a work in progress
JavaScript
98
star
66

jest-glamor-react

Jest utilities for Glamor and React
JavaScript
98
star
67

react-hooks-pitfalls

The slides and code examples for my talk "React Hook Pitfalls"
JavaScript
94
star
68

webpack-validator-DEPRECATED

Use this to save yourself some time when working on a webpack configuration.
JavaScript
93
star
69

onewheel-blog

TypeScript
90
star
70

remix-tutorial-walkthrough

I live streamed working through the Remix Jokes App Tutorial
TypeScript
87
star
71

rebase-and-merge

Making this a reality ☞
JavaScript
82
star
72

managing-state-management-slides

79
star
73

css-in-js-precompiler

WORK IN PROGRESS: Precompiles CSS-in-JS objects to CSS strings
JavaScript
72
star
74

create-react-app-react-testing-library-example

JavaScript
67
star
75

10-practical-js-features

JavaScript
67
star
76

rename-gh-to-main

JavaScript
67
star
77

full-stack-components

TypeScript
66
star
78

fakebooks-remix

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra
TypeScript
66
star
79

cypress-testing-workshop

A workshop for learning how to write cypress tests
JavaScript
65
star
80

prettier-eslint-atom

DEPRECATED IN FAVOR OF prettier-atom + ESLint integration
JavaScript
64
star
81

repeat-todo

A simple app I made for my wife
JavaScript
63
star
82

why-react-hooks

Talk about React hooks
JavaScript
62
star
83

codegen.macro

JavaScript
61
star
84

talks

A repo with links to talks that I've given
59
star
85

quick-stack

TypeScript
57
star
86

binode

JavaScript
57
star
87

airtable-netlify-short-urls

There's a simpler version using Netlify redirects instead of Airtable here
JavaScript
57
star
88

fully-typed-web-apps-demo

TypeScript
53
star
89

argv-set-env

Set environment variables in npm scripts
JavaScript
52
star
90

react-test-context-provider

A function that allows you to specify context to pass to a child component (intended for testing only).
JavaScript
48
star
91

concurrent-react

React Suspense Egghead course
JavaScript
47
star
92

incremental-react-router-to-remix-upgrade-path

JavaScript
46
star
93

remix-mdx

JavaScript
45
star
94

setup-prettier

JavaScript
44
star
95

podcastify-dir

Take a directory of audio files and syndicate them with an rss feed
JavaScript
42
star
96

aha-programming-slides

JavaScript
42
star
97

workshop-setup

Verify and setup a repository for workshop attendees
JavaScript
42
star
98

jest-esmodules

JavaScript
40
star
99

typing-for-kids

A little app I made for my kids for Christmas :)
JavaScript
40
star
100

react-suspense-simple-example

JavaScript
39
star