Select angular.json configurations during docker multistage build












1














I'm building the angular6 app w/ a docker multistage build.
The default angular.json created by angular.cli contains a build section including a list of configurations.
I can select a specific configuration using the following command



ng build --configuration production 


but in my docker multistage build I cannot us ng directly but npm only



using "npm run build" kicks "ng build" but I don't know how to supply the additional parameters "--configuration production" to select a specific configuration.



That's a chunck of my angular.json file



{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"woa-angular6-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/woa-angular6-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/entity-add.scss"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {...


that's my dockerfile



# Stage 1
FROM node:8.11.2-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

# how to supply the equivalent parameter to select a given configuration?
RUN npm run build
#RUN ng build --configuration production

# Stage 2
FROM nginx:1.13.12-alpine

COPY --from=node /usr/src/app/dist/woa-angular6-app /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf









share|improve this question






















  • It seems to be npm run <command> [-- <args>] see this answer for more information
    – Ploppy
    Nov 17 '18 at 19:27










  • Possible duplicate of Sending command line arguments to npm script
    – Ploppy
    Nov 17 '18 at 19:27










  • @Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
    – Crixo
    Nov 18 '18 at 18:02
















1














I'm building the angular6 app w/ a docker multistage build.
The default angular.json created by angular.cli contains a build section including a list of configurations.
I can select a specific configuration using the following command



ng build --configuration production 


but in my docker multistage build I cannot us ng directly but npm only



using "npm run build" kicks "ng build" but I don't know how to supply the additional parameters "--configuration production" to select a specific configuration.



That's a chunck of my angular.json file



{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"woa-angular6-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/woa-angular6-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/entity-add.scss"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {...


that's my dockerfile



# Stage 1
FROM node:8.11.2-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

# how to supply the equivalent parameter to select a given configuration?
RUN npm run build
#RUN ng build --configuration production

# Stage 2
FROM nginx:1.13.12-alpine

COPY --from=node /usr/src/app/dist/woa-angular6-app /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf









share|improve this question






















  • It seems to be npm run <command> [-- <args>] see this answer for more information
    – Ploppy
    Nov 17 '18 at 19:27










  • Possible duplicate of Sending command line arguments to npm script
    – Ploppy
    Nov 17 '18 at 19:27










  • @Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
    – Crixo
    Nov 18 '18 at 18:02














1












1








1







I'm building the angular6 app w/ a docker multistage build.
The default angular.json created by angular.cli contains a build section including a list of configurations.
I can select a specific configuration using the following command



ng build --configuration production 


but in my docker multistage build I cannot us ng directly but npm only



using "npm run build" kicks "ng build" but I don't know how to supply the additional parameters "--configuration production" to select a specific configuration.



That's a chunck of my angular.json file



{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"woa-angular6-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/woa-angular6-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/entity-add.scss"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {...


that's my dockerfile



# Stage 1
FROM node:8.11.2-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

# how to supply the equivalent parameter to select a given configuration?
RUN npm run build
#RUN ng build --configuration production

# Stage 2
FROM nginx:1.13.12-alpine

COPY --from=node /usr/src/app/dist/woa-angular6-app /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf









share|improve this question













I'm building the angular6 app w/ a docker multistage build.
The default angular.json created by angular.cli contains a build section including a list of configurations.
I can select a specific configuration using the following command



ng build --configuration production 


but in my docker multistage build I cannot us ng directly but npm only



using "npm run build" kicks "ng build" but I don't know how to supply the additional parameters "--configuration production" to select a specific configuration.



That's a chunck of my angular.json file



{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"woa-angular6-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/woa-angular6-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/entity-add.scss"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {...


that's my dockerfile



# Stage 1
FROM node:8.11.2-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

# how to supply the equivalent parameter to select a given configuration?
RUN npm run build
#RUN ng build --configuration production

# Stage 2
FROM nginx:1.13.12-alpine

COPY --from=node /usr/src/app/dist/woa-angular6-app /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf






angular docker-multi-stage-build angular-config






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 17 '18 at 17:58









Crixo

2,5591624




2,5591624












  • It seems to be npm run <command> [-- <args>] see this answer for more information
    – Ploppy
    Nov 17 '18 at 19:27










  • Possible duplicate of Sending command line arguments to npm script
    – Ploppy
    Nov 17 '18 at 19:27










  • @Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
    – Crixo
    Nov 18 '18 at 18:02


















  • It seems to be npm run <command> [-- <args>] see this answer for more information
    – Ploppy
    Nov 17 '18 at 19:27










  • Possible duplicate of Sending command line arguments to npm script
    – Ploppy
    Nov 17 '18 at 19:27










  • @Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
    – Crixo
    Nov 18 '18 at 18:02
















It seems to be npm run <command> [-- <args>] see this answer for more information
– Ploppy
Nov 17 '18 at 19:27




It seems to be npm run <command> [-- <args>] see this answer for more information
– Ploppy
Nov 17 '18 at 19:27












Possible duplicate of Sending command line arguments to npm script
– Ploppy
Nov 17 '18 at 19:27




Possible duplicate of Sending command line arguments to npm script
– Ploppy
Nov 17 '18 at 19:27












@Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
– Crixo
Nov 18 '18 at 18:02




@Ploppy thanks for the hint, the final command seems to be "RUN npm run build -- --configuration production". I'm still doing some test, but that's should be the one. If you answer the question, I'll accept it
– Crixo
Nov 18 '18 at 18:02












1 Answer
1






active

oldest

votes


















0














Default build production for angular



ng build --prod --build-optimizer


read more here https://angular.io/guide/deployment



Not sure I understand what you trying to do, but in package json, you can create the run command as you wish per environment like



"scripts": {
"build:production": "ng build --prod ... + your prod config flags here",
"build:staging": "ng build --prod ... + whatever flags",
"build:dev": "ng build --prod + whatever flags",
}


Check what options you can provide here :



https://angular.io/cli/build



Then from docker file you just



npm run build:production


Hope this helps!






share|improve this answer























  • Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
    – Crixo
    Nov 18 '18 at 17:29










  • Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
    – freepowder
    Nov 18 '18 at 17:59













Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53353984%2fselect-angular-json-configurations-during-docker-multistage-build%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Default build production for angular



ng build --prod --build-optimizer


read more here https://angular.io/guide/deployment



Not sure I understand what you trying to do, but in package json, you can create the run command as you wish per environment like



"scripts": {
"build:production": "ng build --prod ... + your prod config flags here",
"build:staging": "ng build --prod ... + whatever flags",
"build:dev": "ng build --prod + whatever flags",
}


Check what options you can provide here :



https://angular.io/cli/build



Then from docker file you just



npm run build:production


Hope this helps!






share|improve this answer























  • Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
    – Crixo
    Nov 18 '18 at 17:29










  • Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
    – freepowder
    Nov 18 '18 at 17:59


















0














Default build production for angular



ng build --prod --build-optimizer


read more here https://angular.io/guide/deployment



Not sure I understand what you trying to do, but in package json, you can create the run command as you wish per environment like



"scripts": {
"build:production": "ng build --prod ... + your prod config flags here",
"build:staging": "ng build --prod ... + whatever flags",
"build:dev": "ng build --prod + whatever flags",
}


Check what options you can provide here :



https://angular.io/cli/build



Then from docker file you just



npm run build:production


Hope this helps!






share|improve this answer























  • Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
    – Crixo
    Nov 18 '18 at 17:29










  • Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
    – freepowder
    Nov 18 '18 at 17:59
















0












0








0






Default build production for angular



ng build --prod --build-optimizer


read more here https://angular.io/guide/deployment



Not sure I understand what you trying to do, but in package json, you can create the run command as you wish per environment like



"scripts": {
"build:production": "ng build --prod ... + your prod config flags here",
"build:staging": "ng build --prod ... + whatever flags",
"build:dev": "ng build --prod + whatever flags",
}


Check what options you can provide here :



https://angular.io/cli/build



Then from docker file you just



npm run build:production


Hope this helps!






share|improve this answer














Default build production for angular



ng build --prod --build-optimizer


read more here https://angular.io/guide/deployment



Not sure I understand what you trying to do, but in package json, you can create the run command as you wish per environment like



"scripts": {
"build:production": "ng build --prod ... + your prod config flags here",
"build:staging": "ng build --prod ... + whatever flags",
"build:dev": "ng build --prod + whatever flags",
}


Check what options you can provide here :



https://angular.io/cli/build



Then from docker file you just



npm run build:production


Hope this helps!







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 18 '18 at 17:57

























answered Nov 18 '18 at 16:03









freepowder

2796




2796












  • Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
    – Crixo
    Nov 18 '18 at 17:29










  • Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
    – freepowder
    Nov 18 '18 at 17:59




















  • Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
    – Crixo
    Nov 18 '18 at 17:29










  • Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
    – freepowder
    Nov 18 '18 at 17:59


















Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
– Crixo
Nov 18 '18 at 17:29




Yes, I'm aware about that command/parameters, but my question is how to invoke it using "npm run <command> [-- <args>]" not directly the final command
– Crixo
Nov 18 '18 at 17:29












Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
– freepowder
Nov 18 '18 at 17:59






Sorry I got wrong your question, maybe this other solution will help ? Cheers! If you require more custom stuff (looks like), maybe you need to eject webpack config , and then fiddle and adapt config to your needs.
– freepowder
Nov 18 '18 at 17:59




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53353984%2fselect-angular-json-configurations-during-docker-multistage-build%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Biblatex bibliography style without URLs when DOI exists (in Overleaf with Zotero bibliography)

ComboBox Display Member on multiple fields

Is it possible to collect Nectar points via Trainline?