diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index a35a1cda8a0..ed699f2395a 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -52,7 +52,7 @@ jobs: run: git diff --exit-code --raw -p --stat - name: Compile Angular - run: npm run ng -- build --aot + run: npm run build client - name: Compile Unit Tests run: npx tsc -p tsconfig.all.json diff --git a/.github/workflows/windows.yml b/.github/workflows/windows.yml index 36b0addfdd1..2090df58acd 100644 --- a/.github/workflows/windows.yml +++ b/.github/workflows/windows.yml @@ -55,4 +55,6 @@ jobs: node scripts/init-local-environment -f - name: Build with local environment - run: npm run ng -- build -c local + run: | + npm config set intershop-pwa:default-build-configuration local + npm run build client diff --git a/Dockerfile b/Dockerfile index 0ef6aa4b13c..c16e55bbf7c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,7 +9,8 @@ COPY projects/requisition-management/src/app /workspace/projects/requisition-man COPY src /workspace/src/ COPY tsconfig.app.json tsconfig.app-no-checks.json tsconfig.json ngsw-config.json .browserslistrc angular.json /workspace/ RUN npm run build:schematics && npm run synchronize-lazy-components -- --ci -ARG configuration=production +ARG configuration +RUN test -z "${configuration}" || npm config set intershop-pwa:default-build-configuration ${configuration} COPY scripts /workspace/scripts/ RUN test "${configuration}" = 'local' && node scripts/init-local-environment.js || true ARG serviceWorker @@ -17,13 +18,13 @@ RUN node schematics/customization/service-worker ${serviceWorker} || true COPY templates/webpack/* /workspace/templates/webpack/ ARG testing=false ENV TESTING=${testing} -RUN npm run ng -- build -c ${configuration} +RUN npm run build client # synchronize-marker:pwa-docker-build:end # ^ this part above is copied to Dockerfile_noSSR and should be kept in sync COPY tsconfig.server.json server.ts /workspace/ -RUN npm run ng -- run intershop-pwa:server -c ${configuration} +RUN npm run build server # remove cache check for resources (especially index.html) # https://github.com/angular/angular/issues/23613#issuecomment-415886919 RUN test "${serviceWorker}" = "true" && sed -i 's/canonicalHash !== cacheBustedHash/false/g' /workspace/dist/browser/ngsw-worker.js || true diff --git a/Dockerfile_noSSR b/Dockerfile_noSSR index 72b48465127..522949811e7 100644 --- a/Dockerfile_noSSR +++ b/Dockerfile_noSSR @@ -9,7 +9,8 @@ COPY projects/requisition-management/src/app /workspace/projects/requisition-man COPY src /workspace/src/ COPY tsconfig.app.json tsconfig.app-no-checks.json tsconfig.json ngsw-config.json .browserslistrc angular.json /workspace/ RUN npm run build:schematics && npm run synchronize-lazy-components -- --ci -ARG configuration=production +ARG configuration +RUN test -z "${configuration}" || npm config set intershop-pwa:default-build-configuration ${configuration} COPY scripts /workspace/scripts/ RUN test "${configuration}" = 'local' && node scripts/init-local-environment.js || true ARG serviceWorker @@ -17,7 +18,7 @@ RUN node schematics/customization/service-worker ${serviceWorker} || true COPY templates/webpack/* /workspace/templates/webpack/ ARG testing=false ENV TESTING=${testing} -RUN npm run ng -- build -c ${configuration} +RUN npm run build client # synchronize-marker:pwa-docker-build:end # ^ this part above is copied from the standard Dockerfile and should be kept in sync diff --git a/Dockerfile_reports b/Dockerfile_reports index dfdb978c4a4..b0694595df6 100644 --- a/Dockerfile_reports +++ b/Dockerfile_reports @@ -9,8 +9,8 @@ RUN npx license-checker --csv --out reports/licenses/licenses.csv --customPath t RUN npm run compodoc RUN npm i --no-save jscpd-html-reporter && node reports/jscpd-report RUN npm i -g webpack-bundle-analyzer -RUN rm -Rf dist && npx ng build --progress false --aot --stats-json && webpack-bundle-analyzer dist/browser/stats.json dist/browser -r reports/bundle_aot/index.html -m static -RUN rm -Rf dist && npx ng build --progress false --prod --stats-json && webpack-bundle-analyzer dist/browser/stats.json dist/browser -r reports/bundle_prod/index.html -m static +RUN rm -Rf dist && npm run build client -- --progress false --aot --stats-json && webpack-bundle-analyzer dist/browser/stats.json dist/browser -r reports/bundle_aot/index.html -m static +RUN rm -Rf dist && npm run build client -- --progress false --prod --stats-json && webpack-bundle-analyzer dist/browser/stats.json dist/browser -r reports/bundle_prod/index.html -m static FROM danjellz/http-server COPY --from=reporting /workspace/reports /public diff --git a/docs/concepts/deployment-angular.md b/docs/concepts/deployment-angular.md index 7e6a245cdcd..ce0b2d1b07a 100644 --- a/docs/concepts/deployment-angular.md +++ b/docs/concepts/deployment-angular.md @@ -10,7 +10,7 @@ kb_sync_latest_only ## Simple Browser-Side Rendering Angular applications are built for a [static deployment][angular-deployment] by default. -When running `ng build` in any shape or form, the build output is aggregated in the `dist` folder and the resulting files can be statically served using any HTTP server that is capable of doing that (only a [fallback](https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml) for `index.html` has to be configured). +When running `npm run build client` in any shape or form, the build output is aggregated in the `dist` folder and the resulting files can be statically served using any HTTP server that is capable of doing that (only a [fallback](https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml) for `index.html` has to be configured). When the application is served this way, the initial page response for the browser is minimal (`index.html` with scripts inserted) and the application gets composed and rendered on the client side. diff --git a/docs/guides/continuous-integration.md b/docs/guides/continuous-integration.md index 98f4041350c..e55d796ca48 100644 --- a/docs/guides/continuous-integration.md +++ b/docs/guides/continuous-integration.md @@ -16,10 +16,9 @@ This section provides an overview of required continuous integration steps to ve Since Angular projects are JavaScript-based, even though they use TypeScript-based code, everything is highly dynamic. Parts of the software can still run error free with `webpack-dev-server` (`ng serve`), even if other parts were not compiled or have template errors. -To ensure having a consistent code base, the CI system should always perform at least an ahead-of-time compile step (`ng build --aot`). - +To ensure having a consistent code base, the CI system should always perform at least an ahead-of-time compile step. Angular in production mode does AoT and applies some more code optimizations that can sometimes clash with definitions or third-party libraries. -To catch this, a production build should be performed: `ng build --prod`. +To catch this, a production build should be performed: `npm run build`. To check the integrity of the unit tests, the TypeScript compiler can be used: `npx tsc -p src/tsconfig.spec.json`. diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md index 067cea61dbc..b4e035963c1 100644 --- a/docs/guides/getting-started.md +++ b/docs/guides/getting-started.md @@ -68,7 +68,7 @@ Deployments are generated to the _dist_ folder of the project. Use `npm run build` to generate an Angular Universal enabled version. On the server the _dist/server.js_ script has to be executed with `node`. -Alternatively, you can use `ng build --prod` to get an application using browser rendering. +Alternatively, you can use `npm run build client` to get an application using browser rendering. All the files under `dist/browser` have to be served statically. The server has to be configured for fallback routing, see [Server Configuration in Angular Docs](https://angular.io/guide/deployment#server-configuration). diff --git a/package.json b/package.json index fc9c6a27d4d..8da6525af59 100644 --- a/package.json +++ b/package.json @@ -38,9 +38,9 @@ "compodoc": "npx @compodoc/compodoc -p tsconfig.doc.json -d docs/compodoc -y docs/theme --hideGenerator", "compodoc:serve": "npm run compodoc -- -s -w", "synchronize-lazy-components": "ng g lazy-components", - "build:watch": "ng build --aot --watch", + "build:watch": "npm run build client -- --aot --watch", "build": "node scripts/build-pwa", - "analyze": "ng build --prod --stats-json && npx webpack-bundle-analyzer --host 0.0.0.0 dist/browser/stats.json dist/browser", + "analyze": "npm run build client -- --stats-json && npx webpack-bundle-analyzer --host 0.0.0.0 dist/browser/stats.json dist/browser", "serve": "node dist/server/main.js", "start": "npm-run-all build serve", "start:local": "ng run intershop-pwa:serve-ssr:local" @@ -193,7 +193,8 @@ "config": { "commitizen": { "path": "./node_modules/cz-customizable" - } + }, + "default-build-configuration": "production" }, "postinstall": { "jest-extended/types": "copy node_modules/@types/jest-extended" diff --git a/scripts/build-pwa.js b/scripts/build-pwa.js index 46e0f90e3fb..abd213712ca 100644 --- a/scripts/build-pwa.js +++ b/scripts/build-pwa.js @@ -10,10 +10,23 @@ if (configuration === 'true') { } if (!configuration) { - console.log('falling back to configuration "production"'); - configuration = 'production'; + configuration = process.env.npm_package_config_default_build_configuration || 'production'; + + console.log(`falling back to configuration "${configuration}"`); console.log('you can run other configuration(s) with npm using the form "--configuration=,production"'); } -execSync('npm run ng -- build -c ' + configuration, { stdio: [0, 1, 2] }); -execSync('npm run ng -- run intershop-pwa:server -c ' + configuration, { stdio: [0, 1, 2] }); +const client = process.argv[2] !== 'server'; +const server = process.argv[2] !== 'client'; +const partial = (client && server) || !(client && server); +const remainingArgs = process.argv.slice(partial ? 3 : 2); + +if (client) { + execSync(`npm run ng -- build -c ${configuration} ${remainingArgs.join(' ')}`, { stdio: 'inherit' }); +} + +if (server) { + execSync(`npm run ng -- run intershop-pwa:server -c ${configuration} ${remainingArgs.join(' ')}`, { + stdio: 'inherit', + }); +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index d9609b03c90..75dd32adfc1 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,10 +1,5 @@ import { ENVIRONMENT_DEFAULTS, Environment } from './environment.model'; -// The file contents for the current environment will overwrite these during build. -// The build system defaults to the dev environment which uses `environment.ts`, but if you do -// `ng build --prod` then `environment.prod.ts` will be used instead. -// The list of which configuration maps to which file can be found in `angular.json`. - export const environment: Environment = { ...ENVIRONMENT_DEFAULTS,