ngx-builders/netlify-builder

Deploy your Angular app to netlify from CLI

Deploy your Angular app to Netlify directly from the Angular CLI! 🚀

Pre-requisites

• Angular project created via Angular CLI v8.3.0 or greater.

Steps:

1. run ng add @netlify-builder/deploy OR ng add @netlify-builder/deploy --project={projectName} to add necessary dependencies. Once, it get installed,you will be prompted to enter (a) Site Id and (b) Netlify Token

2. run ng deploy assuming that you have Angular CLI installed globally

   OR

   add below script to package.json

   "deploy":"ng deploy"
   

   

Netlify Builder demo

This repository contains an example of the Angular CLI Architect API.

Builder

You can find the Architect builder in the src directory.

Sample application

The sample application which uses the Architect builder is available under the builder-test directory.

License

MIT

Setup

1. Move to src and run the below command

npm i

2. Run the below command to build the package

npm run build

3. run the below command to link the package

npm link

Link to Step by Step Guide

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Nitish Kumar Singh 💻	Shaikh-Ubaid 📖	Suraj Chandgude 💻	Santosh Yadav 💻	Alan Agius 💻	Imran Momin 💻	Michael Hladky 💻
Nilesh Patel 📖	Josh Morony 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

netlify-builder's Issues

Notify user post deployment or failure

The builder should notify user with a valid error message in case of failure. Or provide a success message.

Could not find module "collection.json" while executing ng add

Describe the bug
I have tried to add @netlify-builder/deploy using ng add @netlify-builder/deploy, but it gives following error

An unhandled exception occurred: Could not find module "collection.json"

This are the error logs

[error] Error: Could not find module "collection.json" from "[project_path]\\node_modules\\@netlify-builder\\deploy". at Object.resolve ([project_path]\node_modules\@angular-devkit\core\node\resolve.js:151:11) at NodeModulesEngineHost._resolvePath ([project_path]\node_modules\@angular-devkit\schematics\tools\node-module-engine-host.js:52:25) at NodeModulesEngineHost._resolveCollectionPath ([project_path]\node_modules\@angular-devkit\schematics\tools\node-module-engine-host.js:78:35) at NodeModulesEngineHost.createCollectionDescription ([project_path]\node_modules\@angular-devkit\schematics\tools\file-system-engine-host-base.js:115:27) at SchematicEngine._createCollectionDescription ([project_path]\node_modules\@angular-devkit\schematics\src\engine\engine.js:147:40) at SchematicEngine.createCollection ([project_path]\node_modules\@angular-devkit\schematics\src\engine\engine.js:140:43) at AddCommand.getCollection ([project_path]\node_modules\@angular\cli\models\schematic-command.js:128:35) at AddCommand.runSchematic ([project_path]\node_modules\@angular\cli\models\schematic-command.js:291:50) at AddCommand.executeSchematic ([project_path]\node_modules\@angular\cli\commands\add-impl.js:148:31) at AddCommand.run ([project_path]\node_modules\@angular\cli\commands\add-impl.js:45:25) at AddCommand.validateAndRun ([project_path]\node_modules\@angular\cli\models\command.js:134:39) at process._tickCallback (internal/process/next_tick.js:68:7) at Function.Module.runMain (internal/modules/cjs/loader.js:745:11) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

I have looked into the @netlify-builder/deploy code, as per code collection.json is part of main @netlify-builder folder while it is searching collection.json in deploy folder.

To Reproduce
Execute ng add @netlify-builder/deploy
Expected behavior
should install the dependencies and add configuration in angular.json

docs: document baseHref option

In release 2.0.3 we added an option to include baseHref.

Refer https://github.com/angular-schule/angular-cli-ghpages#--base-href-

Read Netlify arguments from environment variable

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I think netlifyToken and siteId should not commit into VCS because someone could see the token.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Using environment variable instead of setting in angular.json.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/node to v14.18.63
• chore(deps): update dependency ts-node to v10.9.2
• fix(deps): update dependency @angular-devkit/architect to ^0.1703.0
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency jasmine to v5 (jasmine, @types/jasmine)
• fix(deps): update angular-cli monorepo to v17 (major) (@angular-devkit/core, @angular-devkit/schematics)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency jasmine to v3.99.0 (jasmine, @types/jasmine)
• chore(deps): update dependency typescript to v4.9.5
• chore(deps): update dependency typescript to v5
• fix(deps): update dependency netlify to v13

Detected dependencies

github-actions

.github/workflows/nodejs.yml

• actions/checkout v2
• actions/setup-node v1

.github/workflows/npm-publish.yml

• actions/checkout v2
• actions/setup-node v2
• actions/checkout v2
• actions/setup-node v2

npm

src/package.json

• @angular-devkit/architect ^0.1200.0
• @angular-devkit/core ^12.0.0
• @angular-devkit/schematics ^12.0.0
• netlify ^6.1.1
• @types/jasmine 3.7.6
• @types/node 14.17.1
• jasmine 3.7.0
• jasmine-node 3.0.0
• ts-node 10.0.0
• typescript 4.3.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Won't build/deploy with dependencies. Error: "dependencies have not been built yet."

Describe the bug
When deploying a project via netlify-builder I can't deploy without first building dependencies. Adding the --with-deps flag doesn't make a difference.

To Reproduce
Steps to reproduce the behavior:

1. Create a project that is deployed via @netlify-builder/deploy:deploy e.g. deploy target looks like this:

"deploy": {
          "builder": "@netlify-builder/deploy:deploy",
          "options": {
            "outputPath": "dist/apps/my-app/www"
          },
          "configurations": {
            "production": {
              "siteId": "your-side-id"
            }
          }
        }

2. Create a ui library depency (do not build)
3. try to deploy via your netlify builder
4. See error Some of the project project-name dependencies have not been built yet. Please build these libraries before:
5. Try to add the --with-deps flag before running e.g. nx deploy your-app
6. Same error is thrown

Console:

$ nx deploy my-app --with-deps

> nx run my-app:deploy 
Executing netlify deploy command ...... 
📦 Building "my-app". Configuration: "production". Build Command: build. 
Some of the project my-app's dependencies have not been built yet. Please build these libraries before:
- core

Try: nx run my-app:build --with-deps
❌ Application build failed

———————————————————————————————————————————————

>  NX   ERROR  Running target "deploy" failed

  Failed projects:
  
  - my-app

Expected behavior
There needs to be a way to build with dependencies

Current Workaround

1. First runnpm run nx affected -- --target=build --with-deps // this will build dependencies
2. Then run npm run nx affected -- --target=deploy

README suggestion: tell me what "ng deploy" does

Is your feature request related to a problem? Please describe.
I'm a first-time Netlify user. (And pretty new to Angular.) I deployed my repo once as a static site, then generated a new angular project inside it.
When googling "netlify angular," I find this repository. But it doesn't help me understand Netlify or Angular or what it is I should expect.

Describe the solution you'd like
When reading the README, I would like it to say what happens on "ng deploy" that doesn't on a "git push."
Does it change the configuration of my site on Netlify? does it perform a local build or one on Netlify? Is this deploy going to be overridden when I push to main?

Describe alternatives you've considered
I got here from this article which has the same problem, I don't understand what the builder does: https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify/ (I'd leave an issue there instead, if that were as easy.)

Additional context
Thanks for your work creating and maintaining this.

Custom build target before deploy to netlify

Is your feature request related to a problem? Please describe.
I plan to use netlify-builder with Next.js. The problem is when building Next.js need additional step to deploy as static. It needs to run export command to build a production bundle and generate to static site. When I use nx affected:export as I've customized I found that I can't force buildTarget to export before deploy to Netlify.

Describe the solution you'd like
In src/deploy/index.ts#L29 I think if we can add custom builderOption like buildTarget which is default to build it will give me customization to change it to export which build and export static webpage for Next.js before deploying to Netlify.

If you allow me to PR so I can work on this and PR here. Maybe it doesn't relate to Angular directly so feel free to discuss. Thank you.

deploy fails if following the tutorial - fix is to add relative paths (relative to the build script)

Describe the bug
When trying to deploy using the nx plugin, I get an error that says "deployment failed" after investigating the source, and adding some console.logs - the error said the file wasn't present.

To Reproduce
Steps to reproduce the behavior:

1. Create nx project
2. Follow tutorial here: https://www.netlify.com/blog/2020/04/21/deploying-nx-monorepos-to-netlify/
3. enter the outputPath": "dist/apps/your-app-output"
4. run in the terminal: NETLIFY_TOKEN=your_token nx deploy your-app
5. it wil fail - without explanation

To Fix
3. enter the outputPath": "../../../dist/apps/your-app-output" - this is relative to the build script in node_modules

Expected behavior
I would expect to put the path as explained in the tutorial - relative to my project.
outputPath": "dist/apps/your-app-output"

fix security vulnerabilities reported

align app structure to ngx-deploy-starter

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.
The application structure is not aligned to ngx-deploy-starter
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
NA
Additional context
Add any other context or screenshots about the feature request here.
refer https://github.com/angular-schule/ngx-deploy-starter for structure

Align options with RFC 1 of ngx-deploy-starter

I have started a discussion at ngx-deploy-starter RFC #1 about a standardised set of options. It would be great if we could find a common approach so that the expected behaviour and usability of the different builders are consistent.

Currently, there could be a majority for the following options:

• --configuration (alias -c): A named build target, as specified in the "configurations" section of angular.json
• --no-build: Skip build process during deployment

Right now for netlify-builder only --configuration is supported, the alias is missing as well as the --no-build option.

Additionally, https://github.com/ngx-builders/netlify-builder/blob/master/command-builder/deploy/schema.json could be fixed.

Remove the sample app added in solution

Currently, we have an angular app for testing the builder, we no longer need the app and it can be removed now.

Add contributors list

Add contributors list to readme.md

Add type definition for netlify package

https://www.npmjs.com/package/netlify

The above package is only available for javascript need to create and publish the type definition package

Add the videos and blog post from Tara to docs

Videos:
https://youtu.be/tILx6ylyP_4
https://youtu.be/yHETIuM391E
https://youtu.be/yHETIuM391E

Blog post:
https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify/

Improvement: Environment config values should not be part of angular.json

Improvement: Environment config values should not be part of angular.json specially if these are sensitive.

Recommendation:
should be move to src/environment/environment*.json

Please let me know what do you think.
** This is not an bug or feature :)

implement ng add to package

Currently, we need to configure the everything manually.

ng add will automate adding deploy config to angular.json
and install the package locally.

Add netlify package to deploy the application

The below package is available to use the netlify API
https://www.npmjs.com/package/netlify

Support to read configuration parameter from environment variable

Is your feature request related to a problem? Please describe.

In my scenario, I have a stage and production environment and stage is for preview purpose and stage have its own build configuration.

Describe the solution you'd like

Let CI decides to build for stage or production by an environment variable.

Implement implementation to verify if site exist if not create one

Netlify API provides the Methods to create site and retrieve list of sites.

const NetlifyAPI = require('netlify')
const client = new NetlifyAPI('1234myAccessToken') -- API to be provide via config or while deployment

// Fetch sites
const sites = await client.listSites()

// Create a site. Notice body here for sending OpenAPI body
const site = await netlify.createSite({
body: {
name: my-awesome-site
// ... https://open-api.netlify.com/#/default/createSite
}
})

Create site if siteId does not exist. use existing if it exist.

Add option for baseHref

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
When building for production we may want to deploy on a context.
Describe the solution you'd like
A clear and concise description of what you want to happen.
Have an option to pass baseHref while build
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Support to read configuration from netlify-config.json (generate in ng add, and mentioned in .gitignore)

Is your feature request related to a problem? Please describe.
I have tested netlify-builder using environment variable configuration, and it is working fine.
This will work for the single application, but how it will work for multiple applications ?,
Though NETLIFY_TOKEN can be common for all sites, but site id will be different for each site. So whenever I want to deploy for particular site, I need to set NETLIFY_API_ID environment variable with Site ID of that application. which is not a proper solution.

Describe the solution you'd like

Solution 1 : I am not sure whether sharing site id is secure or not ? if sharing site id is secure then we can add site id in angular.json directly and NETLIFY_TOKEN in environment variable - For this solution, development is not required. this will work with current builder.

Solution 2: During ng add we can create separate netlify-config.json file, put netlify-builder configuration there, and add it in .gitignore. So it will not get committed in git and we can access parameters from this file (the way it is implemented in angularfire2 deploy)

Additional context
If we are reading configuration from environment variable, it should not ask for site id and netlify token id, in ng add,
For this either we can ask initially whether user want to configure it through environment variable or he want to add it now in angular.json( or in netlify-config.json if this feature is implemented.)

add build task withing deploy

Currently, we need to build and deploy the app in 2 steps.

Add build task into deploy so the user can deploy in a single step.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

document how to use ng add with the package in Readme

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
ng-add support is added to the package, we need to add the step on how to use it with ng-add.
Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Wrong filename report when ng adding to a single-app Nx workspace

❤️ for this plugin!

Describe the bug
A minor, one could say cosmetic, issue, but can be misleading to beginners.

To Reproduce
On an Nx/angular single-app wporkspace, meaning:

• there is no angular.json file
• there is just a single app, living at src/app
• there is one project.json and nx.json living at the repo root

When you run this command ng add @netlify-builder/deploy
you get this message in cli

while the actual file that gets modified is project.json

Expected behavior
project.json is should be the cli output

Otherwise once again: ❤️ for this plugin!

Implement deploy method to deploy the app

https://github.com/netlify/js-client

https://github.com/netlify/js-client#promisedeploy--clientdeploysiteid-builddir-opts

The above API is available to deploy the website.