Drop parcel; adopt vite; modernize a few deps.

davepeck · Feb 27, 2024 · bb68e0f · bb68e0f
1 parent e87e3b0
commit bb68e0f
Show file tree

Hide file tree

Showing 14 changed files with 2,445 additions and 3,710 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -10,16 +10,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Install node 18
-        uses: actions/setup-node@v2
+      - name: Install node 20
+        uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
 
       - name: Cache node assets
         id: cache-node
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}

diff --git a/.tool-versions b/.tool-versions
@@ -1 +1 @@
-nodejs 18.12.1
+nodejs 20.11.1
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # 🐱 And 🐶 Boilerplate
 
-Version `0.0.5` by `Ellie` and Daddy aka `Dave Peck <[email protected]>`.
+Version `0.1.0` by `Ellie` and Daddy aka `Dave Peck <[email protected]>`.
 
 ### What is this?
 
@@ -12,15 +12,15 @@ Version `0.0.5` by `Ellie` and Daddy aka `Dave Peck <[email protected]>`.
 
 ### Getting set up
 
-You'll need to install [Node 18](https://nodejs.dev).
+You'll need to install [Node 20](https://nodejs.dev).
 
-There are lots of ways to do this; it depends on your own set-up. (I have a mac with `asdf` installed, so I do `asdf install nodejs 18.12.1`, for example.)
+There are lots of ways to do this; it depends on your own set-up. If you have a Mac, consider [installing node via HomeBrew](https://brew.sh).
 
-Then clone this repository, `npm install`, change the `CNAME` to the name of the website you want to deploy to, and get coding on `app.tsx` and `index.css`.
+Then clone this repository, `npm install`, change the `CNAME` to the name of the website you want to deploy to, and get coding on `App.tsx` and `App.css`.
 
 ### How do I run a development server?
 
-Use `npm run start` and visit http://localhost:1234/. It'll automatically refresh when you change most app content.
+Use `npm run dev` and visit http://localhost:5173/. It'll automatically refresh when you change most app content.
 
 ### How do I deploy the code I've written?
 
@@ -44,9 +44,9 @@ If something 🐱 feels missing to you, please submit a PR that adds it. And if
 
 This template:
 
-- Uses [ParcelJS 2](https://parceljs.org) for bundling
+- Uses [Vite 5](https://vitejs.dev) as our key frontend tool
 - Includes [React 18](https://reactjs.org)
-- Includes [TypeScript 4](https://www.typescriptlang.org)
+- Includes [TypeScript 5](https://www.typescriptlang.org)
 - Contains out-of-the-box configuration for [VS Code](https://code.visualstudio.com) that lints and formats on every save with VSCode's built-in rules
 - Includes [modern-normalize](https://github.com/sindresorhus/modern-normalize)
 - Has built-in [GitHub Actions](https://github.com/features/actions) to automatically deploy changes to the main branch to [GitHub Pages](https://pages.github.com), a static web host.

diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -1,21 +1,21 @@
-<html>
+<!doctype html>
+
+<html lang="en">
 
 <head>
   <title>Cats &amp; Dogs Boilerplate</title>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-  <link rel="stylesheet" href="normalize.css" />
-  <link rel="stylesheet" href="index.css" />
-  <script type="module" src="index.tsx"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 
 <body>
   <div class="container">
-    <div id="app"></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
     <noscript>
       Sorry, but Cats &amp; Dogs Boilerplate requires javascript.
     </noscript>
   </div>
 </body>
 
-</html>
+</html>