Merge pull request #5 from netlify/basic-support

feat: add basic support for angular universal

Author: lindsaylevine

.eslintrc.js

@@ -16,12 +16,17 @@ module.exports = {
     'node/global-require': 0,
     'node/prefer-global/process': 0,
     'no-magic-numbers': 0,
+    'no-negated-condition': 0,
+    'no-param-reassign': 0,
     'no-promise-executor-return': 0,
     'no-prototype-builtins': 0,
     'no-shadow': 0,
     'no-unused-vars': 0,
+    'no-use-before-define': 0,
     'prefer-regex-literals': 0,
     'promise/prefer-await-to-callbacks': 0,
+    'require-await': 0,
+    'unicorn/consistent-destructuring': 0,
     'unicorn/filename-case': 0,
     'unicorn/no-array-push-push': 0,
   },

.gitignore

@@ -1,5 +1,12 @@
 ### Node ###
 
+# Demo
+/demo/netlify
+/demo/serverless.ts
+/demo/tsconfig.serverless.json
+/demo/_redirects
+/demo/node_modules
+
 # Logs
 logs
 *.log
@@ -141,4 +148,5 @@ Temporary Items
 
 # End of https://www.toptal.com/developers/gitignore/api/osx,node
 
-.netlify
+demo/.netlify/functions
+demo/.netlify/functions-serve

README.md

@@ -1,35 +1,72 @@
 ![Netlify Build plugin Angular Serverless – Run Angular Universal seamlessly on Netlify](netlify-plugin-angular.png)
 
-# Essential Angular Serverless Plugin
+# Angular Universal Plugin
 
-This build plugin is a utility for supporting Angular Universal on Netlify. This plugin will be installed by running a Netlify-specific Angular schematic, but it can also be installed manually.
+This build plugin is a utility for supporting Angular Universal on Netlify.
 
 ## Table of Contents
 
 - [Installation and Configuration](#installation-and-configuration)
+- [CLI Usage](#cli-usage)
+- [Caveats](#caveats)
 
 ## Installation and Configuration
 
-### Angular Schematic
-- TBD
-
 ### Manual Installation
 
-1. Create a `netlify.toml` in the root of your project. Your file should include
-   the plugins section below:
+Create a `netlify.toml` in the root of your project. Your file should include the plugins section below:
 
 ```toml
-TBD
+[build]
+  command = "ng build --configuration production && ng run {projectName}:serverless:production"
+  publish = "dist/{projectName}/browser"
+
+[[plugins]]
+  package = "@netlify/plugin-angular-serverless"
 ```
 
-2. From your project's base directory, add this plugin to `dependencies` in
-   `package.json`.
+If you'd like to install this plugin at a fixed version, install it via your package manager:
 
 ```bash
-# yarn add --save @netlify/plugin-angular-serverless
-npm install --save @netlify/plugin-angular-serverless
+npm install @netlify/plugin-angular-universal
+# or
+yarn add @netlify/plugin-angular-universal
 ```
 
-Read more about
-[file-based plugin installation](https://docs.netlify.com/configure-builds/build-plugins/#file-based-installation)
+Read more about [file-based plugin installation](https://docs.netlify.com/configure-builds/build-plugins/#file-based-installation)
 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:
+
+1. Make sure all your project's files are committed before running a build with
+   the CLI
+2. Run any number of builds and deploys freely (i.e. `netlify build`,
+   `netlify deploy --build`, `netlify deploy --prod`)
+3. Run `git stash --include-unstaged` to easily ignore plugin-generated files
+
+It's important to note that the CLI may mix your project's source code and
+plugin-generated files; this is why we recommend committing all project source
+files before running CLI builds.
+
+## Caveats
+
+This plugin is currently in beta.
+
+Right now:
+- it does not include out of the box monorepo support
+- it does not support Angular Universal prerendering

demo/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

demo/.netlify/state.json

@@ -0,0 +1,3 @@
+{
+  "siteId": "0dae6390-88f8-402c-b054-3cf77541cacf"
+}

demo/angular.json

@@ -0,0 +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":{}}},"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/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-bfdx'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

demo/netlify.toml

@@ -0,0 +1,18 @@
+[build]
+  command = "npm run build:sls"
+  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/angular-bfdx/browser/index.html"]
+node_bundler="esbuild"
+
+[[plugins]]
+  package = "../"