Migrate Angular 9 Hacker News PWA to React 19 + Vite

.gitignore

@@ -2,8 +2,10 @@
 
 # compiled output
 /dist
+/dev-dist
 /tmp
 /out-tsc
+*.local
 # Only exists if Bazel was run
 /bazel-out
 

.travis.yml

@@ -1,16 +1,17 @@
 language: node_js
 node_js:
-  - "6.9"
+  - "22"
 
 branches:
   only:
     - master
 
 before_script:
   - npm install -g firebase-tools
-  - npm install -g @angular/cli
 
 script:
+  - npm ci
+  - npm run lint
   - npm run build
 
 after_success:

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. Install dependencies: `npm install`
+5. Run `npm run dev` and open the printed `localhost` URL (Vite dev server) in a browser
+6. Work your magic
+7. Run `npm run lint` and `npm run build` (`tsc -b && vite build`) to make sure nothing is broken
+8. To test service worker / PWA changes:
+  * `npm run build` to produce a fresh build in the `dist/` directory (the service worker and web manifest are generated by [vite-plugin-pwa](https://vite-pwa-org.netlify.app/))
+  * `npm run preview` to serve the production build locally with the service worker active
+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

@@ -1,11 +1,11 @@
 <p align="center">
   <a href="https://angular2-hn.firebaseapp.com">
-    <img alt="Angular 2 HN" title="Angular 2 HN" src="http://i.imgur.com/J303pQ4.png" width="150">
+    <img alt="React HN" title="React HN" src="http://i.imgur.com/J303pQ4.png" width="150">
   </a>
 </p>
 
 <p align="center">
-  A progressive Hacker News client built with Angular
+  A progressive Hacker News client built with React
 </p>
 
 <p align="center">
@@ -47,7 +47,7 @@ This app uses [Workbox](https://workboxjs.org/) to generate a service worker as
 
 ## Manifest
 
-With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.
+With Chromium based browsers for Android (Chrome, Opera, etc...), React HN includes a Web App Manifest that allows you to install to your homescreen.
 
 <p align="center">
   <img src = "http://i.imgur.com/1RaaNkr.png">
@@ -73,16 +73,14 @@ 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://vite.dev/) + React + TypeScript. The service worker and Web App Manifest are generated at build time by [`vite-plugin-pwa`](https://vite-pwa-org.netlify.app/) (Workbox).
 
  - 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/`)
-
-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 dev` to run the application with the Vite dev server
+ - `npm run build` to type-check and produce a production build in the output directory (`dist/`)
+ - `npm run preview` to locally preview the production build (this is where the generated service worker is active, since it is not enabled in dev)
+ - `npm run lint` to lint the project
 
 ## 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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores([
+    'dist',
+    'dev-dist',
+  ]),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])