Custom (or latest) npm version in Google Cloud Builder - npm

I'm using Google Cloud Builder (GCB) to build some Node.js code. I'm using npm's new package-lock.json feature to pin dependencies. This works best when using the npm ci command that was introduced in npm#5.7.1. Unfortunately, all of GCB's npm images are currently set to npm#5.6.0
How can I use a different npm version in GCB without creating a custom builder image?
Edit: It may not be the case that all of GCB's images are set to npm#5.6.0, but the one that I need to use (node-8.11.0) is set to this version.

I solved the issue by creating my own container image based on the cloud-builder's npm image.
Dockerfile:
FROM gcr.io/cloud-builders/npm:node-8.11.0
ARG NPM_VERSION
RUN npm i -g npm#${NPM_VERSION}
ENTRYPOINT ["npm"]
cloudbuild.yaml:
steps:
- name: 'gcr.io/cloud-builders/docker'
args:
- 'build'
- '--build-arg=NPM_VERSION=latest'
- '--tag=gcr.io/$PROJECT_ID/npm:latest'
- '.'
images:
- 'gcr.io/$PROJECT_ID/npm:latest'
I ran gcloud builds submit . --config=cloudbuild.yaml from the same folder containing the Dockerfile and cloudbuild.yaml files. This submitted the build to GCB and posted an image in my project's container registry. I then used this image in my other project's cloudbuild.yaml that needed the upgraded npm version, like so:
steps:
- id: frontend_install
name: 'gcr.io/$PROJECT_ID/npm:latest'
args: ['ci']
waitFor: ['-']
After doing this, everything works as expected.

Related

Vuejs Gitlab page is blank, console says MIME type mismatch, css and js not found

I made a website in Vuejs, it works on my local browser. I build the page locally and push to gitlab here (https://gitlab.com/ayaderaghul/coi6), and run CI (with folder: public). The page is blank (https://ayaderaghul.gitlab.io/coi6/), the console says:
The resource from “https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).[Learn More] coi6
Loading failed for the <script> with source “https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js”.
And I right click the page to View Page Source, the link to css, js files are not found (view-source:https://ayaderaghul.gitlab.io/coi6/)
I have tried the following:
I write commands to build the page in .gitlab-ci.yml
image: alpine:latest
before_script:
- apk add --update nodejs
- apk add --update npm
- npm install chalk
- npm install each-async
- npm install indent-string
- npm install
pages:
stage: deploy
script:
- npm run build
artifacts:
paths:
- public
only:
- master
(https://gitlab.com/ayaderaghul/coi6/blob/master/.gitlab-ci.yml)
I change the css and js paths in file index.html in some ways: /coi6/public/static/css/... or static/css/... ...
None of them works. The behavior is the same. Please give me more options to try? Or more cues to look at? Or explain me something I haven't understood. Thank you,
Your path is wrong in index.html.
Your files are available for example here :
https://ayaderaghul.gitlab.io/coi6/static/js/vendor.d5bde172b988351183eb.js
Whereas you are referencing them here :
https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js

Cache npm install Task in VSTS

I have configured a private agent in VSTS and have installed NPM there globally. When I'm trying to install NPM through my build task, it is still installing NPM packages for every build which is taking an aweful lot of time- approximately 12 minutes.
How can I cache the NPM installations so that the build time is reduced?
We use npm-cache, npm-cache is a node module that will calculate a hash of your package.json file for every hash it will create zip folder on your build server with the content of node_modules, now npm install is reduced to extracting a zip on every build (of course only in case you didn’t actually change package.json).
The idea is: in the first time the tool download the npm packages and save them locally, in the second time if the package.json not changed he takes the packages from the local disk and copy them to the build agent folder, only if the package.json changed he downloads the packages from the internet.
Install the npm-cache on the build machine:
npm install npm-cache -g
In the build definition add Command Line task (Tool: C:\Windows\User\AppData\Roaming\npm\npm-cache (or just npm-cache if you add the tool to environment path variables); Arguments:install npm; Working folder: $(Build.SourcesDirectory) (or where package.json located).
MS has finally implemented this feature (currently in beta) https://learn.microsoft.com/en-us/azure/devops/pipelines/caching/index?view=azure-devops#nodejsnpm
From there:
variables:
npm_config_cache: $(Pipeline.Workspace)/.npm
steps:
- task: CacheBeta#0
inputs:
key: $(Build.SourcesDirectory)/package-lock.json
path: $(npm_config_cache)
displayName: Cache npm
- script: npm ci
Unfortunately we cannot cache the NPM installations as no such a built-in feature for now.
However there's already a user voice submitted to suggest the feature : Improve hosted build agent performance with build caches, and seems the VSTS team are actively working on this now...
For now, you can try to speed Up NPM INSTALL on Visual Studio Team Services
Use Cache task
Caching is added to a pipeline using the Cache pipeline task. This
task works like any other task and is added to the steps section of a
job
With the following configuration:
pool:
name: Azure Pipelines
steps:
- task: Cache#2
inputs:
key: 'YOUR_WEB_DIR/package.json'
path: 'YOUR_WEB_DIR/node_modules/'
- task: Npm#1
inputs:
command: 'install'
workingDir: 'YOUR_WEB_DIR/frontend'
You can use key YOUR_WEB_DIR/package-lock.json too, but be aware that file might be changed by other next step like npm install so hash also will be changed.

Run webpack in a Google Cloud Builder step

I am trying to pack a web app using Google Cloud Builder.
I already have npm install working in a previous step of the same build.
File webpack.config.js is ready to use and tested outside Google Cloud Builder. It is cloned inside the /workspace in a previous step of this build.
How do I execute webpack command as a build step?
This is how I manage to run webpack inside Google Cloud Builder configuration script.
I had to use the npx in order to execute it using the npm docker image.
This is a step to run webpack and goes inside the file cloudbuild.yaml
# run webpack
- name: 'gcr.io/cloud-builders/npm'
entrypoint: 'npx'
args: ['webpack']
dir: '${_MY_APP_DIR}templates/react_app/build'
timeout: 10s
Assuming you are using webpack version >=4:
webpack --mode=production --config ./webpack.config.js

NPM not installing devDependencies on bitbucket pipeline?

I'm trying to setup my first Bitbucket pipeline which simply builds my application and deploys it to my FTP server using the following bitbucket-pipelines.yml
image: node:6.9.4
pipelines:
default:
- step:
caches:
- node
script:
- npm install
- npm test
- step:
script:
- npm run build
- node deploy.js
The issue lies in the npm install because when bitbucket tries to run the npm run build command it says that rimraf (a npm package) is not found. rimraf however is listed in my devDependencies, all regular dependencies in my package.json are downloaded correctly.
There is no global variable set by my so the NODE_ENV could not be it right?
I had the same issue with gulp.
Gulp was in devDependencies and also specified in package.json as script but still it said npm ERR! missing script: gulp
The documentation says to install it globally, so there might be a related issue with your package.
https://confluence.atlassian.com/bitbucket/javascript-node-js-with-bitbucket-pipelines-873891287.html
I had this same issue. For me, the problem was that the version of Node on my local development device was different from the version of Node in the bitbucket-pipelines.yml file.
To fix it, I went into bitbucket-pipelines.yml and changed this line:
image: node:10.15.3
to this:
image: node:14.15.0

Vuetify Offline Docs

I have started using Vuetify to add ui-components and use pre-defined layouts. The problem is that I have to look into online-docs every now and then, and requires me to be connected to internet perpetually.
Is there a way to get offline docs for Vuetify? Like an html built with doxygen/javadocs, or a CHM? PDF? LaTEX? Anything really helps.
Update
git clone https://github.com/vuetifyjs/vuetifyjs.com.git has become a private project. The docs are now in the packages/docs/ directory. Instructions have been updated.
You can download the project from the vuetifyjs site repo, install and run locally.
git repo: https://github.com/vuetifyjs/vuetify
The instructions (for vue-cli-2 based project):
cd /tmp/
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify/packages/docs
yarn
# option 1 - build and serve
yarn build
yarn start
# option 2 - run dev instance
yarn dev
See the docs on how to run the docs.
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify
yarn
yarn build
yarn dev docs
Then head over to http://localhost:8095/en/getting-started/quick-start
git clone https://github.com/vuetifyjs/vuetify.git
yarn
yarn build
yarn start
http://localhost:8095
download zip from https://github.com/vuetifyjs/vuetify
extract it to any place like i put it in d:\xampp\htdcos\vuetify-master
than open command prompt (cmd) and type this path d:\xampp\htdcos\vuetify-master
run this command yarn here D:\xampp\htdocs\vuetify-master>yarn
than run yarn build here D:\xampp\htdocs\vuetify-master>yarn build
than yarn start here D:\xampp\htdocs\vuetify-master>yarn start
it will start vuetify local docs at 0.0.0.0:8095
now open browser and type http://localhost:8095 and enjoy
node module is required
also install yarn from https://yarnpkg.com/lang/en/docs/install/#windows-stable before running yarn commands and make sure check yarn version in cmd via yarn -v
The Vuetify website allows you to view it offline there by typing its website and pressing enter when not connected to the internet. It works and I do that all the time.