I have a repo for a simple file consisting on a front directory (TS, Vue.js, Quasar) and a back one. The skeleton of the project is
infinote/
├─ front/
│ ├─ package.json
│ ├─ src/
├─ back/
├─ .git/
I am trying to build the front through the following job:
jobs:
front:
runs-on: ubuntu-latest
env:
working-directory: ./front
steps:
- uses: actions/checkout#v2
with:
ref: master
- uses: actions/setup-node#v2
with:
node-version: '14'
- run: npm install
- run: npm install -g #quasar/cli
- run: quasar build
- uses: actions/upload-artifact#v2
with:
name: front
path: dist/spa
This fails because npm install cannot find anything to install:
Run npm install
npm install
shell: /usr/bin/bash -e {0}
env:
working-directory: ./front
npm WARN saveError ENOENT: no such file or directory, open '/home/runner/work/infinote/infinote/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/runner/work/infinote/infinote/package.json'
npm WARN infinote No description
npm WARN infinote No repository field.
npm WARN infinote No README data
npm WARN infinote No license field.
up to date in 0.24s
found 0 vulnerabilities
I suppose that this is because package.json (and the rest of the project) is somewhere else. Where should I expect to find it?
What you want to achieve (to use a working-directory for an entire job) can be done by using ${{env.working-directory}} with the run: npm install command, as explained in this github community answer.
Without informing the working-directory with the step, the command will be executed at the repository root (where there is no package.json file). More information about this syntax can be found here.
Your workflow should look like this:
jobs:
front:
runs-on: ubuntu-latest
env:
working-directory: ./front
steps:
- uses: actions/checkout#v2
with:
ref: master
- uses: actions/setup-node#v2
with:
node-version: '14'
- run: npm install
working-directory: ${{env.working-directory}}
- run: npm install -g #quasar/cli
working-directory: ${{env.working-directory}}
- run: quasar build
working-directory: ${{env.working-directory}} #not sure if this one is necessary
- uses: actions/upload-artifact#v2
with:
name: front
path: dist/spa
The working directory should be set for the whole job via an entry in defaults:
jobs:
front:
defaults:
run:
working-directory: ./front
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
with:
ref: master
- uses: actions/setup-node#v2
with:
node-version: '14'
- run: npm install
- run: npm install -g #quasar/cli
- run: quasar build
- run: ls -lR dist
- uses: actions/upload-artifact#v2
with:
name: front
path: ./dist/spa/
Related
I just moved my project from npm and lerna to pnpm but now when using GitHub actions I get the following error
"line 1: pnpm: command not found"
can someone suggest how the .yml file should be, I've posted the current version below?
name: Lint & Unit Test
on: [pull_request]
jobs:
run-linters:
name: Run linter and Unit tests
runs-on: ubuntu-latest
steps:
- name: Check out Git repository
uses: actions/checkout#v3
- name: ACTIONS_ALLOW_UNSECURE_COMMANDS
run: echo 'ACTIONS_ALLOW_UNSECURE_COMMANDS=true' >> $GITHUB_ENV
- name: Set up Node.js
uses: actions/setup-node#v3
with:
node-version: 16.18.1
- name: Portal Install Node.js dependencies
working-directory: ./portals
run: |
pnpm install
- name: Portals Lint & tests
working-directory: ./portals
run: |
cat .env.example > .env
pnpm run build:tailwind
pnpm run lint
pnpm test
- name: Services Install Node.js dependencies
working-directory: ./services
run: |
pnpm install
- name: Services Lint & tests
working-directory: ./services
run: |
pnpm run lint
pnpm test
You might need to use first the pnpm/action-setup action, in order to install pnpm.
on:
- push
- pull_request
jobs:
install:
runs-on: ubuntu-latest
steps:
- uses: pnpm/action-setup#v2
with:
version: 6.0.2
Below is my dockerfile. Is there a way to cache npm in GitHub action?
FROM node
WORKDIR /app
ADD package*.json ./
RUN npm ci
ENV PATH /app/node_modules/.bin:$PATH
My GitHub actions:
name: NPM buid
on:
push:
branches:
- main
jobs:
build-npm-image:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Build and Tag Node image
id: build-ui-image
run: |
export DOCKER_BUILDKIT=1
docker build -t ui -f ./ui/Dockerfile .
P.S I don't want to cache docker image. Above docker file is used just for example. objection is cache npm dependencies
This can be achieved with actions/setup-node#v3
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: current
cache: npm
- name: Build and Tag Node image
id: build-ui-image
run: |
export DOCKER_BUILDKIT=1
docker build -t ui -f ./ui/Dockerfile .
Did you check below action ?
actions/cache#v2
So your Actions yaml would look like below,
name: NPM buid
on:
push:
branches:
- main
jobs:
build-npm-image:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- uses: actions/setup-node#v2
with:
node-version: '14'
- name: Caching node modules
uses: actions/cache#v2
with:
path: "app/node_modules"
key: node-modules-${{ hashFiles('app/package.json') }}
- name: Build and Tag Node image
id: build-ui-image
run: |
export DOCKER_BUILDKIT=1
docker build -t ui -f ./ui/Dockerfile .
Caching npm dependencies will not make a difference if you're building a docker image. You can use actions/setup-node for caching JS or docker/build-push-action for Docker.
I'm having hard time figuring out how to make the pipeline use the restored cache of npm modules.
Here's the manifest file:
jobs:
setup-build-push-deploy:
name: Setup, Build, Push, and Deploy
runs-on: ubuntu-latest
steps:
# Checkout the repo
- name: Checkout
uses: actions/checkout#v2
- name: Setup NodeJS
uses: actions/setup-node#v1
with:
node-version: '12.14'
# Cache the npm node modules
- name: Cache node modules
uses: actions/cache#v1
id: cache-node-modules
env:
CACHE_NAME: cache-node-modules
with:
# npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm
key: ${{ env.CACHE_NAME }}-${{ hashFiles('app/package-lock.json') }}
restore-keys: |
${{ env.CACHE_NAME }}-
# Install NPM dependencies
- name: Install Dependencies
if: steps.cache-node-modules.outputs.cache-hit != 'true'
run: |
cd app/
npm install
# Compile Typescript to Javascript
- name: Compile Typescript
run: |
cd app/
npm run make
The "cache" step does make a successful cache hit, and therefore the "install dependencies" step is skipped. But then the "compile" step fails, because it cannot find any installed npm modules.
The docs here and here and the SO question, eg. here, do not specify any certain step or configuration that points towards where to pick up the cached modules from. Seems like they should be picked up automatically from ~/.npm, but that's not the case.
I was able to solve this by changing the path to node_modules:
Here's an example:
jobs:
prepare-npm-cache:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v2
with:
node-version: 12.22.0
- name: Cache node modules
uses: actions/cache#v2
id: npm_cache_id
with:
path: node_modules
key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-npm-cache-
${{ runner.os }}-
- name: Install Dependencies
if: steps.npm_cache_id.outputs.cache-hit != 'true'
run: npm ci
I found myself in the exact same situation.
The node_modules seems to be cached but then the next job immediately fails due to missing dependencies.
I ended up using this GitHub action by Gleb Bahmutov.
Specifically this part:
- uses: bahmutov/npm-install#v1.4.5
- run: npm install
- run: npm run ***
Detailed description can be found in this article:
https://glebbahmutov.com/blog/do-not-let-npm-cache-snowball/
I'm trying to learn how CI/CD pipelines work.
I decided to use it with my portfolio page which should re-run itself on every push.
Here is my yaml config:
name: Build Bundle for Github Pages
on:
push:
branches:
- source
env:
NODE_ENV: production
PUBLIC_URL: http://crrmacarse.github.io/
GA_TRACKING_CODE: ${{ secrets.GA_TRACKING_CODE }}
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
with:
persist-credentials: false
- name: Build
run: |
npm install
npm run prod:pipeline
npm run sitemap
cp dist/index.html dist/404.html
cp google21029c74dc702d92.html dist/
cp robots.txt dist/
- name: Deploy
uses: JamesIves/github-pages-deploy-action#releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: source
FOLDER: dist
Here is the error:
Source code for the webpack config:
https://github.com/crrmacarse/crrmacarse.github.io/blob/source/compiler/production.pipeline.js
If the error message is cannot find module 'html-webpack-plugin', you could try, for testing, to install it.
See survivejs/webpack-book issue 100 as an example:
The solution was to run npm i html-webpack-plugin --save-dev before building with webpack
The OP has fixed the GitHub Action workflow with crrmacarse/crrmacarse.github.io commit 8a4397b
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2.0.0
- name: Use node 12
uses: actions/setup-node#v1
with:
node-version: 12
registry-url: https://registry.npmjs.org
- name: install
run: npm install
- name: lint
run: npm run sitemap
- name: build
run: npm run prod
- name: copy
run: npm run copy
Then the module html-webpack-plugin is properly installed and available, as seen in this Actions CI run.
Use npm install before build your project which installs your npm library on docker where your project will be built.
Note: Don't forget to define html-webpack-plugin on packge.json file
I've just started exploring Github actions however I've found myself placing a command in multiple places.
I have a PHP project where the composer.json is not in the root, my structure looks like:
my-project:
readme.md
app:
composer.json
Obviously there is more to it and there is a reason why, but my composer.json sits in a subdirectory called 'app'. As a result in my workflow, I have to cd into that folder every time to run a command:
name: CI
on: [push]
jobs:
phpunit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Setup Symfony
run: |
cd app
cp .env.dev .env
- name: Install Composer Dependencies
run: |
cd app
composer install --prefer-dist
- name: Run Tests
run: |
cd app
php bin/phpunit
How can I remove the cd app in every stage?
Update: It's now possible to set a working-directory default for a job. See this answer.
There is an option to set a working-directory on a step, but not for multiple steps or a whole job. I'm fairly sure this option only works for script steps, not action steps with uses.
https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#jobsjob_idstepsrun
Using working-directory, your workflow would look like this. It's still quite verbose but maybe a bit cleaner.
name: CI
on: [push]
jobs:
phpunit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Setup Symfony
working-directory: ./app
run: cp .env.dev .env
- name: Install Composer Dependencies
working-directory: ./app
run: composer install --prefer-dist
- name: Run Tests
working-directory: ./app
run: php bin/phpunit
Alternatively, you can run it all in one step so that you only need to specify working-directory once.
name: CI
on: [push]
jobs:
phpunit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Setup and run tests
working-directory: ./app
run: |
cp .env.dev .env
composer install --prefer-dist
php bin/phpunit
You can now add a default working directory for all steps in a job: docs
For the example here, this would be:
name: CI
on: [push]
jobs:
phpunit:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./app
steps:
- uses: actions/checkout#v1
- name: Setup Symfony
run: .env.dev .env
- name: Install Composer Dependencies
run: composer install --prefer-dist
- name: Run Tests
run: php bin/phpunit
Caveat: this only applies to run steps; eg you'll still need to add the subdirectory to with parameters of uses steps, if required.
Hope this will help somebody
name: CI
on:
...
defaults:
run:
working-directory: ./app
jobs:
...