@angular-custom-builders/lite-serve

lite-serve

This builder allows you to run a lite-server with an existing dist folder. Useful in case of a CI/CD to avoid to build the project as part of the ng e2e command.

The only mandatory option is browserTarget. Using the target the lite-serve builder is able to figure out the path of the dist folder.

Options

browserTarget: Target to serve

port: Port to listen on. Default 4200

logLevel: Can be either "info", "debug", "warn", or "silent". Default: info

watch: Rebuild on change. Default false

open: Opens the url in default browser. Default false

How to use it

Basic Configuration

"example-app": {
      "projectType": "application",
      "root": "apps/example-app",
      "sourceRoot": "apps/example-app/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apps/example-app"
          }
        },
        "lite-serve": {
          "builder": "@angular-custom-builders/lite-serve:dist-serve",
          "options": {
            "browserTarget": "example-app:build"
          }
        }
      }

1. Build the example app to generate the dist folder dist/apps/example-app

nx build example-app

1. Run the e2e without rebuilding the app

nx run example-app:lite-serve

Override the default Configuration

"example-app": {
      "projectType": "application",
      "root": "apps/example-app",
      "sourceRoot": "apps/example-app/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apps/example-app"
          }
        },
        "lite-serve": {
          "builder": "@angular-custom-builders/lite-serve:dist-serve",
          "options": {
            "browserTarget": "example-app:build"
          },
          "configuration": {
            "verbose": {
              "port": 9999,
              "open": true,
              "logLevel": "debug"
            }
          }
        }
      }

1. Build the example app to generate the dist folder dist/apps/example-app

nx build example-app

1. Run the e2e with a custom configuration

nx run example-app:lite-serve:verbose

Quick-start using Nx

1. Create a new project with the nx cli.

   npx create-nx-workspace@latest workspace --preset="angular" --appName="myapp" --style="css"
   cd myapp
   

2. Add lite-serve dependency

   yarn add -D @angular-custom-builders/lite-serve
   

3. Add a new section on the app

   "lite-serve": {
      "builder": "@angular-custom-builders/lite-serve:dist-serve",
      "options": {
        "browserTarget": "myapp:build"
      }
    }
   

4. Change the e2e to use the lit-serve

In case of Cypress

"e2e": {
   "builder": "@nrwl/cypress:cypress",
   "options": {
     "cypressConfig": "apps/myapp-e2e/cypress.json",
     "tsConfig": "apps/myapp-e2e/tsconfig.e2e.json",
     "devServerTarget": "myapp:lite-serve"
   }
 },

In case of Protractor

"e2e": {
   "builder": "@angular-devkit/build-angular:protractor",
   "options": {
     "protractorConfig": "apps/admin-ee-e2e/protractor.conf.js",
     "devServerTarget": "myapp:lite-serve"
   }
 },

1. Run the e2e with an existing dist folder

   ng run myapp-e2e:e2e