CODEWITHSUNDEEP
javascriptnode.jsreactjsmaven
Developer Desk
Developer Desk

Reputation: 2344

How to set environment variable in React JS..?

I am new to React JS. I am trying to build war file from React App but stuck somewhere below. It gives me below errors.

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.



./src/Home.js
  Line 2:   'AppNavbar' is defined but never used  no-unused-vars
  Line 3:  'Link' is defined but never used       no-unused-vars
  Line 4:  'Button' is defined but never used     no-unused-vars
  Line 4:  'Container' is defined but never used  no-unused-vars

./src/App.js
  Line 5:   'MenuBar' is defined but never used        no-unused-vars
  Line 6:   'PrivilegeList' is defined but never used  no-unused-vars
  Line 8:   'logo' is defined but never used           no-unused-vars


  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] build: `react-scripts build`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] build script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

  npm ERR! A complete log of this run can be found in:
    npm ERR!     D:\ReactJS-workspace\my-app\npm\cache\_logs\2018-10-19T07_44_19_233Z-debug.log
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time: 01:36 min
    [INFO] Finished at: 2018-10-19T13:14:19+05:30
    [INFO] ------------------------------------------------------------------------
    [ERROR] Failed to execute goal org.codehaus.mojo:exec-maven-plugin:1.3.2:exec (npm run build (compile)) on project my-app: Command execution failed.: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
    [ERROR]
    [ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
    [ERROR] Re-run Maven using the -X switch to enable full debug logging.
    [ERROR]
    [ERROR] For more information about the errors and possible solutions, please read the following articles:
    [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

Below is my folder structure.

enter image description here

I want to set process.env.CI = false how to set environment variable in React JS?

Upvotes: 24

Views: 80287

Answers (12)

Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 2672

You have to create .env file in the root directory and define variable in that file. Please make sure each variable starts with REACT_APP_ like REACT_APP_IS_PROD=1

You have to restart the server every time when you change or create a new variable.

Reference

Upvotes: 2

Simon Hutchison
Simon Hutchison

Reputation: 3035

Github Actions

Trying to build and upload website using Github actions?

Maybe you want to create a file in your Github repo \.github\workflows\deploy.yaml and add something like this.

name: Upload Website

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Upload Website - deploy
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Load AWS credentials from Github Secrets
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Load dependencies (node_modules)
        run: yarn

      - name: Build site
        run: yarn build
        env:
          CI: false

      - name: Copy files to S3
        run: |
          aws s3 sync ./build s3://my-s3-website-bucket --delete --exclude "*.map" --acl public-read

      - name: Clear Cloudfront cache
        run: |
          aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_DIST_ID }}--paths "/*"

References:

Upvotes: 0

Umang Soni
Umang Soni

Reputation: 551

You can set environment variables in .env file

Here are the steps

  1. create a file with the name of .env in the project root folder

  2. Now, at the time to add a variable you have to add prefix REACT_APP for e.g: You want to add API_URL variable for your API. So you have to add a variable with prefix RECT_APP as below

    REACT_APP_API_URL

  3. Stop your running server and re-run using npm start

  4. To access env variable you have to call like: process.env.REACT_APP_API_URL

Here you go. Now you can access the env variable

Note:

  1. Please make sure you have added prefix (REACT_APP)
  2. Please stop your server and restart so it will load env variable if added

Upvotes: 8

Vijay Gawariya
Vijay Gawariya

Reputation: 61

For Windows

set REACT_APP_ENV=development && react-scripts start

For Linux, Ubuntu, macOs

REACT_APP_ENV=development react-scripts start

Upvotes: 1

Ashane.E
Ashane.E

Reputation: 131

Create a .env file or else .env.dev,.env.qa,.env.stg ...etc

Add the following line to that file

CI=false

if you haven't already installed env-cmd, first install it and include it in package.json

Then add the following lines inside "scripts" of package.json

  "scripts": {
    "start": "env-cmd -f .env.dev react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.dev npm run-script build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:stg": "env-cmd -f .env.stg npm run-script build",
    "build:prod": "env-cmd -f .env.prod npm run-script build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Then build using "npm run build:dev" or with the command accordingly

Upvotes: 1

Bejo Jeffrin
Bejo Jeffrin

Reputation: 59

"scripts": {
    "start": "react-scripts start",
    "build": "CI=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"  
  },

Try this ...This will set the CI to false

Upvotes: 3

timhc22
timhc22

Reputation: 7451

I arrived at this questions from searching for integration with Bitbucket Pipelines.

For anyone else looking for the same, you can add CI as false under Settings/Repository Variables for your repo (if you don't want it being part of your version controlled code).

If you want to add it for all your repos in your bitbucket, you would add in your global settings, but probably best to add this one on a repo by repo basis.

Upvotes: 0

Enda Phelan
Enda Phelan

Reputation: 119

Your question title is very different to what is happening in the description.

To use environment variables in React, they must be prefixed with REACT_APP_.

For example, the following will be picked up by a React application:

REACT_APP_API_URL=/api

Whereas this won't:

API_URL=/api

For more, please see the official documentation:

Upvotes: 11

Héctor Espí Hernández
Héctor Espí Hernández

Reputation: 900

To set it for current process execution, just edit your package.json file and modify the "build" script as follows:

"scripts": {
"start": "react-scripts start",
"build": "set \"CI=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" }

This will set CI environment variable to "false". Now you can execute the build command with CI variable set:

npm run build

Upvotes: 23

Atishay Jain
Atishay Jain

Reputation: 1445

check out this package dotenv,

  1. create a new file .env in your working directory

  2. install dotenv by npm install dotenv

  3. add this to your app require('dotenv').config()

  4. in that file write process.env.CI = false

  5. add .env to your .gitignore [if using git]

  6. restart your app.

OR run this CI=false npm run build

Upvotes: 14

Slack
Slack

Reputation: 9

It looks like you need your app to have access to process.env variables.

To do that, you have several options (one of which includes using a third party library above, which is a good option, but it's doing multiple things).

1) Set environment variables in your launch command, Example: CI=travis npm start. In this case, you'll have access to process.env.CI in your app.

2) Set environment variable in your, you know, environment. If you're on Mac or Linux, simply add an environment variable, as you normally would that your shell will export. Check with echo $VAR

3) Manually do something stupid in your app to write to globals. Probably don't bother.

4) Just use .dotenv. What it does isn't really complicated, but it offers a solution that is almost must have on most projects, for multiple reasons.

Upvotes: 0

Ashvin777
Ashvin777

Reputation: 1482

Create a file with name .eslintrc in your root folder and add below rules in that file - 

{
    "rules": {
        "no-unused-vars": "off"
    }
}

This will disable the strict check for eslint rule no-unused-vars. You can add more rules in this file if you want to disable those also.

For more details follow the guide - https://eslint.org/docs/user-guide/configuring

Upvotes: -1

Related Questions