JHipster - Create a new Angular Front End Environment

Question

I have deployed on a NGnix server a JHipster (6.10.1) generated Angular FrontEnd. I would like to deploy this FrontEnd relying on some specific environment configuration(dev, prod, staging, etc.)

I know it is possible with Angular to customize the configuration by using/creating some files like :

• environment.dev.ts
• environment.prod.ts
• environment.staging.ts

and using the ng build --configuration=staging

What kind of parameters should I add in the package.json file to select the correct environment using a npm run build:<ENV> command?

Regards...

UPDATE 08/09

Thank you millenion, I would like to use only native Angular solution as you've described. Unfortunately, as I use JHipser , it would be better that I just extend what does already exist instead of creating a different way to deploy others environments. That means it would be better to have counterpart solution to the existing ones, based on webpack .

Nonetheless, all the necessary modifications (that you've described) in the angular.json file had already been done. There are many plugins and loaders in the webpack.common.js and in the webpack.prod.js that I would like to be used while deploying in lower environments.

For example there are the kind of plugins in the webpack.common.js :

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {            
                NODE_ENV: `'${options.env}'`,
                BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
                // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
                VERSION: `'${process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV'}'`,
                DEBUG_INFO_ENABLED: options.env === 'development',
                // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
                // If this URL is left empty (""), then it will be relative to the current context.
                // If you use an API server, in `prod` mode, you will need to enable CORS
                // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
                SERVER_API_URL: `''`
            }

        }),
        new CopyWebpackPlugin([
            { from: './node_modules/swagger-ui-dist/*.{js,css,html,png}', to: 'swagger-ui', flatten: true, ignore: ['index.html'] },
            { from: './node_modules/axios/dist/axios.min.js', to: 'swagger-ui' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/content/', to: 'content' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
            // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' }
        ]),
        new HtmlWebpackPlugin({
            template: './src/main/webapp/index.html',
            chunks: ['polyfills', 'main', 'global'],
            chunksSortMode: 'manual',
            inject: 'body'
        }),
        new BaseHrefWebpackPlugin({ baseHref: '/' }),
        new AngularCompilerPlugin{
            mainPath: utils.root('src/main/webapp/app/app.main.ts'),
            tsConfigPath: utils.root('tsconfig.app.json'),
            sourceMap: true
        })
    ]

The interesting plugins are DefinePlugin and AngularCompilerPlugin

To deploy an Angular app, relying on webpack and some specific configurations, I guess I need to load some variables took from the environment.<env_name>.ts file, send them to the DefinePlugin which feeds the AngularCompilerPlugin plugin.

There are the scripts located in the package.json file :

"scripts": {
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,css,scss,yml}\"",
    "lint": "eslint . --ext .js,.ts",
    "lint:fix": "npm run lint -- --fix",
    "ngc": "ngc -p tsconfig.app.json",
    "cleanup": "rimraf target/classes/static/ target/classes/aot",
    "clean-www": "rimraf target/classes/static/app/{src,target/}",
    "start": "npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "serve": "npm run start",
    "build": "npm run webpack:prod",
    "test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
    "test:watch": "npm run test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-www",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  }

Finally, the question, is most likely : How can I pass parameters in such a way the following command :

npm run webpack:staging:main

deploys the app with the staging environment configuration?

Fred

Answer 1

You can do it by adding proper configuration in angular.json file .

In your case, you probably want to add a new block in angular schematics and add something like:

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.staging.ts"
            }
          ],

For your new environments, i recommend basing it on either "production" or "dev" blocks, depending on what behaviour you're expecting. Just be careful when passing parameters by doing:

npm run build -- --staging

Concerning your package.json, i usually use two options: outputPath and deleteOutputPath. The second is nice to get a clean directory. It's not necessary, but convenient:

"build:staging": "ng build --staging --outputPath=YourOutputPath --deleteOutputPath=true",

That way you can just do:

npm run build:staging

If you want to add SSR to your project, this is going to take a bit more work, though it is much easier than back then.

Full doc might help => https://angular.io/cli/build