Update Angular 14 & add React 18 App

Author: ganatan

README.md

@@ -1,32 +1,43 @@
-# Angular 13 Example PWA
+# Angular 14 & React 18 Examples PWA
 
-> An Angular starter kit featuring [Angular 13.3.0](https://angular.io), [Angular CLI 13.3.0](https://cli.angular.io/)
+<table>
+<tr>
+<td>
+  <a href="https://www.ganatan.com/en">
+    <img src="./img/ganatan-about-github.png" align="right"
+    alt="Ganatan Angular Example routing" width="140" height="140">
+  </a>
 
-> it's part of a repo series designed to create a Progressive Web App with Angular
+it's part of a repo series designed 
 
-# Web Application Live Demo
-<p align="center">
-  <p align="center">
-    <a href="https://angular.ganatan.com/">
-      <img src="https://media.giphy.com/media/9BuBBLc7keCgRojp92/giphy.gif" alt="Angular 13 Example 
-      Application"/>
-    </a>
-  </p>
-</p>
+to create a **Web Application with Angular 14**
 
-## Quick start
+* Featuring [**Angular 14.0.3**](https://github.com/angular/angular/releases) & [**Angular CLI 14.0.3**](https://github.com/angular/angular-cli/releases/)
+
+
+* See the [**Live demo**](#angular-live-demo), Test the repo with [**Quick start**](#angular-quick-start) and for more information Read the step by step [**Tutorial**](#angular-tutorial) or read the [**Getting started**](#angular-getting-started)
+
+
+to create a **Web Application with React 18**
+
+
+* Featuring [**React 18.2.0**](https://github.com/facebook/react/releases) & [**Create-react-app 5.0.1**](https://github.com/facebook/create-react-app/releases)
+
+
+
+# [Angular Quick start](#angular-quick-start)
 
 ```bash
 # choose a repo
 # download the example or clone the repo from github
-git clone https://github.com/ganatan/angular-pwa.git
+git clone https://github.com/ganatan/angular-react-pwa.git
 
 # download the example or clone the repo from gitlab
-git clone https://gitlab.com/ganatan/angular-pwa.git
-
+git clone https://gitlab.com/ganatan/angular-react-pwa.git
 
 # change directory
-cd angular-pwa
+cd angular-react-pwa
+cd angular
 
 # install the repo with npm
 npm install
@@ -37,30 +48,77 @@ npm start
 ```
 in your browser go to [http://localhost:4200](http://localhost:4200) 
 
-## Getting Started
 
-### Installation
+# [React Quick start](#react-quick-start)
+
+```bash
+# choose a repo
+# download the example or clone the repo from github
+git clone https://github.com/ganatan/angular-react-pwa.git
+
+# download the example or clone the repo from gitlab
+git clone https://gitlab.com/ganatan/angular-react-pwa.git
+
+# change directory
+cd angular-react-pwa
+cd react
+
+# install the repo with npm
+npm install
+
+# start the server
+npm start
+
+```
+in your browser go to [http://localhost:3000](http://localhost:3000) 
+
+
+# [Angular Getting started](#angular-getting-started)
+
+
+## Installation
+* `npm install` (installing dependencies)
+* `npm outdated` (verifying dependencies)
+
+## Development
+* `npm run start`
+* in your browser go to [http://localhost:4200](http://localhost:4200) 
+
+## Production 
+* `npm run build`
+
+## Linter
+* `npm run lint`
+
+## Tests
+* `npm run test`
+* `npm run coverage`
+
+
+
+# [React Getting started](#react-getting-started)
+
+
+## Installation
 * `npm install` (installing dependencies)
 * `npm outdated` (verifying dependencies)
 
-### Developpement
+## Development
 * `npm run start`
-* in your browser [http://localhost:4200](http://localhost:4200) 
+* in your browser go to [http://localhost:3000](http://localhost:3000) 
+
+## Production 
+* `npm run build`
+
+## Linter
+* `npm run lint`
 
-## Tests (Use Chrome Version 87 minimum)
+## Tests
 * `npm run test`
+* `npm run coverage`
 
-### Compilation
-* `npm run build`       ( without SSR)
-* `npm run build:ssr`   ( with SSR)
 
-### Production
-* `npm run serve:ssr`
-* in your browser [http://localhost:4000](http://localhost:4000) 
 
-### Prototype Bootstrap 5
-* `change directory` cd ui
-* launch html pages in your browser
 
 ### Author
 * Author  : danny

.browserslistrc renamed to angular/.browserslistrc

@@ -0,0 +1,58 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "no-undefined": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "func-names": "error",
+        "id-length": "error",
+        "newline-before-return": "error",
+        "space-before-blocks": "error",
+        "no-alert": "error",
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.editorconfig renamed to angular/.editorconfig

@@ -1,46 +1,42 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
+# Miscellaneous
 /.angular/cache
-/.sass-cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

angular/.eslintrc.json

@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular-starter/browser",
+            "outputPath": "dist/angular-starter",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -44,12 +44,12 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1mb",
+                  "maximumWarning": "500kb",
                   "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kb",
+                  "maximumWarning": "2kb",
                   "maximumError": "4kb"
                 }
               ],
@@ -108,66 +108,19 @@
             "scripts": []
           }
         },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "outputPath": "dist/angular-starter/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
-            },
-            "development": {
-              "optimization": false,
-              "sourceMap": true,
-              "extractLicenses": false
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
-          "configurations": {
-            "development": {
-              "browserTarget": "angular-starter:build:development",
-              "serverTarget": "angular-starter:server:development"
-            },
-            "production": {
-              "browserTarget": "angular-starter:build:production",
-              "serverTarget": "angular-starter:server:production"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "prerender": {
-          "builder": "@nguniversal/builders:prerender",
-          "options": {
-            "routes": [
-              "/"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "angular-starter:build:production",
-              "serverTarget": "angular-starter:server:production"
-            },
-            "development": {
-              "browserTarget": "angular-starter:build:development",
-              "serverTarget": "angular-starter:server:development"
-            }
-          },
-          "defaultConfiguration": "production"
+          }
         }
       }
     }
   },
-  "defaultProject": "angular-starter"
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }