angular-schule / ngx-deploy-starter

Starter repository to create a new builder to utilize the `ng deploy` command 🚀

@angular-schule/ngx-deploy-starter 🚀

About

This is a sample project that helps you to implement your own deployment builder (ng deploy) for the Angular CLI. The groundwork of this starter was provided by Minko Gechev's ngx-gh project.

This project has the following purposes:

Goal 1: To promote the adoption of ng deploy by providing a blueprint for new builders.
Goal 2: To clarify various questions and to standardise the experience of the existing builders.

We hope for an inspiring discussion, pull requests and questions.

If you don't know ng deploy yet, learn more about this command here:
👉 Blogpost: All you need to know about ng deploy

Projects based on ngx-deploy-starter

• angular-cli-ghpages – Deploy your Angular app to GitHub pages directly from the Angular CLI! 🚀
• ngx-deploy-docker – Deploy your Angular Application to a Docker registry directly from the Angular CLI! 🚀
• ngx-deploy-npm – Deploy your Angular Package to NPM directly from the Angular CLI! 🚀
• ngx-deploy-ftp – Deploy Angular apps to an FTP remote using the Angular CLI! 🚀

Goal 1: How to make your own deploy builder

We are there to assist you in creating a builder.

1. fork this repository
2. adjust the package.json
3. search and replace for the string @angular-schule/ngx-deploy-starter and ngx-deploy-starter and choose your own name.
4. search and replace for the string to the file system and name your deploy target.
5. add your deployment code to src/engine/engine.ts, take care of the tests
6. follow the instructions from the contributors README for build, test and publishing.

You are free to customise this project according to your needs. Please keep the spirit of Open Source alive and use the MIT or a compatible license.

Goal 2: Best practices for deployment builders

This project also aims to be a reference for the existing builders. Recommendations are made through RFCs (Request for Comments), and we are very pleased about their adoption. Here is a list of all existing RFCs.

License

Code released under the MIT license.

ngx-deploy-starter's Issues

How to debug ?

How to debug the deployer that you are building?

---

I found a way but I don't feel confortable with that...

Put a debugger when you want your code stops and:

1. compile
2. link
3. install linked
4. And run node --inspect ./node_modules/@angular/cli/bin/ng deploy your-project
5. Use your favorite debugger to debug

The steps 1-4 are in the contributions steps

Jest types didn't found

When you are writing test, jest types are not found and you miss the auto-completion feature of typescript

To reproduce this bug, just open any test file and see that everything related with jest is not defined

fix: throws an error if app building fails #85

TODO: apply the changes from angular-schule/angular-cli-ghpages#85

Ignore Code Coverage folder

The code coverage report folder is not being ignored so when you generate the coverage, 25 wild files appeared.

We need just add these lines on the .gitignore.

# Coverage directory used by tools like istanbul
coverage

I already did it on ngx-deploy-npm.

Adding Prettier Formatter

Hi,

When I forked the project, adding Prettier was one of my first steps.
As it is very popular and provides standard formatting for every contribution, I suggest to use Prettier.

If you like me to do so, I would prepare a PR with Prettier configured. I could also add pretty-quick and husky to enforce formatting in a pre-commit hook.

Let me know how you think about it 👂

Mark repository as template

This allows other users to easily create a deploy tool from the existing code. See this help article for more info on template repositories.

Once the repository is marked as a template, a "Use this template" button will be shown above the file list. See this help article for more info.

fix: save package in devDependencies

Apply the same PR from angular-schule/angular-cli-ghpages#81

@alan-agius4 wrote:

In the latest versions of the CLI ng-add packages can be added to devDependencies and this package is perfect for such use case since it's only needed for development.

See: angular/angular-cli#15815

ngx-deploy-starter logo?

It would be nice to have a logo for this project.

You can put it on https://angularlogos.com and will be a window open to more people come across with this project, like a passive advertisement.

I set the ngx-deploy-npm logo on that page

Refactor Build

What about of having two separate package.json files?

One outside the src folder for development that will contain all the development stuff (test, build, lint, prettier, publishing, etc) and the other one inside src that would be the one that is going to be on the dist.

Personally it's little bit frustrating having the package.json inside the src folder, I always forget to step into the right folder to execute npm install.

I think with this movement will rise my development satisfaction.

Originally posted by @dianjuar in #28 (comment)

How to specify which project ?

Reading the source code I saw that you can specify which project add the deployer, if don't, it takes the default project.

I tried with

ng add custom-deploy --project="my-project"
ng add custom-deploy --project=my-project
ng add custom-deploy project "my-project"

Without success....

---

Also the ng add documentation doesn't say anything about options

Yarn: unmet peer dependency "@angular-devkit/architect

I'm seeing the same. Here's a repro:

$ git clone [email protected]:beeman/angular-cli-ghpages-test.git
$ cd angular-cli-ghpages-test
$ yarn
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "@angular-devkit/architect@>= 0.900 < 0.1200".
warning " > [email protected]" has unmet peer dependency "@angular-devkit/core@^9.0.0 || ^10.0.0 || ^11.0.0".
warning " > [email protected]" has unmet peer dependency "@angular-devkit/schematics@^9.0.0 || ^10.0.0 || ^11.0.0".
[4/4] 🔨  Building fresh packages...
✨  Done in 65.31s.

Originally posted by @beeman in angular-schule/angular-cli-ghpages#120 (comment)

Compiler with not general propose logic

I found a piece of code in a general propose function that is probably attach to angular-cli-ghpages

ngx-deploy-starter/src/deploy/actions.ts

Lines 23 to 27 in aaf720a

	const overrides = {
	...(options.baseHref && {baseHref: options.baseHref})
	};
	context.logger.info(`📦 Building "${ context.target.project }". Configuration: "${ configuration }".${ options.baseHref ? ' Your base-href: "' + options.baseHref + '"' : '' }`);

You can see that says something about a baseHref

Add test suite for engine.spec.ts

Shame on me!