How to save build files (React) using Github Actions - reactjs

I am trying to build react code using github actions.
But after successfully building the files i want to save it in a particular location say "build" folder in the repo.
I am currently able to build the files but not save them in the repo

If you would like to try and commit your build artifacts back to the repository yourself in a workflow see the following answer for how to prepare the repository and git config.
Push to origin from GitHub action
Alternatively, you might find create-pull-request action useful for this use case. It will commit changes to the Actions workspace to a new branch and raise a pull request. So if you call create-pull-request action after creating your artifacts during a workflow, you can have that change raised as a PR for you to review and merge.
For example:
on: release
name: Update Version
jobs:
createPullRequest:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
...
(your build steps)
...
- name: Create Pull Request
uses: peter-evans/create-pull-request#v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
commit-message: Add build artifact
title: Add build artifact

I just used https://github.com/s0/git-publish-subdir-action and it worked great. It just dumps files from a given folder into a branch. Here's an example workflow file that worked for me:
name: Build Data
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Python 3.x
uses: actions/setup-python#v2
with:
python-version: '3.x'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install -r tools/requirements.txt
- name: Run python script
run: python tools/data_builder.py
# THIS IS WHERE THE DATA IS PUBLISHED TO A BRANCH
- name: Deploy
uses: s0/git-publish-subdir-action#master
env:
REPO: self
BRANCH: data_build
FOLDER: tools/data_build
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
And here is in action: https://github.com/2020PB/police-brutality/blob/4818ae367f2627c7a456bd3c6aa866054e618ac8/.github/workflows/build_data_ci.yml

Related

SonarCloud with Googletest and CMake on GitHub Actions

Introduction
Currently, I'm working on a C project with CMake and Googletest.
My project is on a GitHub repo.
I have configured my GitHub Workflow like this:
name: Build
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened]
jobs:
build:
name: Build
runs-on: ubuntu-latest
env:
BUILD_WRAPPER_OUT_DIR: build_wrapper_output_directory # Directory where build-wrapper output will be placed
steps:
- uses: actions/checkout#v3
with:
submodules: recursive
fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
- name: Install sonar-scanner and build-wrapper
uses: SonarSource/sonarcloud-github-c-cpp#v1
- name: Run build-wrapper
run: |
mkdir build
cmake -S . -B build
build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} cmake --build build/ --config Release
- name: Run sonar-scanner
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SONAR_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }} # Put the name of your token here
run: |
sonar-scanner --define sonar.cfamily.build-wrapper-output="${{ env.BUILD_WRAPPER_OUT_DIR }}"
Problem
The problem, when I execute it the SonarCloud show 0% test coverage :
Question
Does someone know how we can configure the GitHub Actions for SonarCloud to include Googletest?
Does someone know how we can configure the GitHub Actions for SonarCloud to include Googletest?
In your current configuration, the coverage data is not being generated.
Follow this official guide to generate and report coverage data:
C/C++/Objective-C Test Coverage
Apparently, for your use case, the most suitable example seems to be linux-cmake-gcovr-gh-actions-sc. It uses gcovr which generates the coverage report in the SonarQube format which you can send to SonarCloud.
For this, you need to update your CMakeFiles.txt and build.yml files according to these:
CMakeLists.txt: https://github.com/sonarsource-cfamily-examples/linux-cmake-gcovr-gh-actions-sc/blob/main/CMakeLists.txt
build.yml: https://github.com/sonarsource-cfamily-examples/linux-cmake-gcovr-gh-actions-sc/blob/main/.github/workflows/build.yml
Also, see gcovr's Out-of-Source Builds with CMake.

how to get output for junit test in git actions steps

I'm new to git actions and was wondering if the following is possible. I'm running a junit test that is creating a salesforce record and returning the record Id, I would like to save the Id from the test log output and send it to to slack. Wondering if its possible to set the record Id as a variable create another job to send it to slack?
this is my workflow for creating the record
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Set up JDK 14
uses: actions/setup-java#v1
with:
java-version: 14
cache: maven
- name: Build project with Maven
run: mvn -B package --file pom.xml -Dtest="StageSFDCTestData#insertNewAccountTwo"

webdriver opera, ValueError: API Rate limit exceeded. You have to add GH_TOKEN

guys!!! I have a problem, I'm trying to access whatsapp with webdriver and in the browser opera, but the error appears
ValueError: API rate limit exceeded. You have to add GH_TOKEN!!!
I googled https://github.com/SergeyPirogov/webdriver_manager/blob/master/README.md#use-with-opera
But I didn't find the solution. In Google Chrome works.
enter image description here
Errors are caused by not using a GH_TOKEN and the API timing out (max 60 requests/hr for unauthenticated users.
The webdriver_manager docs outline the potential issues you have ran into here.
https://github.com/SergeyPirogov/webdriver_manager#configuration
I ran into similar issues but whilst attempting to run this as apart of a Github Action. It all ran fine locally, and ran fine a few times as a part of the Github Action, but eventually stopped working.
This can be fixed by adjusting your .github/workflows/ACTION.yml file (noting the .yml file can be called whatever you like).
name: Your Github Action
on:
schedule:
- cron: '0 3 * * 2'
workflow_dispatch:
inputs:
logLevel:
description: 'Log level'
required: true
default: 'warning'
type: choice
options:
- info
- warning
- debug
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/labeler#v2
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
- name: Set up Python 3.10
uses: actions/setup-python#v3
with:
python-version: "3.10"
- name: Install dependencies
run: |
python -m pip install --upgrade pip
if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
- name: Run Your webdriver based task
env:
# This is the important line to add
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: python script.py
The 2nd last line here is the important part. You can use the standard GITHUB_TOKEN environment variable that is exposed by default to your Github Action. Or you can choose to setup your own, if you want.
Try to use ChromeDriver instead of Geckodriver. It worked for me.

Deploying to Azure Linux Web App I get To import Sass files, you first need to install node-sass

When I deploy my React App which was created using Create-React-App to Azure Web App on Linux I get the following when I browse to the website?
To import Sass files, you first need to install node-sass.
When I run this locally everything is fine (Running from a Mac). I have checked the DevOps deployment log and that reports it installed node-sass without issue. I have also tried to delete the node-sass folder in node_modules and npm install. This added node-sass again without issue but still I get the error?
Has anyone come across this before or have any suggestions?
This is the Yaml File.
# Node.js React Web App to Linux on Azure
# Build a Node.js React app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: '<Remove for Security>'
# Web app name
webAppName: '<Remove for Security>'
# Environment name
environmentName: '<Remove for Security>'
# Agent VM image name
vmImageName: 'ubuntu-latest'
stages:
- stage: Build
displayName: Build stage
jobs:
- job: Build
displayName: Build
pool:
vmImage: $(vmImageName)
steps:
- task: ArchiveFiles#2
displayName: 'Archive files'
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
includeRootFolder: false
archiveType: zip
archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
replaceExistingArchive: true
- upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
artifact: drop
- stage: Deploy
displayName: Deploy stage
dependsOn: Build
condition: succeeded()
jobs:
- deployment: Deploy
displayName: Deploy
environment: $(environmentName)
pool:
vmImage: $(vmImageName)
strategy:
runOnce:
deploy:
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Azure App Service Deploy: <Remove for Security>'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
WebAppName: $(webAppName)
packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
RuntimeStack: 'NODE|10.10'
StartupCommand: 'npm run start'
ScriptType: 'Inline Script'
InlineScript: |
npm install
npm run build --if-present
I had a similar issue with another node package. In such cases where node packages do not get resolved try installing your node package globally using -g flag.

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