Update configs, packages, add local client dev only

Author: jonluca

.prettierignore

@@ -1,9 +1,4 @@
 dist
 build
 node_modules
-package.json
-*.config.*
-README.md
-index.html
 .github
-tsconfig.*

README.md

@@ -7,7 +7,7 @@ A *blazingly* modern web development stack. This template repo tries to achieve
 ![video](video.gif)
 
 * [React 17](https://reactjs.org/blog/2020/10/20/react-v17.html)
-* [Typescript 4.3](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/)
+* [Typescript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/)
 * [Vite with Vite SSR](https://vitejs.dev/guide/ssr.html)
 * [GitHub Actions](https://github.com/features/actions)
 * [Tailwind CSS](https://tailwindui.com/)
@@ -17,10 +17,19 @@ A *blazingly* modern web development stack. This template repo tries to achieve
 
 ```
 yarn
-yarn dev
+yarn dev:server
 ```
 
-That should be enough to get started. It will open to http://localhost:7456
+That should start the server. It will open to http://localhost:7456.
+
+If you'd like to just develop the UI, you can use
+
+```bash
+yarn
+yarn dev:client
+```
+
+To start the native vite client.
 
 ## Building
 

jest.config.js

@@ -5,7 +5,6 @@ module.exports = {
   transform: {
     "^.+\\.tsx?$": "ts-jest",
   },
-
   moduleNameMapper: {
     // "\\.(css|scss)": "identity-obj-proxy",
     "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":

package.json

@@ -8,8 +8,10 @@
   },
   "author": "JonLuca DeCaro",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "nodemon --watch server.ts --watch src/server --exec 'yarn ts-node server.ts'",
+    "dev:server": "nodemon --watch server.ts --watch src/server --exec 'yarn node --experimental-specifier-resolution=node --loader ts-node/esm server.ts'",
+    "dev:client": "vite --config vite.config.ts dev",
     "build": "tsc -p tsconfig.prod.json && yarn build:client && yarn build:server && yarn copy-files",
     "build:client": "vite build --outDir dist/client",
     "build:server": "vite build --ssr src/client/entry-server.tsx --outDir dist/server",
@@ -22,52 +24,51 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.2",
     "compression": "1.7.4",
     "cross-env": "^7.0.3",
-    "express": "4.17.1",
-    "nodemon": "^2.0.12",
+    "express": "4.17.2",
+    "nodemon": "^2.0.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "serve-static": "^1.14.1",
-    "ts-node": "^10.1.0"
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
+    "serve-static": "^1.14.2",
+    "ts-node": "^10.4.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/compression": "1.7.1",
-    "@types/concurrently": "6.2.1",
-    "@types/eslint": "7.28.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "16.4.2",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "@vitejs/plugin-react-refresh": "^1.3.5",
-    "concurrently": "6.2.0",
+    "@types/compression": "1.7.2",
+    "@types/concurrently": "6.4.0",
+    "@types/eslint": "8.2.2",
+    "@types/jest": "^27.4.0",
+    "@types/node": "17.0.9",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "concurrently": "7.0.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^7.31.0",
+    "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jest": "^24.7",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^25.7",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.3.1",
-    "postcss": "8.3.6",
-    "prettier": "^2.3.2",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.4.7",
+    "postcss": "8.4.5",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
-    "tailwindcss": "2.2.7",
-    "ts-jest": "^27.0.7",
-    "typescript": "4.3.5",
-    "vite": "2.4.3",
-    "vite-plugin-legacy": "^2.1.0"
+    "tailwindcss": "3.0.15",
+    "ts-jest": "^27.1.3",
+    "typescript": "4.5.4",
+    "vite": "2.7.12"
   }
 }

postcss.config.cjs

@@ -1,7 +1,7 @@
 // postcss.config.cjs
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-}
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

server.ts

@@ -1,18 +1,22 @@
 import fs from "fs";
-import path from "path";
 import express, { Express, RequestHandler } from "express";
 import { createServer as createViteServer } from "vite";
 import serveStatic from "serve-static";
 import compression from "compression";
 import { getApi } from "./src/server/routes/api";
 import { ServerResponse } from "http";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const isTest = process.env.NODE_ENV === "test" || !!process.env.VITE_TEST_BUILD;
 
 const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV === "production") => {
-  const resolve = (p: string) => path.resolve(__dirname, p);
+  const localResolve = (p: string) => resolve(__dirname, p);
 
-  const indexProd = isProd ? fs.readFileSync(resolve("./client/index.html"), "utf-8") : "";
+  const indexProd = isProd ? fs.readFileSync(localResolve("./client/index.html"), "utf-8") : "";
 
   const app: Express = express();
   app.use(express.json() as RequestHandler);
@@ -27,8 +31,6 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
       server: {
         middlewareMode: true,
         watch: {
-          // During tests we edit the files too ft and sometimes chokidar
-          // misses change events, so enforce polling for consistency
           usePolling: true,
           interval: 100,
         },
@@ -38,7 +40,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
     app.use(vite.middlewares);
   } else {
     app.use(compression());
-    const requestHandler = serveStatic<ServerResponse>(resolve("./client"), {
+    const requestHandler = serveStatic<ServerResponse>(localResolve("./client"), {
       index: false,
     }) as RequestHandler;
     app.use(requestHandler);
@@ -54,7 +56,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
       let render;
       if (!isProd) {
         // always read fresh template in dev
-        template = fs.readFileSync(resolve("index.html"), "utf-8");
+        template = fs.readFileSync(localResolve("index.html"), "utf-8");
         template = await vite.transformIndexHtml(url, template);
         render = (await vite.ssrLoadModule("/src/client/entry-server.tsx")).render;
       } else {
@@ -63,13 +65,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
         render = entryServer.render;
       }
 
-      const context: any = {};
-      const appHtml = render(url, context);
-
-      if (context.url) {
-        // Somewhere a `<Redirect>` was rendered
-        return res.redirect(301, context.url);
-      }
+      const appHtml = render(url);
 
       const html = template.replace(`<!--app-html-->`, appHtml);
 

src/client/entry-server.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import ReactDOMServer from "react-dom/server";
-import { StaticRouter } from "react-router-dom";
+import { StaticRouter } from "react-router-dom/server";
 import { App } from "./App";
-import { StaticRouterContext } from "react-router";
 import "./index.css";
 
-export function render(url: string, context: StaticRouterContext) {
+export function render(url: string) {
   return ReactDOMServer.renderToString(
     <React.StrictMode>
-      <StaticRouter location={url} context={context}>
+      <StaticRouter location={url}>
         <App />
       </StaticRouter>
     </React.StrictMode>,

tailwind.config.cjs

@@ -1,24 +1,18 @@
-
 module.exports = {
-  mode: 'jit',
-  purge: {
-    enabled: process.env.NODE_ENV === 'production',
-    safeList: [],
-    content: ['./index.html', './src/**/*.tsx', './src/**/*.ts'],
-  },
+  content: ["./src/**/*.{js,ts,jsx,tsx}", "./index.html"],
   theme: {
     minWidth: {
-      '40': '10rem',
-      '60': '15rem',
-      '80': '20rem',
-      '100': '25rem',
+      40: "10rem",
+      60: "15rem",
+      80: "20rem",
+      100: "25rem",
     },
     maxWidth: {
-      '120': '30rem',
-      '160': '40rem',
-      '200': '50rem',
-    }
+      120: "30rem",
+      160: "40rem",
+      200: "50rem",
+    },
   },
   variants: {},
   plugins: [],
-}
+};

tsconfig.json

@@ -15,11 +15,11 @@
     "lib": ["DOM", "ESNext"],
     "strict": true,
     "outDir": "dist",
-    "module": "CommonJS",
+    "module": "ESNext",
     "moduleResolution": "Node",
     "skipLibCheck": true,
     "sourceMap": true,
-    "target": "ES2020",
+    "target": "ES2020"
   },
   "include": ["src/**/*", "types/*", "*"]
 }