-
Notifications
You must be signed in to change notification settings - Fork 136
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Build the frontend by esbuild instead of webpack #1063
Changes from all commits
6bf9856
c4f0493
e38de03
95d254e
4acb3e9
7ac21dc
c5e60e5
cc6c615
bc8295e
b53c605
5623843
2f148fc
c3ac7c5
238ec57
7b4f2a1
eced827
e8863c4
d3808ee
450bb89
40f6167
3fef299
cb9c4e8
c61ed0d
588fd61
fd9d8d9
2f44161
6536f8b
9b64acc
e71fb87
6db8e10
21ceaf6
2e66a1a
7248f20
64bb9ae
50df3d3
85e559c
8dd25cd
ea52d9b
ac1857a
80c7312
40e4422
058198b
1df6a38
fe5b22a
7f925ac
1ced955
0253809
8038644
b1fd304
15ddefb
6849743
ffb18cf
6ac24b9
2b2cc7b
5ce9796
9ddbedc
8c7cddd
11f18f9
05c7db6
2202af2
2d33cb5
cfda3e8
5f7ad7e
ab279ca
45b8a2f
0ec2eae
987c6b3
1f66bc9
bd4bb5f
c1f1896
4531af1
b26b482
24989c8
d5442b6
51f8959
22ba497
88862b9
3b28574
30ee649
ad74c57
c79550b
c76c449
0f7749d
943ec88
99b5b00
8007e2e
87c8b79
b4af6df
12ece77
d3a1979
8ccb6c7
e87773b
781b6c3
b830bbe
6e31304
0bf0efc
79e58e2
18b83cb
dacb9d1
c4745fd
c567a10
ce12e39
8c27ecf
0510692
472b469
823d13d
090c16b
aa9f33b
b9cb4b7
7087880
e33782f
f6a26ba
fc9e482
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
[log] | ||
slow-threshold = 800 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
PORT=3001 | ||
PUBLIC_URL='/dashboard' | ||
REACT_APP_VERSION=$npm_package_version | ||
REACT_APP_NAME=$npm_package_name | ||
REACT_APP_SENTRY_DSN=https://[email protected]/5721090 | ||
REACT_APP_SENTRY_ENABLED=false | ||
# REACT_APP_RELEASE_VERSION is set in config-overrides.js | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,6 @@ | ||
INLINE_RUNTIME_CHUNK=false | ||
PUBLIC_URL=__PUBLIC_PATH_PREFIX__/ | ||
PUBLIC_URL=__PUBLIC_PATH_PREFIX__ | ||
breezewish marked this conversation as resolved.
Show resolved
Hide resolved
|
||
REACT_APP_VERSION=$npm_package_version | ||
REACT_APP_NAME=$npm_package_name | ||
REACT_APP_SENTRY_DSN=https://[email protected]/5721090 | ||
REACT_APP_SENTRY_ENABLED=true | ||
# REACT_APP_RELEASE_VERSION is set in config-overrides.js | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
module.exports = { | ||
extends: ['react-app'], | ||
ignorePatterns: ['lib/client/api/*.ts'], | ||
rules: { | ||
'react/react-in-jsx-scope': 'error', | ||
'jsx-a11y/anchor-is-valid': 'off', | ||
'jsx-a11y/alt-text': 'off', | ||
'import/no-anonymous-default-export': 'off', | ||
}, | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,4 +30,6 @@ dist/ | |
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
yarn-error.log* | ||
|
||
.eslintcache |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,211 @@ | ||
const fs = require('fs-extra') | ||
const os = require('os') | ||
const chalk = require('chalk') | ||
const { start } = require('live-server') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use live-server to start a dev server in the dev mode. |
||
const { createProxyMiddleware } = require('http-proxy-middleware') | ||
const { watch } = require('chokidar') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use chokidar lib to watch files changes in the dev mode. |
||
const { build } = require('esbuild') | ||
const postCssPlugin = require('@baurine/esbuild-plugin-postcss3') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix the upstream bugs and support cache in the forked plugin |
||
const { yamlPlugin } = require('esbuild-plugin-yaml') | ||
const autoprefixer = require('autoprefixer') | ||
|
||
const isDev = process.env.NODE_ENV !== 'production' | ||
|
||
// handle .env | ||
if (isDev) { | ||
fs.copyFileSync('./.env.development', './.env') | ||
} else { | ||
fs.copyFileSync('./.env.production', './.env') | ||
} | ||
// load .env file | ||
require('dotenv').config() | ||
|
||
const dashboardApiPrefix = | ||
process.env.REACT_APP_DASHBOARD_API_URL || 'http://127.0.0.1:12333' | ||
const devServerPort = process.env.PORT | ||
const devServerParams = { | ||
port: devServerPort, | ||
root: 'build', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we should define a global var |
||
open: '/dashboard', | ||
// Set base URL | ||
// https://github.com/tapio/live-server/issues/287 - How can I serve from a base URL? | ||
proxy: [['/dashboard', `http://127.0.0.1:${devServerPort}`]], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we should use process.env.PUBLIC_URL as base URL instead of hard-code. |
||
middleware: isDev && [ | ||
function (req, _res, next) { | ||
if (/\/dashboard\/api\/diagnose\/reports\/\S+\/detail/.test(req.url)) { | ||
req.url = '/diagnoseReport.html' | ||
} | ||
next() | ||
}, | ||
createProxyMiddleware('/dashboard/api/diagnose/reports/*/data.js', { | ||
target: dashboardApiPrefix, | ||
changeOrigin: true, | ||
}), | ||
], | ||
Comment on lines
+33
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To support access diagnosis report page in the dev mode. |
||
} | ||
|
||
const lessModifyVars = { | ||
'@primary-color': '#3351ff', | ||
'@body-background': '#fff', | ||
'@tooltip-bg': 'rgba(0, 0, 0, 0.9)', | ||
'@tooltip-max-width': '500px', | ||
} | ||
const lessGlobalVars = { | ||
'@padding-page': '48px', | ||
'@gray-1': '#fff', | ||
'@gray-2': '#fafafa', | ||
'@gray-3': '#f5f5f5', | ||
'@gray-4': '#f0f0f0', | ||
'@gray-5': '#d9d9d9', | ||
'@gray-6': '#bfbfbf', | ||
'@gray-7': '#8c8c8c', | ||
'@gray-8': '#595959', | ||
'@gray-9': '#262626', | ||
'@gray-10': '#000', | ||
} | ||
|
||
function getInternalVersion() { | ||
const version = fs | ||
.readFileSync('../release-version', 'utf8') | ||
.split(os.EOL) | ||
.map((l) => l.trim()) | ||
.filter((l) => !l.startsWith('#') && l !== '')[0] | ||
if (version === '') { | ||
throw new Error( | ||
`invalid release version, please check the release-version @tidb-dashboard/root` | ||
) | ||
} | ||
return version | ||
} | ||
|
||
function genDefine() { | ||
const define = {} | ||
for (const k in process.env) { | ||
if (k.startsWith('REACT_APP_')) { | ||
let envVal = process.env[k] | ||
// Example: REACT_APP_VERSION=$npm_package_version | ||
// Expect output: REACT_APP_VERSION=0.1.0 | ||
if (envVal.startsWith('$')) { | ||
envVal = process.env[envVal.substring(1)] | ||
} | ||
define[`process.env.${k}`] = JSON.stringify(envVal) | ||
} | ||
} | ||
define['process.env.REACT_APP_RELEASE_VERSION'] = JSON.stringify( | ||
getInternalVersion() | ||
) | ||
return define | ||
} | ||
|
||
// customized plugin: log time | ||
const logTime = (_options = {}) => ({ | ||
name: 'logTime', | ||
setup(build) { | ||
let time | ||
|
||
build.onStart(() => { | ||
time = new Date() | ||
console.log(`Build started`) | ||
}) | ||
|
||
build.onEnd(() => { | ||
console.log(`Build ended: ${chalk.yellow(`${new Date() - time}ms`)}`) | ||
}) | ||
}, | ||
}) | ||
|
||
const esbuildParams = { | ||
color: true, | ||
entryPoints: { | ||
dashboardApp: 'src/index.ts', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The original entry point name for |
||
diagnoseReport: 'diagnoseReportApp/index.tsx', | ||
}, | ||
loader: { '.ts': 'tsx' }, | ||
outdir: 'build', | ||
minify: !isDev, | ||
format: 'esm', | ||
bundle: true, | ||
sourcemap: true, | ||
logLevel: 'error', | ||
incremental: true, | ||
splitting: true, | ||
platform: 'browser', | ||
plugins: [ | ||
postCssPlugin.default({ | ||
lessOptions: { | ||
modifyVars: lessModifyVars, | ||
globalVars: lessGlobalVars, | ||
javascriptEnabled: true, | ||
}, | ||
enableCache: true, | ||
plugins: [autoprefixer], | ||
}), | ||
yamlPlugin(), | ||
logTime(), | ||
], | ||
define: genDefine(), | ||
inject: ['./process-shim.js'], // fix runtime crash | ||
} | ||
|
||
function buildHtml(inputFilename, outputFilename) { | ||
let result = fs.readFileSync(inputFilename).toString() | ||
|
||
const placeholders = ['PUBLIC_URL'] | ||
placeholders.forEach((key) => { | ||
result = result.replace(new RegExp(`%${key}%`, 'g'), process.env[key]) | ||
}) | ||
|
||
// handle distro strings res, only for dev mode | ||
const distroStringsResFilePath = './build/distro-res/strings.json' | ||
if (isDev && fs.existsSync(distroStringsResFilePath)) { | ||
const distroStringsRes = require(distroStringsResFilePath) | ||
result = result.replace( | ||
'__DISTRO_STRINGS_RES__', | ||
btoa(JSON.stringify(distroStringsRes)) | ||
) | ||
} | ||
|
||
fs.writeFileSync(outputFilename, result) | ||
} | ||
|
||
function handleAssets() { | ||
fs.copySync('./public', './build') | ||
if (isDev) { | ||
copyDistroRes() | ||
} | ||
|
||
buildHtml('./public/index.html', './build/index.html') | ||
buildHtml('./public/diagnoseReport.html', './build/diagnoseReport.html') | ||
} | ||
|
||
function copyDistroRes() { | ||
const distroResPath = '../bin/distro-res' | ||
if (fs.existsSync(distroResPath)) { | ||
fs.copySync(distroResPath, './build/distro-res') | ||
} | ||
} | ||
|
||
async function main() { | ||
fs.removeSync('./build') | ||
|
||
const builder = await build(esbuildParams) | ||
handleAssets() | ||
|
||
if (isDev) { | ||
start(devServerParams) | ||
|
||
const tsConfig = require('./tsconfig.json') | ||
tsConfig.include.forEach((folder) => { | ||
watch(`${folder}/**/*`, { ignoreInitial: true }).on('all', () => { | ||
builder.rebuild() | ||
}) | ||
}) | ||
watch('public/**/*', { ignoreInitial: true }).on('all', () => { | ||
handleAssets() | ||
}) | ||
} else { | ||
process.exit(0) | ||
} | ||
} | ||
|
||
main() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's wrong with this block?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/cc @YiniXu9506
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The introduced esbuild causes the plugin in .babelrc does not work. I am working on this.