Select angular.json configurations during docker multistage build
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
add a comment |
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
It seems to benpm 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
add a comment |
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
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
angular docker-multi-stage-build angular-config
asked Nov 17 '18 at 17:58
Crixo
2,5591624
2,5591624
It seems to benpm 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
add a comment |
It seems to benpm 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
add a comment |
1 Answer
1
active
oldest
votes
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!
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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!
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
add a comment |
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!
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
add a comment |
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!
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!
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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