Sonar Cloud analysis on an NX monorepo - monorepo

Am just trying to setup a monorepo of angular applications and libraries using NX. Am new to NX but have user sonarcloud before. Now my requirement is to run analysis for the different projects and libraries and have them show in SonarCloud. I followed sonarcloud monorepo guide but did not find it much helpful.
I have few questions and am sure these are basics when it comes to a monorepo but still putting it out here as i did not find much help elsewhere
How do i analyse different projects and libraries separately in sonarcloud
How do i configure github actions to run only for those that are changed?
Thanks.

This is what we've come up with;
create project in sonarcloud, with one project per sub NX project
create one sonar-project.properties file at the root of each subproject in your monorepo
your sonar-project.properties should look like;
sonar.projectKey=your-project-key
sonar.organization=your-org
sonar.sources=JUST/the/paths/for/this/sub-project
sonar.exclusions=**/node_modules/**, exclude all the other stuff
...
Your github action, you'll need one sonar token per project. Assuming you have different actions to build each project;
the paths bit at the top of the action tells github to only run those actions if files on those paths change.
name: run-tests-and-sonarcloud-on-pr
on:
# Trigger the workflow on pull request,
# for master or develop, but only for stuff in the `path-to-your-project/**` folder
pull_request:
branches:
- develop
- master
paths:
- 'path-to-your-project/**'
jobs:
run-jest-and-sonar:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v2
with:
node-version: ${{ matrix.node-version }}
- name: jest
run: |
cd your-folder
npm ci
npm test
npm run build
- name: SonarCloud Scan
uses: SonarSource/sonarcloud-github-action#master
with:
#this bit is key, it'll tell sonar to work from a diff folder
projectBaseDir: path/to/your/project
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
SONAR_TOKEN: ${{ secrets.YOURPROJECT_SONAR_TOKEN }}
Your mileage may vary with this, esp. if you build all projects from the root folder, you might need to do some renaming of sonar-project.properties files on build or something. We have one at the root, then one in several subfolders of our mono-repo.

Related

Cannot deploy my React app in Azure Static Web Apps. Github actions throws this logs:

Everything is running ok until this happen:
npm WARN deprecated w3c-hr-time#1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated stable#0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
added 1654 packages, and audited 1655 packages in 1m
Then, right at the end of the logs I got this from Oryx and my App doesn't get deployed.
---End of Oryx build logs---
Oryx has failed to build the solution.
For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
I dunno what would be the solution. Should I remove the dependencies warned from the package-lock.json? (that's where the warnings came from)
I'm expecting to deploy my app as usual
Here my workflow file:
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- sandbox
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- sandbox
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_SEA_000C4D810 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_SEA_000C4D810 }}
action: "close"
I have deployed the React App to Azure Static Web App without any issues.
Check the below workaround.
Create a React App in Local.
npx create-react-app my-react-app
Navigate to the Application root directory.
cd my-react-app
npm start
Create a new Repository in the GitHub and push the local code.
You will find the command to push the local code to repository in the GitHub.
git init
git add README.md
git commit -m "Update Code"
git branch -M main
git remote add origin https://github.com/Organization/RepositoryName.git
git push -u origin main
In Azure Portal Create a new Static Web App.
Under Deployment details, select the GitHub Account.Provide the Organization, Repository and Branch details.
Under Build details provide as mentioned below.
Build Prests - React
App location - api
Output location - build
Click on Review + create.
Initially when I run the Application, I got the content page.
Navigate to the GitHub = > Actions , check if the Build and Deployment is Successful or not.
Click on Re-run jobs .
Output:
Refer my GitHub Repository.

Github action for `yarn build` fails with missing React component

I have a React app that builds correctly locally with yarn build. I have the following job in my config for Github Actions to deploy the app to S3:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials#v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-2
- name: Install dependencies
run: yarn install
- name: Build
run: yarn build
- name: Deploy static site to S3 bucket
run: aws s3 sync build/ s3://my-s3-bucket --delete
The Build phase is failing with this error:
Module not found: Error: Can't resolve './components/Layout' in '/home/runner/work/storefront-app/storefront-app/src'
This module does exist under the src/components/ directory, so I'm not sure why it can't be found. I'm exporting it with export default Layout;
So I found that the issue was with filenames and Git.
Locally, all my files were named correctly: Nav.js, Layout.js, etc. On Github, they were downcased: layout.js. Git never picked up the change to the filename, and so the build on GH could not find ./components/Layout. Deleting the files and re-committing them solved the problem.

Github every new commit actions-workflow react js build

I have a Github project in react js with a github-pages page.
Whenever I make changes to the project, before I push, I run the yarn build command to create the content for the github-pages and then I push.
What I would like to do is that every time a new commit is made in the project, the build is subsequently performed.
Without me having to do it manually.
The reason is if I make a modification directly on the browser on the github project, I cannot build the project because I do not have the downloaded project with its npm modules.
I was wondering is it possible to do such a thing?
package.json
"build": "npm run watch:css && react-scripts build && cp -R ./copy-build/. ./build && rm -rf docs && mv build docs"
Solution:
# This is a basic workflow to help you get started with Actions
name: Build
# Controls when the workflow will run
on:
# Triggers the workflow on push or pull request events but only for the main branch
push:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
build:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout#v2
- name: Install Yarn
run: yarn
- name: Build
run: yarn build

No files were found with the provided path: build. No artifacts will be uploaded. - Github Action for deploying React App to Firebase

I'm following this tutorial on setting up CI/CD with github actions for a react app. I want the action to build and deploy my react app to my firebase project for hosting. I'm fairly sure I'm followed the directions, but when I trigger my action with a push, I get this error:
> Run actions/download-artifact#v2
> with:
> name: build
> path: build Starting download for build Error: Unable to find any artifacts for the associated workflow
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Firebase CI
on: push
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/f
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- name: Archive Build
uses: actions/upload-artifact#v2
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Download Build
uses: actions/download-artifact#v2
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
I can install, build, and deploy manually from my console just fine. I thought this error might have something to do with my build directory's location, but its in the standard place. Any thoughts on what this might be?
Link to the full repo here
Additional Screenshots:
Seems like removing /build from my .gitignore solved the problem. I'm not %100 sure why though, as none of the examples of similar actions I have seen include their build folders.

Svelte/Sapper app 500 error on Google App Engine deploy via Gitlab CI

My Sapper app deploys Ok if I build it first and then deploy it from my local machine with gcloud app deploy.
My app.yaml just has: runtime:nodejs10 in it to deploy to the standard environment.
Now I can't achieve the same when I try to use Gitlab CI to deploy on git push.
In my .gitlab-ci.yml file I have 2 jobs: 1 to npm install and to run the build command and a second one to deploy to gcloud.
The 2 jobs complete but when I chack the version it has a 500 error and the logs say: Error: Cannot find module '/srv/__sapper__/build'.
So this has me going round in circles. I've tried moving svelte and sapper from dev deps to dependencies in package.json but it has not helped, I've looked at adding handlers in my app.yaml but am confused how, I've seen an issue on sapper github mentioning something related to svelte makefile and an issue with it needing to be built for the docker image to use it but no clear solution is proposed...
My .gitlab-ci.yml looks like this:
production-build:
stage: build-for-prod
image: node:10
script:
- npm install
- npm run build
only:
- master
prod-deploy:
stage: production
only:
- master
needs: ["production-build"]
image: google/cloud-sdk:alpine
environment: PROD
script:
- echo $SERVICE_ACCOUNT_KEY > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project sapper1-test app deploy app.yaml --verbosity debug --no-promote
after_script:
- rm /tmp/$CI_PIPELINE_ID.json
Correct me if i'm wrong, but to me this looks like you've misconfigured it. The jobs are running in separate containers and deploy doesn't have access to build results, that's why it is missing dependencies.
Artifacts might help to pass the built libraries around. But i would just build a custom image containing both Nodejs and Cloud SDK and combined two jobs on top of this image.

Resources