circleci (v2.0) using npm when yarn is the run command - reactjs

There's documentation on setting up yarn for circleci v1 but not v2 because it appears as though they've got yarn baked into the v2 api, however, in my config.yml i explicitly run yarn to install my deps yet, when i review the build logs it shows that npm is used for all my yarn commands... I obviously need to override this / install yarn? Unfortunately it appears that the v2 docs don't touch on this and my google-foo isn't being fruitful...
what's more interesting is that another one of my projects IS using yarn with almost the exact same config... what gives?
heres my current config.yml
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:7.10
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
working_directory: ~/repo
steps:
- checkout
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
# run tests!
- run: yarn test
- run: echo "ALL GOOD IN THE HOOD"
- deploy:
name: Deploy on deploy branch
command: |
if [ "${CIRCLE_BRANCH}" == "deploy" ]; then
./node_modules/.bin/firebase ...
fi

I figured out the problem. My circleci folder was misspelled. I omitted the . and it was using a default config... sigh...

Related

How to run Eslint only on changed files when a pull request is raised, in bitbucket pipelines?

We are building a bitbucket pipeline for a React Project. We have pre-commit hooks setup which does linting only on staged files.
How can I achieve the same in bitbucket pipelines, when a pull request is raised it get the diff files, and check the linting for those files only.
As described in this thread, as long as you are using a Docker node image, in which you can install and run ESLint, you should be able to add it to your BitBucket pipeline.
Make sure your pipeline is set to run only on PR:
pipelines:
pull-requests:
'**': #this runs as default for any branch not elsewhere defined
- step:
Example: bitbucket-pipelines.yml (to be tweaked to your specific project)
pipelines:
pull-requests:
'**':
- step:
name: Eslint for pull-request
image: node:12.14
condition:
changesets:
includePaths:
- resources/assets/js/**
script:
- printenv
- CAN_RUN_PIPELINE=$(test -f code_review/eslint/index.js && echo true || echo false)
- if [ "$CAN_RUN_PIPELINE" != true ]; then exit; fi
- git checkout origin/$BITBUCKET_PR_DESTINATION_BRANCH
- git merge origin/$BITBUCKET_BRANCH --no-edit
- git reset $BITBUCKET_PR_DESTINATION_COMMIT
- git add .
- git status
- npm i -g eslint
- npm install --only=dev
- npm install axios dotenv --save-dev
- eslint --format json -c code_review/eslint/rules.js -o ./code_review/eslint/output/output.json --ext .js,.jsx,.vue ./resources || true
- node ./code_review/eslint/index.js $REVIEW_AUTH_STRING

AWS Amplify Build Time Out Error: got stuck at Frontend while running gulpfile.js

I moved from manual deployment to automatic CI/CD with my Github repo, In manual deployment, it was working with out any issues. After connecting the main repo and starting the build, it's not getting completed at the Frontend provision.
I'm getting the build timeout error with 30 min default time setting and then increasing it to 120 min in environmental variables override. It's still taking so much time.
On my local machine: it just takes <5 min to build without any errors.Error log of amplify build page
I see from the build log that: after running commands in gulpfile.js, it's getting stuck.
Build Settings file:
version: 1
env:
variables:
VERSION_AMPLIFY: 8.3.0
backend:
phases:
preBuild:
commands:
- npm i -g #aws-amplify/cli#${VERSION_AMPLIFY}
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
- node ./node_modules/gulp/bin/gulp.js
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Console Error Status

Running react-snap on AWS codebuild

I have a react website that I host on AWS. I have created code pipeline in AWS that connects to my github, which automatically builds the projects using codeBuild and deploys it to S3.
I'm trying to add react-snap to the project. It works well locally but when I try to build it in codebuild I get this error
Error: Failed to launch chrome!
/codebuild/output/src159566889/src/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
at onClose (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:348:14)
at Interface.<anonymous> (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:337:50)
at Interface.emit (events.js:326:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:326:22)
at endReadableNT (_stream_readable.js:1241:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
error Command failed with exit code 1.
I have tried to google it but I didn't find anything specific to codebuild and react-snap. I have found similar questions in regards to running chrome on codebuild but they related to different environments like angular and so I wasn't able to copy their solutions.
This is what my current buildspec.yaml file looks like
version: 0.2
env:
variables:
S3_BUCKET: "xyz"
STAGE: "beta"
phases:
install:
commands:
- yarn install
build:
commands:
- echo "Building for $STAGE"
- yarn build
- sam package --template-file cloudformation/Root.json --s3-bucket ${S3_BUCKET} --s3-prefix WebsiteCF/${CODEBUILD_RESOLVED_SOURCE_VERSION} --output-template-file build/packaged-template.yaml
artifacts:
files:
- '**/*'
base-directory: 'build'
Based on the instruction on the link provided by the error, I tried adding this but it didn't work
install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install
I managed to get it working using these steps:
Make sure your AWS code builder is using aws/codebuild/standard:5.0
Go t AWS code builder -> Edit -> Environment -> Override image
Create a addArgs.sh file to your project with this content
# modifies react-snap defaultOptions to add the --no-sandbox and --disable-setuid-sandbox flags so that puppeteer/chromium can run in the codebuild standard image
sed -i "s/puppeteerArgs: \[\],/puppeteerArgs: \[\"--no-sandbox\", \"--disable-setuid-sandbox\"\],/" ./node_modules/react-snap/index.js
echo changed arguments in react-snap
To your buildspec.yml file, add these lines to the install stage
# Install chrome headless
- apt-get -y update
- apt-get --assume-yes install chromium-browser
- sh ./addArgs.sh # run custom script to change options on react-snap to make it work
I found the answer from here - https://github.com/stereobooster/react-snap/issues/122

Only execute script if branch is master in TravisCI

I'm new to TravisCI and this may be a very silly question, but I'm trying to write the travis config in a way that it only deploys to Firebase when the current branch is master.
That is, only when code is pushed to master or when a PR is merged with master, the firebase deploy command executes. The deploy command should be not be executed when other branches are pushed to, or when PRs are made.
Here's what I have so far:
language: node_js
node_js: 12.16.1
script: echo "Running travis-ci"
install:
- npm install -g firebase-tools
- npm i react-scripts
script:
- yarn add react
- yarn test
- if [ "$TRAVIS_BRANCH" = "master" ]; then yarn build; fi
- if [ "$TRAVIS_BRANCH" = "master" ]; then firebase deploy --project testproj8876 --token $FIREBASE_TOKEN; fi
branches:
only:
- master
Since I'm not too familiar with the conventions yet, any improvements/suggestions would also be greatly appreciated.
Google Firebase is supported directly by Travis. See here.
Thereby, I recommend using the solution described in the link above.
deploy:
provider: firebase
token:
secure: "YOUR ENCRYPTED token"
As for your condition, you can check one of my .travis.yml file here and the documentation there (Conditional Deployments)
The following part is what you need:
deploy:
cleanup: false
on:
branch:
- master
If you still have questions, feel free to ask.

Can I pass environment variables from Gitlab .gitlab-ci.yml to a React app?

I'm trying to set environment variables dynamically using the gitlab CI pipeline.
What I am trying to achieve is to inject the right API keys and URLs depending on the stage I am deploying to (stage, prod).
In my React app I access the variables using process.env.REACT_APP_APPSYNC_URL as decribed in the react documentation.
So far I have tried setting the variables in the gitlab UI and referencing them in my .gitlab-ci.yml file (see code below).
Unfortunately I cannot access the variables this way, so I would be very thankful for any help.
I'm just getting started on CI/CD and different environments, so if I am generally using a bad approach here please let me know!
Here's the .gitlab-ci.yml:
image: nikolaik/python-nodejs:latest
stages:
- install
- test
- deploy
install:
stage: install
script:
- npm install
- npm run build
artifacts:
untracked: true
only:
- stage
- master
test:
stage: test
dependencies:
- install
script:
- npm run test
artifacts:
untracked: true
only:
- stage
- master
deployDev:
stage: deploy
only:
- stage
dependencies:
- install
- test
script:
- pip3 install awscli
- aws configure set aws_access_key_id "$DEV_AWS_KEY"
- aws configure set aws_secret_access_key "$DEV_AWS_SECRET"
- aws s3 sync ./build/ s3://example.dev
variables:
REACT_APP_COGNITO_REGION: $DEV_COGNITO_REGION
REACT_APP_COGNITO_USER_POOL_ID: $DEV_COGNITO_USER_POOL_ID
REACT_APP_COGNITO_APP_CLIENT_ID: $DEV_COGNITO_APP_CLIENT_ID
REACT_APP_COGNITO_IDENTITY_POOL_ID: $DEV_COGNITO_IDENTITY_POOL_ID
REACT_APP_APPSYNC_URL: $DEV_APPSYNC_URL
REACT_APP_APPSYNC_REGION: $DEV_APPSYNC_REGION
REACT_APP_APPSYNC_AUTHENTIACTION_TYPE: $DEV_APPSYNC_AUTHENTIACTION_TYPE
deployProd:
stage: deploy
only:
- master
dependencies:
- install
- test
script:
- pip3 install awscli
- aws configure set aws_access_key_id "$PROD_AWS_KEY"
- aws configure set aws_secret_access_key "$PROD_AWS_SECRET"
- aws s3 sync ./build/ s3://example.com
Cheers!
This line from CRA docs is important: The environment variables are embedded during the build time. So set the variables before running build command.
image: node:10.16.0-alpine
stages:
- build
- deploy
build_app:
stage: build
script:
- export REACT_APP_SECRET_API_KEY=$API_KEY # set REACT_APP variables before build command
- yarn install
- yarn build
artifacts:
name: "$CI_PIPELINE_ID"
paths:
- build
when: on_success
deploy_app:
stage: deploy
dependencies:
- build_app
script:
- echo "Set deployment variables"
- echo "Deployment scripts"

Resources