Skip to content

Deploy your Angular Application to a Docker registry directly from the Angular CLI! πŸš€

License

Notifications You must be signed in to change notification settings

kauppfbi/ngx-deploy-docker

Repository files navigation

ngx-deploy-docker πŸš€πŸ³

This Project is still work in progress.

CI Pipeline NPM version The MIT License

Dockerize your Angular application with ease and deploy your image right from the Angular CLI to a registry πŸš€

Table of contents:

  1. πŸ“– Changelog
  2. πŸš€ Quick Start (local development)
  3. πŸš€ Continuous Delivery
  4. πŸ“¦ Options
  5. πŸ“ Configuration File
  6. 🏁 Next milestones

πŸ“– Changelog

A detailed changelog is available here.

πŸš€ Quick Start (local development)

This quick start assumes that you are starting from scratch. If you already have an existing Angular project, skip step 1.

  1. Install the latest version of the Angular CLI (v13.0.0 or greater) globally and create a new Angular project. Make sure you have a suitable version of nodeJs installed.

    npm install -g @angular/cli
    ng new your-angular-project --defaults
    cd your-angular-project
  2. Add ngx-deploy-docker to your project.

    ng add ngx-deploy-docker
  3. Make sure, Docker works properly on your client and you are authenticated at the repository of your choice.

    docker login
  4. Deploy your newly built image to the registry with all default settings. Your project will be automatically built in production mode.

    ng deploy

    Which is the same as:

    ng deploy your-angular-project

πŸš€ Continuous Delivery

...more to come

πŸ“¦ Options

--base-href

  • optional
  • Default: undefined (string)
  • Example:
    • ng deploy – The tag <base href="/"> remains unchanged in your index.html
    • ng deploy --base-href=/XXX/ – The tag <base href="/XXX/"> is added to your index.html

Specifies the base URL for the application being built. Same as ng build --base-href=/XXX/

--build-target

  • optional
  • Example:
    • ng deploy – Angular project is build in production mode
    • ng deploy --build-target=<app>:build:test – Angular project is using the configuration test (this configuration must exist in the angular.json file)

A named build target, as specified in the configurations section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Same as ng run <app>. This command has no effect if the option --no-build option is active.

--no-build

  • optional
  • Default: false (boolean)
  • Example:
    • ng deploy – Angular project is build in production mode before the deployment
    • ng deploy --no-build – Angular project is NOT build

Skip build process during deployment. This can be used when you are sure that you haven't changed anything and want to deploy with the latest artifact. This command causes the --build-target setting to have no effect.

--image-name

  • optional
  • Example:
    • ng deploy – Docker Image is build with the name of the project as image name
    • ng deploy --image-name=your-special-name – Docker Image is built with the name provided.

--account

  • optional
  • Alias: -a
  • Default: `` (string)
  • Example:
    • ng deploy – Docker Image name is not prefixed.
    • ng deploy --account=test – Docker image name is prefixed with the provided account, like account/image-name.

This option may be necessary, depending on your write-rights within the repository, you want to push to.

--tag

  • optional
  • Alias: -t
  • Default: latest (string)
  • Example:
    • ng deploy – Docker Image is build with the tag latest, e.g.account/image-name:latest
    • ng deploy --tag=v1.0.0 – Docker Image is build with the tag v1.0.0

πŸ“ Configuration File

To avoid all these command-line cmd options, you can write down your configuration in the angular.json file in the options attribute of your deploy project's architect. Just change the kebab-case to lower camel case. This is the notation of all options in lower camel case:

  • baseHref
  • buildTarget
  • noBuild
  • imageName
  • account
  • tag

A list of all available options is also available here.

Example:

ng deploy --build-target=<app>:build:production --tag=next

becomes

"deploy": {
  "builder": "ngx-deploy-docker:deploy",
  "options": {
    "buildTarget": "<app>:build:production",
    "tag": "next"
  }
}

And just run ng deploy πŸ˜„.

🏁 Next milestones

  • Setup of CI/CD Pipeline for the project
  • Code Restructuring:
    • Modularization of Schematics and Builders
    • Use what you need
  • Testing, Testing, Testing:
    • Manual tests on different clients with different OS
    • Unit and Integration Tests
  • Add more options to the deploy builder, what do you need?
  • Integration in NxWorkspace
  • πŸ’… Kubernetes deployment right from the CLI
  • preparing examples of how to use the package in CI environment with different Providers for private registries
  • your feature that's not on the list yet?

We look forward to any help. PRs are welcome! πŸ˜ƒ

License

Code released under the MIT license.


Attribution

πŸš€ Powered By ngx-deploy-starter

πŸ”₯ Many things have been taken over from transloco