We Keep Coding

Bitbucket does the build somehow differently?

I use nodejs 14.18.1 locally and in the pipeline, a few days ago a part of the frontend started to fall off with the error "ReferenceError: Cannot access 'z' before initialization", there are no errors in the code, also the local build works, and we even uploaded it on s3 as a temporary solution, but after building via bitbucket, an error appears.
script:
- cd client
- npm install
# CI=true in default variables for Bitbucket Pipelines https://support.atlassian.com/bitbucket-cloud/docs/variables-in-pipelines/
- npm run build:br
npm run build below
"build:br": "webpack --env REACT_APP_LANGUAGE_TYPE=BRAZIL --mode production",

How to pass Angular environment variables to Gitlab CI/CD Pipeline

# For the testing stage you must include all those lines so the tests run and finish. If ng test doesnt have the flags that come after it, it will hang on that stage.
image: node:latest
before_script:
- apt-get update -qy
- apt-get install -y ruby-dev
- gem install dpl
stages:
- production
production:
type: deploy
stage: production
image: ruby:latest
script:
- dpl --provider=heroku --app=$HEROKU_APP_PRODUCTION --api-key=$HEROKU_API_KEY
only:
- master
Good Evening,
I am trying to use my environment key that is set up in the environment file in Angular in my pipeline, but Gitlab does not know how to use it. process.env.(insert variable name) does not work. I have set the env variable in my gitlab pipeline dashboard. I am just not sure how to use that in my app. Any guidance is appreciated.

Thats quite a long answer, you need to list your config or job so we can trouble shoot. In short here are the main components to setup
First setup pipeline jobs like so, you should see your image in your dashboard
myTestjob:
stage: stage_a
image: node:12-alpine
tags:
- docker
script:
- node --version
Second, setup your dependencies
stages:
- install
install_dependencies:
stage: install
image: node:12-alpine
tags:
- docker
script:
- yarn install
- yarn ngcc --properties es2015 --create-ivy-entry-points
cache:
key:
files:
- yarn.lock
paths:
- node_modules
only:
refs:
- merge_requests
- master
changes:
- yarn.lock
remember that your cache key is invalidated whenever you make changes to yarn.lock
cache:
key:
files:
- yarn.lock
paths:
- node_modules
policy: pull
In your angular,json build your application job
{
"projects": {
"angular-app-example": {
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "artifacts/app"
}
}
}
}
}
}
Setup your env variable, gitlab has many
variables:
PROJECT_PATH: "$CI_PROJECT_DIR"
APP_OUTPUT_PATH: "$CI_PROJECT_DIR/artifacts/app"
build_app:
stage: build_and_test
image: node:12-alpine
tags:
- docker
script:
- yarn ng build --prod
after_script:
- cp $PROJECT_PATH/Dockerfile $APP_OUTPUT_PATH
artifacts:
name: "angular-app-pipeline"
paths:
- $APP_OUTPUT_PATH
cache:
key:
files:
- yarn.lock
paths:
- node_modules
policy: pull
here is a nice ref. on how to setup in more detail
UPDATE after user posted YML file to setup staging and production
cache:
paths:
- node_modules/
deploy_stage:
stage: deploy
environment: Stage
only:
- master
script:
- rm ./package-lock.json
- npm install
- ./node_modules/#angular/cli/bin/ng test --progress false --single-run=true --watch=false
- ./node_modules/#angular/cli/bin/ng e2e --progress false --watch=false
- ./node_modules/#angular/cli/bin/ng build --progress false --prod --base-href tykt-stage.surge.sh
- ./node_modules/.bin/surge -p dist/ --domain tykt-stage.surge.sh
deploy_production:
stage: deploy
environment: Production
only:
- tags
script:
- rm ./package-lock.json
- npm install
- ./node_modules/#angular/cli/bin/ng test --progress false --single-run=true --watch=false
- ./node_modules/#angular/cli/bin/ng e2e --progress false --watch=false
- ./node_modules/#angular/cli/bin/ng build --progress false --prod --base-href tykt.surge.sh
- ./node_modules/.bin/surge -p dist/ --domain tykt.surge.sh
You can use either section and update your domain it should build and push the CI CD

NPM: How to add a "post-install" hook that's not run for package consumers?

I'm writing an NPM module.
I'd like to automate some tasks after every npm install when developing the module locally.
However, I do not want these steps to be performed when consumers of my library perform an npm install and I do not want these steps to be performed after every npm pack and npm publish that I make during development (so this rules-out using the prepublish and prepare scripts).
What's the easiest way to achieve this?
(I've considered: (a) publish a separate package.json w/o the install script, (b) create a ./install.sh in the project's root that users call instead of npm install... but this kinda sucks.)

The install:local script here will run after npm install is run locally only (i.e. not when consumers install your package).
package.json:
{
...,
"scripts": {
"prepare": "case \"$npm_config_argv\" in *\"\\\"install\\\"\"*|*\"\\\"ci\\\"\"*) npm run install:local ;; esac",
"install:local": "echo 'npm install' was run directly in the project, and not by a library consumer!",
}
}

Cannot build for production in GitHub Actions using webpack

I'm trying to deploy my project to Firebase Hosting using the following action:
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
deploy_to_firebase_hosting:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Build for production
run: npm run build-prod
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
The actions gets failed on Build For Production step. My build-prod script does webpack -p --mode production.
This is the error message for this failure:
> project-name#1.0.0 build-prod /home/runner/work/project-name/project-name
> webpack -p --mode production
/home/runner/work/project-name/project-name/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
...
I've been researching about this error and I found out that people solve it by deleting node_modules before running the build. So I ran another action, without the npm install part.
It fails again on Build for production, but with a different, much reasonable error:
> webpack -p --mode production
webpack not installed
Install webpack to start bundling:
$ npm install --save-dev webpack
npm ERR! code ELIFECYCLE
npm ERR! errno 1
What's the correct way to build a production bundle in Github Actions?
Thanks!

I had the exact same issue when trying to use GitHub actions to build & deploy a production Docker container.
It turned out the issue on my side was as a result of Webpack not having access to any environment variables (which my Webpack config required) at the point of build which caused it to error out with the same error you received above.
To fix this I added the following line to my build command:
--env.NODE_ENV=production
E.g my final build command called by the container was then:
node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --env.NODE_ENV=production --progress --config webpack.prod.js
Hope this helps!

Angular-cli build (ng build) on Teamcity

I hope someone has already done this.
I am trying to set up a continuous build in teamcity for one my angular 2 project.
After done some research and I have followed the steps as follows:
Build Step1: installed the jonnyzzz.node plugin for the teamcity. (Now I can pick Node.js NPM from Runner type)
npm commands: I added install command
Build Step 2: Another Node.js NPM and npm commands: install -g angular-cli
So far so good
Now I wanted to build ng build as the third step and I am really stuck as I have no way to do this.
Any help would be appreciated.
Thank you.

Rather than changing your package.json you can use the node.js NPM plugin and the run command:
run build
build it not a default command for NPM so you need the 'run build' which is mapped to ng build in default ng-cli package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
See image

In order to get ng build work from nodejs plugin for Team city, I have modified the package.json file.
In start replace the value with "ng build".
And from team city, npm build command will trigger the ng build command.

First start with the build agents where you can edit the buildAgent.properties file and define 3 environment variables. You should have the surrounding single quotes here or later on in your build definitions:
env.exec.node='C\:\\Program Files\\nodejs\\node.exe'
env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js'
env.exec.ng='%env.APPDATA%\\npm\\node_modules\\#angular\\cli\\bin\\ng'
The %env.APPDATA% is used here but some setups may be installed on the Program Files, in most cases the AppData will be the one to take.
Next you can define build steps for your project. Create these new build steps of type Powershell and set Script as Source Code. Inside the Script Source you can now enter:
Install Angular CLI
& %env.exec.node% %env.exec.npm% install -g #angular/cli
Install node_modules folder
& %env.exec.node% %env.exec.npm% install
Build and publish solution
& %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path
After this step production builds will create your dist folder which you can include into your Artifacts paths so you have access to it should you want to create seperate Deployment type build configurations
Some considerations to take into account here:
You could define the variables inside your however
different paths may be used on the build agents, which would brake
your builds
Make sure you have proper Clean-Up Rules in place, since node_modules
folders can get big really fast
Hope it helps out someone!