@alauda/custom-webpack

@alauda/custom-webpack

Custom webpack configuration with alauda dev server and other great features

• What features are included?
• Upcoming Features
• Usage
  • Simplest
  • Commands
    • Serve on production mode
    • Minify index.html on building
    • Change console env
  • Advanced
  • Environments
  • Useful Internal API
• LICENSE

What features are included?

• Seamlessly open browser on development, it will try its best to reuse opened browser tab, so that no more redundant browser tabs will be opened like webpack-dev-server --open
• If you've installed global console-cli, it will start the console backend server on development or serve on production mode. What means there will be no need to clone alauda-console and run make dev by yourself. Of course, you'll need to provide a console config file at ~/.consolerc.yml (or any other valid configuration supported by cosmiconfig) with authentication.oidc_client_secret, authentication.oidc_issuer_url and console.api_address.
• Restart console service automatically on configuration changes.
• Bundle with and inject service worker on production automatically.
• Proxy to alauda console automatically on development and serve on production mode.
• Provide html-minifier wrapper hm to minify index.html with common default options.
• dev-console server for development which enables auto-login and no cross-origin (a console config like ~/.consolerc.yml is required)
• Disable proxy api gateway for dev-console so that HTTP2 connection could be enabled for api gateway
• Change alauda console environment quickly with cce command for dev-console or console-cli
• Proxy with HTTPS support when running with ng serve --ssl

Upcoming Features

• HTTP2 support

Other incredible features from you.

Usage

Simplest

• Install Dependencies:

  yarn add -D @alauda/custom-webpack @angular-builders/custom-webpack
  

• Config angular.json:

  // production
  {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "node_modules/@alauda/custom-webpack"
      }
    }
  }
  

  // development
  {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
  

• Config ~/.consolerc.yml (required for console-cli or dev-console)

  authentication:
    http_proxy: proxy_url
    https_proxy: proxy_url
    no_proxy: localhost,127.0.0.1,0.0.0.0
    login: login
    password: password
  console:
    api_address: api_address
    use_platform_api: false # optional, turn true to use /console-platform/api
  defaultUser: # optional
    login: login
    password: password
  envs:
    - name: env_name # optional
      api_address: api_address # required
      login: login # optional, will fallback to #defaultUser.login
      password: password # optional, will fallback to #defaultUser.password
      use_platform_api: false # optional
  

• run ng serve, that's all, hope you like the development workflow.

Commands

Serve on production mode

yarn s

Minify index.html on building

// package.json
{
  "scripts": {
    "postbuild": "hm"
  }
}

Change console env

cce # you can choose to install `@alauda/custom-webpack` globally

? Which alauda console env do you want to use? …
a https://a.example.com (adminA)
b https://b.example.com (adminB)


cce - a # quickly change to specify env

List envs

cce list
activeEnv: a
┌─────────┬──────────┬─────────────────────────┬─────────────────┬───────────────────┬──────────────────┐
│ (index) │   name   │       api_address       │      login      │     password      │ use_platform_api │
├─────────┼──────────┼─────────────────────────┼─────────────────┼───────────────────┼──────────────────┤
│    0    │    'a'   │ 'https://a.example.com' │     'adminA'    │    'passwordA'    │                  │
│    1    │    'b'   │ 'https://b.example.com' │     'adminB'    │    'passwordB'    │       true       │
└─────────┴──────────┴─────────────────────────┴─────────────────┴───────────────────┴──────────────────┘

Advanced

If your need to custom the configuration again on top of @alauda/custom-webpack, you can simply provide a file named webpack.config.js, and config angular.json:

// production
{
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    }
  }
}

// webpack.config.js
import { createRequire } from 'node:module'

import customWebpack from '@alauda/custom-webpack'

const require = createRequire(import.meta.url)

export default config => {
  Object.assign(customWebpack(config).resolve.alias, {
    moment$: 'dayjs/esm',
    'moment-timezone$': require.resolve('./src/app/timezone'),
  })
  // mutate anything you want after calling `customWebpack(config)`
  return config
}

Environments

• ALAUDA_DISABLE_LAZY_COMPILE: Whether to disable lazy compile on development.
• ALAUDA_DISABLE_START_CONSOLE: Whether to disable starting console server automatically, not required if ALAUDA_ENABLE_DEV_CONSOLE is true
• ALAUDA_ENABLE_DEV_CONSOLE: Whether to enable dev console server automatically (highly unrecommended).
• ALAUDA_DISABLE_PROXY_API_GATEWAY: Whether to disable proxy api gateway, if true then the true api address will be used instead, ALAUDA_ENABLE_DEV_CONSOLE is required to take effect

Useful Internal API

• startConsole:

  Control when or whether to start the (dev) console server in background on spawn mode.

  import { startConsole } from '@alauda/custom-webpack/start-console'
  

• Anything you want us to expose?

LICENSE

ISC © Alauda