reactjs - Gitlab CI/CD script, how to add a new .js file/replace contents of a .js file during deployment?

Question

I'm following a build once, deploy everywhere process in my react code. That means for each environment type, the build is created once and first. Deployment is the next step. Now to define env variables what's suggested is to have three .js config files (which contain js env variables) inside the root/environment folder from which we select one file at the deployment script and somehow add the contents of this file to the root of the /build folder. So only one config file is used inside the build (the one which we specify during the deployment script). Is there any useful command to follow in the script to achieve this? So a new file lets say called config_env.js is created inside the build which can then be used to set env variables in the build.

//Config (Env)
root/environment
>development.js
const env = 'development';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

>qa.js
const env = 'qa';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

>production.js
const env = 'production';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

//Pipeline code
build-static-pages:
  stage: build
  # image for running Docker in Docker
  image: node
  script:
    # build the static pages with NPM
    - npm ci --production
    - npm run-script build
    - echo `${CI_PROJECT_DIR}/get_component_version.py` > ${BUILD_DIR}/ver.txt
    - ls -alF ${BUILD_DIR}
  artifacts:
    paths:
    - ${BUILD_DIR}
    expire_in: 2 weeks

.publish-s3-dev:
  stage: deploy-dev
  image: python:3
  script:
    # todo: consider using CloudFormation or the s3_website gem
    # configure the build with env variables
    # install AWS CLI
    - pip install awscli
    # push to S3
    - aws s3 cp --recursive ${CI_PROJECT_DIR}/${BUILD_DIR} s3://${FORESIGHT_DEV_BUCKET}
  environment:
    name: dev
    url: http://d2mo71maq8qx66.cloudfront.net

How I used to statically insert env variables before at deployment script.

 echo "const baseURL = '${APIURL}';
" >> ${BUILD_DIR}/env_config.js

Answer 1

The sed command will allow you to edit the contents of a file on a *nix system. For example, to change the text HELLO to WORLD everywhere it appears in the file example.txt: sed -i "s/HELLO/WORLD/g" example.txt

Leave off the g at the end and add the line number before the s if you want to replace it at a specific line: sed -i "34s/HELLO/WORLD/" example.txt

The -i is "inline", so it will edit the file you specify.

Here's how I use this in my pipelines:

I have an empty env file that has the structure you need, but without the values. For my use case, it looks something like this:

DB_HOST={{DB_HOST}}
DB_PORT=3306
DB_USER={{DB_USER}}
DB_PASSWORD={{DB_PASSWORD}}

In a qa job, it might look like this:

sed -i "s/{{DB_HOST}}/${QA_DB_HOST}/g" config.js
sed -i "s/{{DB_USER}}/${QA_DB_USER}/g" config.js
sed -i "s/{{DB_PASSWORD}}/${QA_DB_PASSWORD}/g" config.js

where the ${} values are Gitlab CI variables in your project's CI settings.