CODEWITHSUNDEEP
githubenvironment-variablescreate-react-appyarnpkggithub-actions
rafaljusiak
rafaljusiak

Reputation: 1090

Inject .env.local file or custom set of environment variables to yarn build in Github Actions

I have a github action which is building the React app (based on create-react-app) and deploying it to AWS S3. I have to pass some environment variables to correctly run yarn build command.

I could hold them directly in .env file, but I don't want to hold them inside the repository. Currently I'm just adding environment variables right before the yarn build command, but it's annoying solution and seems to be a bit hacky. Ideally, I'd like to inject .env.local file with my own configuration, but I don't have any good idea how to do it.

Here's my build.yml file:

name: Build
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.13.1]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Yarn install
        run: yarn install
      - name: Build
        run: REACT_APP_GRAPHQL_URL=https://some.url/graphql CI=false yarn build
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --delete
        env:
          AWS_S3_BUCKET: my-bucket-name
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
          SOURCE_DIR: "build"

So as you can see the magic happens here:

run: REACT_APP_GRAPHQL_URL=https://some.url/graphql CI=false yarn build

How can I make it look nicer? It's quite ok when I have two variables, but what if I'll have dozens of them?

By the way - it's a private repository, if it makes any difference. And I don't want to use another CI solution, currently Github Actions seems to be enough for me.

Upvotes: 0

Views: 4817

Answers (1)

Agung Widhiatmojo
Agung Widhiatmojo

Reputation: 169

you can do magic like this,

name: Build
on:
  push:
    branches:
      - master
env: 
  CI : false
  REACT_APP_GRAPHQL_URL : https://some.url/graphql 
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.13.1]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Yarn install
        run: yarn install
      - name: Build
        run: yarn build
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --delete
        env:
          AWS_S3_BUCKET: my-bucket-name
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
          SOURCE_DIR: "build"

I think it makes look nicer

Upvotes: 2

Related Questions