CODEWITHSUNDEEP
reactjsbitbucketbitbucket-pipelines
Zain Khan
Zain Khan

Reputation: 1814

Bitbucket pipelines not getting env variables

I'm using Bitbucket pipelines to deploy my react app to the s3 bucket, deployments work fine but unfortunately, my process.env variables are undefined. I already add my all env variables in deployment variables.

bitbucket-pipeline.yml:

image: node:14

pipelines:
  branches:
    master:
      - parallel:
        - step:
            name: Build and Test
            caches:
              - node
            script:
              - rm -rf package-lock.json
              - npm install
              - npm rebuild node-sass
              - CI=false npm run build:prod
            artifacts:
              - build/**
        - step:
            name: Security Scan
            script:
              # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
              - pipe: atlassian/git-secrets-scan:0.5.1
      - step:
          name: Deploy to Production
          deployment: Production
          trigger: manual
          clone:
            enabled: false
          script:
            # sync your files to S3
            - pipe: atlassian/aws-s3-deploy:1.1.0
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
                S3_BUCKET: $S3_BUCKET
                LOCAL_PATH: 'build'

build script in package.json

"build": "env-cmd -f .env.prod react-scripts build",

.env.prod

REACT_APP_BASE_URL=http://myurl/api

App.js

import { useEffect } from "react";
import axios from 'axios'

const App = () => {

    const getData = async () => {
        console.log("base url: ", process.env.REACT_APP_BASE_URL); // it is undefined
        const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/api/users`);
        console.log("response: ", response)
    }

    useEffect(() => {
        getData();
    }, [])

    return <h1>My Component</h1>
};
}

The problem is when I run npm run build locally so the build holds all the env variables from .env.prod because the file that file exists in my local machine but in the pipe line I put the all .env.prod env variables inside deployment variables but unfortunately all the env variables are undefined

Upvotes: 2

Views: 7408

Answers (2)

Chris
Chris

Reputation: 136968

React runs in the user's web browser and therefore does not have access to environment variables running on the server. They are different environments.

You can embed environment variables in your app at build time:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

The "at build time" part of this is important. To include and use your REACT_APP_BASE_URL variable in your app, make sure to define it in a way your "Build and Test" step can see.

Assuming you have defined that variable for the Production deployment environment, make sure to use that environment for the build step:

- step:
  name: Build and Test
  # Add this
  deployment: Production
  caches:
    - node
  script:
    - rm -rf package-lock.json
    - npm install
    - npm rebuild node-sass
    - CI=false npm run build:prod
  artifacts:
    - build/**

Upvotes: 2

Zain Khan
Zain Khan

Reputation: 1814

In my case, with the help of Chris I solved it by adding all environment variables inside repository variables

Upvotes: 0

Related Questions