Migrate app from Angular 9 to React 18 + TypeScript (Vite)

.gitignore

@@ -31,6 +31,9 @@ speed-measure-plugin.json
 !.vscode/extensions.json
 .history/*
 
+# PWA dev service worker output
+dev-dist
+
 # misc
 /.sass-cache
 /connect.lock

.travis.yml

@@ -1,14 +1,13 @@
 language: node_js
 node_js:
-  - "6.9"
+  - "20"
 
 branches:
   only:
     - master
 
 before_script:
   - npm install -g firebase-tools
-  - npm install -g @angular/cli
 
 script:
   - npm run build

CONTRIBUTING.md

@@ -1,27 +1,24 @@
 # Contributing
 
 Thank you for your interest in contributing! Please feel free to put up a PR for any issue or feature request.
-Even if you have little to no experience with Angular, I'll be more than happy to help. :)
+Even if you have little to no experience with React, I'll be more than happy to help. :)
 
 ## Setup
 
 1. Fork the repo
 2. Clone your fork
 3. Make a branch for your feature or bug fix
-4. If you don't have Angular CLI installed: `npm install -g angular-cli@latest`
-5. `ng init`
-6. Type `n` for each file to not overwrite any file changes
-7. Run `npm start` and open `localhost:4200` in a browser
-8. Work your magic
-9. Run `npm run build` or `npm run static-serve` to kick off a production build and make sure nothing is broken
-10. To test service worker changes:
-  * `npm run build` to kick off a fresh build and update the `dist/` directory
-  * `npm run precache` to generate the service worker file
-  * `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
-11. Add yourself to the [contributor's list](https://github.com/hdjirdeh/angular2-hn#contributors) in the README!
-12. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
-13. Push your branch to your fork
-14. Create a pull request from your branch on your fork to `master` on this repo
-15. Have your branch get merged in! :star2:
+4. `npm install`
+5. Run `npm start` and open `localhost:5173` in a browser
+6. Work your magic
+7. Run `npm run build` to kick off a production build and make sure nothing is broken, and `npm test` / `npm run lint` to run the unit tests and linter
+8. To test service worker changes:
+  * `npm run build` to kick off a fresh build (including the generated service worker) and update the `dist/` directory
+  * `npm run preview` to load the production build along with the service worker
+9. Add yourself to the [contributor's list](https://github.com/hdjirdeh/angular2-hn#contributors) in the README!
+10. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
+11. Push your branch to your fork
+12. Create a pull request from your branch on your fork to `master` on this repo
+13. Have your branch get merged in! :star2:
 
 If you experience a problem at any point, please don't hesitate to file an issue or send me a message!

README.md

@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  A progressive Hacker News client built with Angular
+  A progressive Hacker News client built with React and TypeScript
 </p>
 
 <p align="center">
@@ -43,7 +43,7 @@
 
 ## Offline Support
 
-This app uses [Workbox](https://workboxjs.org/) to generate a service worker as part of the build step to load quickly and work offline.
+This app uses [Workbox](https://developer.chrome.com/docs/workbox) (via [vite-plugin-pwa](https://vite-pwa-org.netlify.app/)) to generate a service worker as part of the build step to load quickly and work offline.
 
 ## Manifest
 
@@ -73,16 +73,16 @@ Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [fil
 
 ## Build process
 
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+This project is built with [Vite](https://vitejs.dev/), React and TypeScript.
 
  - Clone or download the repo
  - `npm install`
- - `npm start` to run the application with webpack-dev-server or `npm build` to kick off a fresh build and update the output directory (`dist/`)
+ - `npm start` to run the application with the Vite dev server, or `npm run build` to kick off a fresh production build into the output directory (`dist/`)
+ - `npm test` to run the unit tests with [Vitest](https://vitest.dev/), and `npm run lint` to lint with ESLint
 
 Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
- - `npm build`
- - `npm run precache` to generate the service worker file
- - `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
+ - `npm run build`
+ - `npm run preview` to serve the production build (including the generated service worker) locally
 
 ## Contributors
 

eslint.config.js

@@ -0,0 +1,25 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', 'dev-dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  }
+);