Skip to content

Commit

Permalink
build(frontend): migrate from Create React App to Vite
Browse files Browse the repository at this point in the history
- add Vite packages and config.
- update build scripts.
- update ESLint config.
- update SVG shape imports.
- remove the old Express middleware proxy.
- clean up unused dependencies.
  • Loading branch information
eatyourgreens committed May 22, 2024
1 parent 0f0e031 commit f22c389
Show file tree
Hide file tree
Showing 13 changed files with 2,669 additions and 10,120 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,6 @@ terracotta.sqlite
__pycache__
*.egg-info
*.pyc

# frontend config
proxy-table.json
2 changes: 1 addition & 1 deletion frontend/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
extends: ['react-app', 'eslint:recommended'],
extends: ['react-app', 'eslint:recommended', 'eslint-config-prettier'],
rules: {
'react/prop-types': 'off',
'no-unused-vars': 'off',
Expand Down
16 changes: 16 additions & 0 deletions frontend/dev-proxy/proxy-table.dev.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"/vector": {
"target": "http://localhost:8080",
"changeOrigin": true,
"pathRewrite": {
"^/vector": "/"
}
},
"/api": {
"target": "http://localhost:8888",
"changeOrigin": true,
"pathRewrite": {
"^/api": "/"
}
}
}
1 change: 1 addition & 0 deletions frontend/public/index.html → frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
12,603 changes: 2,563 additions & 10,040 deletions frontend/package-lock.json

Large diffs are not rendered by default.

25 changes: 12 additions & 13 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"@mui/material": "^5.15.15",
"@mui/x-tree-view": "^7.5.0",
"@react-hook/debounce": "^4.0.0",
"@react-hook/throttle": "^2.2.0",
"@recoiljs/refine": "^0.1.1",
"@turf/bbox": "^6.5.0",
"@turf/bbox-polygon": "^6.5.0",
Expand All @@ -23,7 +22,6 @@
"d3-scale": "^4.0.2",
"d3-scale-chromatic": "^3.0.0",
"deck.gl": "8.9",
"http-proxy-middleware": "^3.0.0",
"immer": "^10.1.1",
"json-stable-stringify": "^1.0.1",
"lodash": "^4.17.21",
Expand All @@ -32,15 +30,12 @@
"react-dom": "^18.2.0",
"react-map-gl": "^5.3.21",
"react-router-dom": "^6.23.1",
"react-scripts": "^5.0.0",
"react-spring-bottom-sheet": "^3.4.1",
"react-transition-group": "^4.4.2",
"react-vega": "^7.6.0",
"recoil": "^0.7.7",
"recoil-sync": "^0.2.0",
"tileserver-gl-light": "^4.11.0",
"use-http": "^1.0.28",
"use-immer": "^0.9.0",
"vega": "^5.29.0",
"vega-lite": "^5.18.1"
},
Expand All @@ -51,7 +46,6 @@
"@types/d3-scale": "^4.0.2",
"@types/d3-scale-chromatic": "^3.0.0",
"@types/geojson": "^7946.0.8",
"@types/jest": "^27.0.1",
"@types/json-stable-stringify": "^1.0.34",
"@types/lodash": "^4.14.173",
"@types/mapbox-gl": "^1.13.2",
Expand All @@ -60,17 +54,22 @@
"@types/react-dom": "^18.3.0",
"@types/react-router": "^5.1.16",
"@types/react-router-dom": "^5.1.8",
"@types/react-transition-group": "^4.4.4",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.6.0",
"eslint-config-react-app": "^7.0.1",
"openapi-typescript-codegen": "^0.21.0",
"prettier": "^3.2.5",
"typescript": "^4.5.5"
"typescript": "^4.5.5",
"vite": "^5.2.11",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.{js,jsx}",
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint src",
"format": "prettier --write ./src",
"generate-client": "openapi --input http://localhost:8888/openapi.json --output ./src/lib/api-client --client fetch --name ApiClient --useOptions"
},
Expand Down
25 changes: 16 additions & 9 deletions frontend/src/lib/map-shapes/shapes.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { default as CircleShapeSrc, ReactComponent as CircleShape } from './shapes/circle.svg';
import { default as SquareShapeSrc, ReactComponent as SquareShape } from './shapes/square.svg';
import { default as PolygonShapeSrc, ReactComponent as PolygonShape } from './shapes/polygon.svg';
import { default as LineShapeSrc, ReactComponent as LineShape } from './shapes/line.svg';
import {
default as InvTriangleShapeSrc,
ReactComponent as InvTriangleShape,
} from './shapes/inv-triangle.svg';
import { default as DiamondShapeSrc, ReactComponent as DiamondShape } from './shapes/diamond.svg';
/*
The Vite SVGR plugin exports SVG components and SVG URLs, but you have to know the magic
URL query params. See https://stackoverflow.com/a/70314031
*/
import CircleShape from './shapes/circle.svg?react';
import CircleShapeSrc from './shapes/circle.svg?url';
import SquareShape from './shapes/square.svg?react';
import SquareShapeSrc from './shapes/square.svg?url';
import PolygonShape from './shapes/polygon.svg?react';
import PolygonShapeSrc from './shapes/polygon.svg?url';
import LineShape from './shapes/line.svg?react';
import LineShapeSrc from './shapes/line.svg?url';
import InvTriangleShape from './shapes/inv-triangle.svg?react';
import InvTriangleShapeSrc from './shapes/inv-triangle.svg?url';
import DiamondShape from './shapes/diamond.svg?react';
import DiamondShapeSrc from './shapes/diamond.svg?url';

export const MAP_SHAPE_TYPES = [
'line',
Expand Down
42 changes: 0 additions & 42 deletions frontend/src/setupProxy.js

This file was deleted.

11 changes: 0 additions & 11 deletions frontend/tsconfig-typings.json

This file was deleted.

14 changes: 10 additions & 4 deletions frontend/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"extends": "./tsconfig-typings.json",
"compilerOptions": {
"target": "es5",
"target": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
Expand All @@ -18,7 +17,14 @@
"jsx": "react-jsx",
"noImplicitAny": false,
"downlevelIteration": true,
"baseUrl": "./src"
"baseUrl": "./src",
"paths": {
"*": [
"../node_modules/@danmarshall/deckgl-typings/*",
"*"
]
}
},
"include": ["src"]
"include": ["src"],
"references": [{ "path": "./tsconfig.vite.json" }]
}
9 changes: 9 additions & 0 deletions frontend/tsconfig.vite.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
2 changes: 2 additions & 0 deletions frontend/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />
36 changes: 36 additions & 0 deletions frontend/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import react from '@vitejs/plugin-react';
import fs from 'fs';
import path from 'path';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
import viteTsconfigPaths from 'vite-tsconfig-paths';

/**
* To set up a development proxy, create and edit the file dev-proxy/proxy-table.json
* You can copy and rename one of the included examples.
* See https://vitejs.dev/config/server-options.html#server-proxy for syntax
*/
let devProxy;
try {
devProxy = JSON.parse(
fs.readFileSync(path.resolve(__dirname, 'dev-proxy/proxy-table.json')).toString(),
);
} catch (err) {
if (err.code === 'ENOENT') {
// no dev proxy config, do nothing
} else {
console.error('Invalid JSON file: dev-proxy/proxy-table.json');
}
}

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
build: {
outDir: 'build',
},
server: {
open: true,
proxy: devProxy,
},
});

0 comments on commit f22c389

Please sign in to comment.