feat: add deploy to Firebase Hosting and custom 404 page

Author: Splaktar

.firebaserc

@@ -0,0 +1,11 @@
+{
+  "targets": {
+    "angular-cli-static": {
+      "hosting": {
+        "static-html": [
+          "angular-cli-static"
+        ]
+      }
+    }
+  }
+}

.gitignore

@@ -40,6 +40,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+*.log
+*.cache
 
 # System Files
 .DS_Store

README.md

@@ -16,6 +16,12 @@ The app will automatically reload if you change any of the source files.
 
 The build artifacts will be stored in the `dist/` directory.
 
+## Deploy
+
+1. Change [.firebaserc](.firebaserc) to point to your Firebase Hosting project
+1. Ensure that you are logged in to Firebase: `npm run login`
+1. Run `npm run deploy`
+
 ## Key Configuration Steps
 
 1. Create a workspace without an app:
@@ -29,10 +35,36 @@ ng g app --style=scss --minimal=true --routing=false --skip-tests=true static-ht
 1. Comment out `zone.js` import in [polyfills.ts](polyfills.ts)
 1. In [angular.json](angular.json) clear out `"fileReplacements": []`
 1. Remove `app/`, `environments/`
-1. Remove most of the Angular dependencies from [package.json](package.json)'s `dependencies`
-    other than `@angular/core`, `@angular/compiler`, and `rxjs`
-1. Remove `codelyzer` and `@angular/language-service` from [package.json](package.json)'s `devDependencies`
+1. Remove the following Angular dependencies from [package.json](package.json)'s `dependencies`:
+    - `@angular/animations`
+    - `@angular/forms`
+1. Remove the following dependencies from [package.json](package.json)'s `devDependencies`:
+    - `codelyzer`
+    - `@angular/language-service`
 1. Remove `codelyzer` from `rulesDirectory` and remove all of the Codelyzer rules from
     the workspace [tslint.json](tslint.json)
 1. Remove `directive-selector` and `component-selector` rules
     from your app's [tslint.json](projects/static-html/tslint.json)
+1. Enable Deployment to Firebase
+```shell script
+ng add @angular/fire
+```
+1. Update your [firebase.json](firebase.json) to work with a static site rather than a SPA
+```json
+  "rewrites": [
+    {
+      "source": "/",
+      "destination": "/index.html"
+    }
+  ]
+```
+1. Add a [404.html](projects/static-html/src/404.html) and [404.css](projects/static-html/src/404.css)
+1. Update your project's assets list in [angular.json](angular.json) to include the new files
+```json
+    "assets": [
+      "projects/static-html/src/favicon.ico",
+      "projects/static-html/src/404.html",
+      "projects/static-html/src/404.css",
+      "projects/static-html/src/assets"
+    ],
+```

angular.json

@@ -25,6 +25,8 @@
             "aot": true,
             "assets": [
               "projects/static-html/src/favicon.ico",
+              "projects/static-html/src/404.html",
+              "projects/static-html/src/404.css",
               "projects/static-html/src/assets"
             ],
             "styles": [
@@ -85,9 +87,14 @@
               "**/node_modules/**"
             ]
           }
+        },
+        "deploy": {
+          "builder": "@angular/fire:deploy",
+          "options": {}
         }
       }
-    }},
+    }
+  },
   "cli": {
     "analytics": "fc7225a9-dc2b-4b2a-a9a7-ad4d6246ca26"
   },

firebase.json

@@ -0,0 +1,19 @@
+{
+  "hosting": [
+    {
+      "target": "static-html",
+      "public": "dist/static-html",
+      "ignore": [
+        "firebase.json",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [
+        {
+          "source": "/",
+          "destination": "/index.html"
+        }
+      ]
+    }
+  ]
+}