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
Related
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.
My problem is that whenever I commit/push a new change to my github repository, the code changes but the app remains the same.
Any ideas what can I improve?
I did this:
GITHUB: create new repository
VS-CONSOLE: npx create-react-app .
VS-CONSOLE: npm start
VS-CONSOLE: ctrl+c
VS-CONSOLE: npm i gh-pages
package.json:
above scripts "homepage": "https://account-name.github.io/respository-name",
in scripts: "deploy": "gh-pages -d build"
VS-CONSOLE: git init, git add . , git commit -m 'initial',
git remote add
origin https://account-name.github.io/respository-name
git push
-u origin master
GITHUB: refresh page
VS-CONSOLE: npm run build
VS-CONSOLE: npm run deploy
GITHUB: refresh page
The way that your deploy scripts are set up, just pushing to master isn't sufficient. Yes you need to run deploy every time you want the app to update.
This is so that you can push as many commits as you want whilst working on your code, as a work-in-progress, then when you are ready to update your app, you need to run the deploy script, which will build the app and put it on the gh-pages branch so that it is picked up by github pages and put on the web.
Committing is like saving and backing up your work, deploying is like handing it in.
I feel like I'm missing something simple but I can't find anything on the web on what I'm doing wrong. Here's my yml file
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm test --watchAll=false && npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
It's basically the default but I want tests (and eventual a coverage report) to run before moving on to the next step. Currently it just sits there after spitting out: "No tests found related to files changed since last commit."
I want all tests to run every single time and for the deployment to complete. What am I doing wrong?
I change my tests to this:
npm test -- --coverage --watchAll=false
Now the tests run and everything continues as normal.
I made a simple React app in Visual Studio Code and want to host it on a website which I am using surge.sh. When I deployed the app and head to the site, it just shows a blank page although the deployment was successful when I deploy it in my terminal.
Here are my steps that I did:
cd to root directory of my project
run npm run build
cd build
run surge command
provide {domain name}.surge.sh
I am new to using surge.sh. What might I have done wrong?
Follow below step to resolve(only 4 surge):
npm run build
cd build
cp index.html 200.html
surge
You could add the following to your package.json scripts -
"scripts": {
...
"deploy": "npm run build && cp build/index.html build/200.html && surge build https://{domain_name}"
}
And then you can run this on a Terminal from the root of the project (anytime you need to deploy) using npm run deploy.
I'm setting up a CI/CD pipeline using Azure DevOps to automatically deploy a React application to multiple environments. As I understood things, the environments variables (REACT_APP_*) are used during the npm build. How do I set up the build phase without creating a step for each environment?
I'm using a fresh ASP.Net Boilerplate project with a React front-end.
.
Here is what I have at the moment
I replicated the build task in the package.json to allow multiple environments
"scripts": {
...
"build": "set REACT_APP_ENV=production && react-app-rewired build --scripts-version react-scripts-ts",
"builduat": "set REACT_APP_ENV=uat && react-app-rewired build --scripts-version react-scripts-ts",
...
}
Then in my CI pipeline, I have duplicated the build task
- script: yarn builduat
displayName: '[UAT] Yarn build front-end'
workingDirectory: $(WorkingDirectoryReact)
- script: yarn build
displayName: '[PROD] Yarn build front-end'
workingDirectory: $(WorkingDirectoryReact)
I don't want to duplicate things for every environments so what's the ideal solution ?
I don't really want to build the solution during the CD (Deployment phase)
I finally did a PowerShell script that will replace content in the build artifacts.
All the details can be found there: https://github.com/Thibaultce/react-azuredevops-buildonce-deploymany
I'm not too clued up on react, but your approach is described as "build once, deploy many" and it's a really important aspect of your release process.
The bit you missing is publishing your builds as artifacts which you can then pick up in your release pipeline.
Take a look at the publish artifacts tasks : https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/publish-build-artifacts?view=azure-devops
Publish each of your environments to separate artifacts and then pick them up in your release pipeline.