chore: add dynamic tempalte logic to inject projectName

Author: lindsaylevine

README.md

@@ -12,27 +12,14 @@ This build plugin is a utility for supporting Angular Universal on Netlify.
 
 ## Installation and Configuration
 
-The schematic commands will create a `netlify.toml` in the root of your project, if it doesn't already exist. Your file should include the correct build command, publish directory, and plugins section below. Note: the build command requires you to include your custom project name (as indicated in your angular.json) where designated below:
-
-```toml
-[build]
-  command = "ng build --configuration production && ng run {projectName}:serverless:production"
-  publish = "dist/netlify-serverless/browser"
-
-[[plugins]]
-  package = "@netlify/plugin-angular-serverless"
-```
-
-## Installation and Configuration
-
 ### Manual Installation
 
 Create a `netlify.toml` in the root of your project. Your file should include the plugins section below:
 
 ```toml
 [build]
   command = "ng build --configuration production && ng run {projectName}:serverless:production"
-  publish = "dist/netlify-serverless/browser"
+  publish = "dist/{projectName}/browser"
 
 [[plugins]]
   package = "@netlify/plugin-angular-serverless"
@@ -41,7 +28,7 @@ Create a `netlify.toml` in the root of your project. Your file should include th
 If you'd like to install this plugin at a fixed version, install it via your package manager:
 
 ```bash
-# yarn add @netlify/plugin-angular-universal
+yarn add @netlify/plugin-angular-universal
 npm install --save @netlify/plugin-angular-universal
 ```
 
@@ -50,6 +37,17 @@ in our docs.
 
 ## CLI Usage
 
+### Plugin Side Effects
+
+This plugin will make direct changes to your project source when run via the CLI:
+
+1. It will modify your angular.json to add a `serverless` project configuration.
+2. It will add `serverless.ts` and `tsconfig.serverless.json` files.
+
+It is up to you whether to commit these changes to your project. If the plugin makes updates to these files or configurations, it will overwrite what you'd previously committed, and you can commit the new updates. Otherwise, you can stash and ignore them.
+
+### Workflow
+
 If you'd like to build and deploy your project using the
 [Netlify CLI](https://docs.netlify.com/cli/get-started/), we recommend this
 workflow to manage git tracking plugin-generated files:

demo/angular.json

@@ -1,161 +1 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "cli": {
-    "analytics": false
-  },
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "angular-bfdx": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/angular-bfdx/browser",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "none",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "angular-bfdx:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "angular-bfdx:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "angular-bfdx:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json",
-              "tsconfig.server.json"
-            ],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-bfdx:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-bfdx:serve:production"
-            }
-          }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/angular-bfdx/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "sourceMap": false,
-              "optimization": true
-            }
-          }
-        },
-        "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
-          "options": {
-            "browserTarget": "angular-bfdx:build",
-            "serverTarget": "angular-bfdx:server"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "angular-bfdx:build:production",
-              "serverTarget": "angular-bfdx:server:production"
-            }
-          }
-        },
-        "prerender": {
-          "builder": "@nguniversal/builders:prerender",
-          "options": {
-            "browserTarget": "angular-bfdx:build:production",
-            "serverTarget": "angular-bfdx:server:production",
-            "routes": ["/"]
-          },
-          "configurations": {
-            "production": {}
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "angular-bfdx"
-}
+{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","cli":{"analytics":false},"version":1,"newProjectRoot":"projects","projects":{"angular-bfdx":{"projectType":"application","schematics":{},"root":"","sourceRoot":"src","prefix":"app","architect":{"build":{"builder":"@angular-devkit/build-angular:browser","options":{"outputPath":"dist/angular-bfdx/browser","index":"src/index.html","main":"src/main.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.app.json","aot":true,"assets":["src/favicon.ico","src/assets"],"styles":["src/styles.css"],"scripts":[]},"configurations":{"production":{"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"optimization":true,"outputHashing":"none","sourceMap":false,"namedChunks":false,"extractLicenses":true,"vendorChunk":false,"buildOptimizer":true,"budgets":[{"type":"initial","maximumWarning":"2mb","maximumError":"5mb"},{"type":"anyComponentStyle","maximumWarning":"6kb","maximumError":"10kb"}]}}},"serve":{"builder":"@angular-devkit/build-angular:dev-server","options":{"browserTarget":"angular-bfdx:build"},"configurations":{"production":{"browserTarget":"angular-bfdx:build:production"}}},"extract-i18n":{"builder":"@angular-devkit/build-angular:extract-i18n","options":{"browserTarget":"angular-bfdx:build"}},"test":{"builder":"@angular-devkit/build-angular:karma","options":{"main":"src/test.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.spec.json","karmaConfig":"karma.conf.js","assets":["src/favicon.ico","src/assets"],"styles":["src/styles.css"],"scripts":[]}},"lint":{"builder":"@angular-devkit/build-angular:tslint","options":{"tsConfig":["tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json","tsconfig.server.json"],"exclude":["**/node_modules/**"]}},"e2e":{"builder":"@angular-devkit/build-angular:protractor","options":{"protractorConfig":"e2e/protractor.conf.js","devServerTarget":"angular-bfdx:serve"},"configurations":{"production":{"devServerTarget":"angular-bfdx:serve:production"}}},"server":{"builder":"@angular-devkit/build-angular:server","options":{"outputPath":"dist/angular-bfdx/server","main":"server.ts","tsConfig":"tsconfig.server.json"},"configurations":{"production":{"outputHashing":"media","fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"sourceMap":false,"optimization":true}}},"serve-ssr":{"builder":"@nguniversal/builders:ssr-dev-server","options":{"browserTarget":"angular-bfdx:build","serverTarget":"angular-bfdx:server"},"configurations":{"production":{"browserTarget":"angular-bfdx:build:production","serverTarget":"angular-bfdx:server:production"}}},"prerender":{"builder":"@nguniversal/builders:prerender","options":{"browserTarget":"angular-bfdx:build:production","serverTarget":"angular-bfdx:server:production","routes":["/"]},"configurations":{"production":{}}},"serverless":{"builder":"@angular-devkit/build-angular:server","options":{"outputPath":"dist/angular-bfdx/serverless","main":"serverless.ts","tsConfig":"tsconfig.serverless.json"},"configurations":{"production":{"outputHashing":"media","fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"sourceMap":false,"optimization":true}}}}}},"defaultProject":"angular-bfdx"}

demo/netlify.toml

@@ -1,18 +1,18 @@
 [build]
   command = "npm run build:sls"
-  publish = "dist/netlify-serverless/browser"
+  publish = "dist/angular-bfdx/browser"
 
+# TO-DO: remove after cli redirect fix is out https://github.com/netlify/cli/pull/2920
 # any additional redirects for the site should come *before* this one
 [[redirects]]
   from = "/*"
   to = "/.netlify/functions/angular-builder"
   status = 200
 
+# TO-DO: remove when config-mutating bug is diagnosed by workflow
 [functions]
-included_files=["dist/netlify-serverless/browser/index.html"]
+included_files=["dist/angular-bfdx/browser/index.html"]
 node_bundler="esbuild"
 
 [[plugins]]
   package = "../"
-  [plugins.inputs]
-  projectName = "angular-bfdx"

manifest.yml

@@ -1,4 +1,2 @@
 name: 'netlify-plugin-angular-universal'
-inputs:
-  - name: projectName
-    description: The Angular project name as defined in angular.json
+inputs: []

package-lock.json

@@ -58,6 +58,7 @@
     "aws-serverless-express": "^3.4.0",
     "chalk": "^2.4.2",
     "fs-extra": "^9.1.0",
+    "make-dir": "^3.1.0",
     "zone.js": "^0.11.4"
   }
 }

package.json

@@ -1,13 +1,16 @@
 const { join } = require('path')
 
-const { copySync } = require('fs-extra')
+const { copySync, existsSync, removeSync, writeFileSync } = require('fs-extra')
 
-const addAngularServerlessFiles = () => {
+const { getServerlessTs } = require('./getDynamicTemplates')
+
+const addAngularServerlessFiles = ({ projectName }) => {
   const TEMPLATES_DIR = join('..', 'src', 'templates')
 
-  copySync(join(TEMPLATES_DIR, 'serverless.ts'), './serverless.ts', {
-    overwrite: true,
-  })
+  // Write file with injected project name
+  writeFileSync('./serverless.ts', getServerlessTs(projectName))
+
+  // We can copy this file over without writing because it's not dependent on projectName
   copySync(join(TEMPLATES_DIR, 'tsconfig.serverless.json'), './tsconfig.serverless.json', {
     overwrite: true,
   })