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
Related
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
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/**
In my case, with the help of Chris I solved it by adding all environment variables inside repository variables
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
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.
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"
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...