Skip to content

Commit cc3abbc

Browse files
committed
Update configs, packages, add local client dev only
1 parent 621e0b0 commit cc3abbc

10 files changed

+1275
-2438
lines changed

.prettierignore

-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
dist
22
build
33
node_modules
4-
package.json
5-
*.config.*
6-
README.md
7-
index.html
84
.github
9-
tsconfig.*

README.md

+12-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ A *blazingly* modern web development stack. This template repo tries to achieve
77
![video](video.gif)
88

99
* [React 17](https://reactjs.org/blog/2020/10/20/react-v17.html)
10-
* [Typescript 4.3](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/)
10+
* [Typescript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/)
1111
* [Vite with Vite SSR](https://vitejs.dev/guide/ssr.html)
1212
* [GitHub Actions](https://github.com/features/actions)
1313
* [Tailwind CSS](https://tailwindui.com/)
@@ -17,10 +17,19 @@ A *blazingly* modern web development stack. This template repo tries to achieve
1717

1818
```
1919
yarn
20-
yarn dev
20+
yarn dev:server
2121
```
2222

23-
That should be enough to get started. It will open to http://localhost:7456
23+
That should start the server. It will open to http://localhost:7456.
24+
25+
If you'd like to just develop the UI, you can use
26+
27+
```bash
28+
yarn
29+
yarn dev:client
30+
```
31+
32+
To start the native vite client.
2433

2534
## Building
2635

jest.config.js

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

package.json

+36-35
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
},
99
"author": "JonLuca DeCaro",
1010
"license": "MIT",
11+
"type": "module",
1112
"scripts": {
12-
"dev": "nodemon --watch server.ts --watch src/server --exec 'yarn ts-node server.ts'",
13+
"dev:server": "nodemon --watch server.ts --watch src/server --exec 'yarn node --experimental-specifier-resolution=node --loader ts-node/esm server.ts'",
14+
"dev:client": "vite --config vite.config.ts dev",
1315
"build": "tsc -p tsconfig.prod.json && yarn build:client && yarn build:server && yarn copy-files",
1416
"build:client": "vite build --outDir dist/client",
1517
"build:server": "vite build --ssr src/client/entry-server.tsx --outDir dist/server",
@@ -22,52 +24,51 @@
2224
"format": "prettier --write ."
2325
},
2426
"dependencies": {
25-
"autoprefixer": "^10.3.1",
27+
"autoprefixer": "^10.4.2",
2628
"compression": "1.7.4",
2729
"cross-env": "^7.0.3",
28-
"express": "4.17.1",
29-
"nodemon": "^2.0.12",
30+
"express": "4.17.2",
31+
"nodemon": "^2.0.15",
3032
"react": "^17.0.2",
3133
"react-dom": "^17.0.2",
32-
"react-router": "^5.2.0",
33-
"react-router-dom": "^5.2.0",
34-
"serve-static": "^1.14.1",
35-
"ts-node": "^10.1.0"
34+
"react-router": "^6.2.1",
35+
"react-router-dom": "^6.2.1",
36+
"serve-static": "^1.14.2",
37+
"ts-node": "^10.4.0"
3638
},
3739
"devDependencies": {
38-
"@testing-library/jest-dom": "^5.14.1",
40+
"@testing-library/jest-dom": "^5.16.1",
3941
"@testing-library/react": "^12.1.2",
4042
"@testing-library/react-hooks": "^7.0.2",
41-
"@types/compression": "1.7.1",
42-
"@types/concurrently": "6.2.1",
43-
"@types/eslint": "7.28.0",
44-
"@types/jest": "^27.0.2",
45-
"@types/node": "16.4.2",
46-
"@types/react": "^17.0.15",
47-
"@types/react-dom": "^17.0.9",
48-
"@types/react-router-dom": "^5.1.8",
49-
"@typescript-eslint/eslint-plugin": "^4.28.4",
50-
"@typescript-eslint/parser": "^4.28.4",
51-
"@vitejs/plugin-react-refresh": "^1.3.5",
52-
"concurrently": "6.2.0",
43+
"@types/compression": "1.7.2",
44+
"@types/concurrently": "6.4.0",
45+
"@types/eslint": "8.2.2",
46+
"@types/jest": "^27.4.0",
47+
"@types/node": "17.0.9",
48+
"@types/react": "^17.0.38",
49+
"@types/react-dom": "^17.0.11",
50+
"@types/react-router-dom": "^5.3.2",
51+
"@typescript-eslint/eslint-plugin": "^5.10.0",
52+
"@typescript-eslint/parser": "^5.10.0",
53+
"@vitejs/plugin-react-refresh": "^1.3.6",
54+
"concurrently": "7.0.0",
5355
"copyfiles": "^2.4.1",
54-
"eslint": "^7.31.0",
56+
"eslint": "^8.7.0",
5557
"eslint-config-prettier": "^8.3.0",
5658
"eslint-config-standard": "^16.0.3",
57-
"eslint-plugin-import": "^2.23.4",
58-
"eslint-plugin-jest": "^24.7",
59+
"eslint-plugin-import": "^2.25.4",
60+
"eslint-plugin-jest": "^25.7",
5961
"eslint-plugin-node": "^11.1.0",
60-
"eslint-plugin-promise": "^5.1.0",
61-
"eslint-plugin-react": "^7.24.0",
62-
"eslint-plugin-react-hooks": "^4.2.0",
63-
"jest": "^27.3.1",
64-
"postcss": "8.3.6",
65-
"prettier": "^2.3.2",
62+
"eslint-plugin-promise": "^6.0.0",
63+
"eslint-plugin-react": "^7.28.0",
64+
"eslint-plugin-react-hooks": "^4.3.0",
65+
"jest": "^27.4.7",
66+
"postcss": "8.4.5",
67+
"prettier": "^2.5.1",
6668
"rimraf": "^3.0.2",
67-
"tailwindcss": "2.2.7",
68-
"ts-jest": "^27.0.7",
69-
"typescript": "4.3.5",
70-
"vite": "2.4.3",
71-
"vite-plugin-legacy": "^2.1.0"
69+
"tailwindcss": "3.0.15",
70+
"ts-jest": "^27.1.3",
71+
"typescript": "4.5.4",
72+
"vite": "2.7.12"
7273
}
7374
}

postcss.config.cjs

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// postcss.config.cjs
22
module.exports = {
3-
plugins: {
4-
tailwindcss: {},
5-
autoprefixer: {},
6-
},
7-
}
3+
plugins: {
4+
tailwindcss: {},
5+
autoprefixer: {},
6+
},
7+
};

server.ts

+10-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import fs from "fs";
2-
import path from "path";
32
import express, { Express, RequestHandler } from "express";
43
import { createServer as createViteServer } from "vite";
54
import serveStatic from "serve-static";
65
import compression from "compression";
76
import { getApi } from "./src/server/routes/api";
87
import { ServerResponse } from "http";
8+
import { fileURLToPath } from "url";
9+
import { dirname, resolve } from "path";
10+
11+
const __filename = fileURLToPath(import.meta.url);
12+
const __dirname = dirname(__filename);
913

1014
const isTest = process.env.NODE_ENV === "test" || !!process.env.VITE_TEST_BUILD;
1115

1216
const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV === "production") => {
13-
const resolve = (p: string) => path.resolve(__dirname, p);
17+
const localResolve = (p: string) => resolve(__dirname, p);
1418

15-
const indexProd = isProd ? fs.readFileSync(resolve("./client/index.html"), "utf-8") : "";
19+
const indexProd = isProd ? fs.readFileSync(localResolve("./client/index.html"), "utf-8") : "";
1620

1721
const app: Express = express();
1822
app.use(express.json() as RequestHandler);
@@ -27,8 +31,6 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
2731
server: {
2832
middlewareMode: true,
2933
watch: {
30-
// During tests we edit the files too ft and sometimes chokidar
31-
// misses change events, so enforce polling for consistency
3234
usePolling: true,
3335
interval: 100,
3436
},
@@ -38,7 +40,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
3840
app.use(vite.middlewares);
3941
} else {
4042
app.use(compression());
41-
const requestHandler = serveStatic<ServerResponse>(resolve("./client"), {
43+
const requestHandler = serveStatic<ServerResponse>(localResolve("./client"), {
4244
index: false,
4345
}) as RequestHandler;
4446
app.use(requestHandler);
@@ -54,7 +56,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
5456
let render;
5557
if (!isProd) {
5658
// always read fresh template in dev
57-
template = fs.readFileSync(resolve("index.html"), "utf-8");
59+
template = fs.readFileSync(localResolve("index.html"), "utf-8");
5860
template = await vite.transformIndexHtml(url, template);
5961
render = (await vite.ssrLoadModule("/src/client/entry-server.tsx")).render;
6062
} else {
@@ -63,13 +65,7 @@ const createServer = async (root = process.cwd(), isProd = process.env.NODE_ENV
6365
render = entryServer.render;
6466
}
6567

66-
const context: any = {};
67-
const appHtml = render(url, context);
68-
69-
if (context.url) {
70-
// Somewhere a `<Redirect>` was rendered
71-
return res.redirect(301, context.url);
72-
}
68+
const appHtml = render(url);
7369

7470
const html = template.replace(`<!--app-html-->`, appHtml);
7571

src/client/entry-server.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React from "react";
22
import ReactDOMServer from "react-dom/server";
3-
import { StaticRouter } from "react-router-dom";
3+
import { StaticRouter } from "react-router-dom/server";
44
import { App } from "./App";
5-
import { StaticRouterContext } from "react-router";
65
import "./index.css";
76

8-
export function render(url: string, context: StaticRouterContext) {
7+
export function render(url: string) {
98
return ReactDOMServer.renderToString(
109
<React.StrictMode>
11-
<StaticRouter location={url} context={context}>
10+
<StaticRouter location={url}>
1211
<App />
1312
</StaticRouter>
1413
</React.StrictMode>,

tailwind.config.cjs

+10-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
1-
21
module.exports = {
3-
mode: 'jit',
4-
purge: {
5-
enabled: process.env.NODE_ENV === 'production',
6-
safeList: [],
7-
content: ['./index.html', './src/**/*.tsx', './src/**/*.ts'],
8-
},
2+
content: ["./src/**/*.{js,ts,jsx,tsx}", "./index.html"],
93
theme: {
104
minWidth: {
11-
'40': '10rem',
12-
'60': '15rem',
13-
'80': '20rem',
14-
'100': '25rem',
5+
40: "10rem",
6+
60: "15rem",
7+
80: "20rem",
8+
100: "25rem",
159
},
1610
maxWidth: {
17-
'120': '30rem',
18-
'160': '40rem',
19-
'200': '50rem',
20-
}
11+
120: "30rem",
12+
160: "40rem",
13+
200: "50rem",
14+
},
2115
},
2216
variants: {},
2317
plugins: [],
24-
}
18+
};

tsconfig.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
"lib": ["DOM", "ESNext"],
1616
"strict": true,
1717
"outDir": "dist",
18-
"module": "CommonJS",
18+
"module": "ESNext",
1919
"moduleResolution": "Node",
2020
"skipLibCheck": true,
2121
"sourceMap": true,
22-
"target": "ES2020",
22+
"target": "ES2020"
2323
},
2424
"include": ["src/**/*", "types/*", "*"]
2525
}

0 commit comments

Comments
 (0)