Skip to content

Commit

Permalink
speed up development env with swc-loader and hmr
Browse files Browse the repository at this point in the history
  • Loading branch information
@christianvogt
christianvogt committed Nov 8, 2024
1 parent 429d339 commit 0259489
Show file tree
Hide file tree
Showing 5 changed files with 1,262 additions and 337 deletions.
18 changes: 11 additions & 7 deletions frontend/config/webpack.common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const RELATIVE_DIRNAME = process.env._ODH_RELATIVE_DIRNAME;
const IS_PROJECT_ROOT_DIR = process.env._ODH_IS_PROJECT_ROOT_DIR;
Expand Down Expand Up @@ -34,16 +35,18 @@ module.exports = (env) => {
rules: [
{
test: /\.(tsx|ts|jsx|js)?$/,
exclude: [/node_modules/, /__tests__/, /__mocks__/],
include: [SRC_DIR, COMMON_DIR],
use: [
COVERAGE === 'true' && '@jsdevtools/coverage-istanbul-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: env !== 'development',
experimentalWatchApi: true,
},
},
env === 'development'
? { loader: 'swc-loader' }
: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
},
{
Expand Down Expand Up @@ -176,6 +179,7 @@ module.exports = (env) => {
publicPath: PUBLIC_PATH,
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
...setupWebpackDotenvFilesForEnv({
directory: RELATIVE_DIRNAME,
isRoot: IS_PROJECT_ROOT_DIR,
Expand Down
230 changes: 124 additions & 106 deletions frontend/config/webpack.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ const { execSync } = require('child_process');
const path = require('path');
const { merge } = require('webpack-merge');
const { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv } = require('./dotenv');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });

setupDotenvFilesForEnv({ env: 'development' });
const webpackCommon = require('./webpack.common.js');
Expand All @@ -15,120 +19,134 @@ const HOST = process.env._ODH_HOST;
const PORT = process.env._ODH_PORT;
const BACKEND_PORT = process.env._BACKEND_PORT;

module.exports = merge(
{
plugins: [
...setupWebpackDotenvFilesForEnv({
directory: RELATIVE_DIRNAME,
env: 'development',
isRoot: IS_PROJECT_ROOT_DIR,
}),
],
},
webpackCommon('development'),
{
mode: 'development',
devtool: 'eval-source-map',
devServer: {
host: HOST,
port: PORT,
compress: true,
historyApiFallback: true,
hot: true,
open: false,
proxy: (() => {
if (process.env.EXT_CLUSTER) {
const odhProject = process.env.OC_PROJECT || 'opendatahub';
const app = process.env.ODH_APP || 'odh-dashboard';
console.info('Using project:', odhProject);
module.exports = smp.wrap(
merge(
{
plugins: [
...setupWebpackDotenvFilesForEnv({
directory: RELATIVE_DIRNAME,
env: 'development',
isRoot: IS_PROJECT_ROOT_DIR,
}),
],
},
webpackCommon('development'),
{
mode: 'development',
devtool: 'eval-source-map',
optimization: {
runtimeChunk: 'single',
removeEmptyChunks: true,
},
devServer: {
host: HOST,
port: PORT,
compress: true,
historyApiFallback: true,
hot: true,
open: false,
proxy: (() => {
if (process.env.EXT_CLUSTER) {
const odhProject = process.env.OC_PROJECT || 'opendatahub';
const app = process.env.ODH_APP || 'odh-dashboard';
console.info('Using project:', odhProject);

let dashboardHost;
let token;
try {
let dashboardHost;
let token;
try {
dashboardHost = execSync(
`oc get routes -n ${odhProject} ${app} -o jsonpath='{.spec.host}'`,
)
.toString()
.trim();
try {
dashboardHost = execSync(
`oc get routes -n ${odhProject} ${app} -o jsonpath='{.spec.host}'`,
)
.toString()
.trim();
} catch (e) {
console.info('Failed to GET dashboard route, constructing host manually.');
dashboardHost = new URL(
execSync(`oc whoami --show-console`).toString(),
).host.replace(/^[^.]+\./, `${app}-${odhProject}.`);
}
console.info('Dashboard host:', dashboardHost);

token = execSync('oc whoami --show-token').toString().trim();

const username = execSync('oc whoami').toString().trim();
console.info('Logged in as user:', username);
} catch (e) {
console.info('Failed to GET dashboard route, constructing host manually.');
dashboardHost = new URL(execSync(`oc whoami --show-console`).toString()).host
.replace(/^[^.]+\./, `${app}-${odhProject}.`);
console.error('Login with `oc login` prior to starting dev server.');
process.exit(1);
}
console.info('Dashboard host:', dashboardHost);

token = execSync('oc whoami --show-token').toString().trim();
const headers = {
Authorization: `Bearer ${token}`,
'x-forwarded-access-token': token,
};

const username = execSync('oc whoami').toString().trim();
console.info('Logged in as user:', username);
} catch (e) {
console.error('Login with `oc login` prior to starting dev server.');
process.exit(1);
return [
{
context: ['/api'],
target: `https://${dashboardHost}`,
secure: false,
changeOrigin: true,
headers,
},
{
context: ['/wss'],
target: `wss://${dashboardHost}`,
ws: true,
secure: false,
changeOrigin: true,
headers,
},
];
} else {
return [
{
context: ['/api'],
target: `http://0.0.0.0:${BACKEND_PORT}`,
},
{
context: ['/wss'],
target: `ws://0.0.0.0:${BACKEND_PORT}`,
ws: true,
},
];
}

const headers = {
Authorization: `Bearer ${token}`,
'x-forwarded-access-token': token,
};

return {
'/api': {
target: `https://${dashboardHost}`,
secure: false,
changeOrigin: true,
headers,
},
'/wss': {
target: `wss://${dashboardHost}`,
ws: true,
secure: false,
changeOrigin: true,
headers,
},
};
} else {
return {
'/api': `http://0.0.0.0:${BACKEND_PORT}`,
'/wss': {
target: `ws://0.0.0.0:${BACKEND_PORT}`,
ws: true,
},
};
}
})(),
devMiddleware: {
stats: 'errors-only',
},
client: {
overlay: false,
},
static: {
directory: DIST_DIR,
})(),
devMiddleware: {
stats: 'errors-only',
},
client: {
overlay: false,
},
static: {
directory: DIST_DIR,
},
onListening: (devServer) => {
if (devServer) {
console.log(
`\x1b[32m✓ ODH Dashboard available at: \x1b[4mhttp://localhost:${
devServer.server.address().port
}\x1b[0m`,
);
}
},
},
onListening: (devServer) => {
if (devServer) {
console.log(
`\x1b[32m✓ ODH Dashboard available at: \x1b[4mhttp://localhost:${
devServer.server.address().port
}\x1b[0m`,
);
}
module: {
rules: [
{
test: /\.css$/,
include: [
SRC_DIR,
COMMON_DIR,
path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
path.resolve(RELATIVE_DIRNAME, 'node_modules/monaco-editor'),
],
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [new ReactRefreshWebpackPlugin({ overlay: false })],
},
module: {
rules: [
{
test: /\.css$/,
include: [
SRC_DIR,
COMMON_DIR,
path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
path.resolve(RELATIVE_DIRNAME, 'node_modules/monaco-editor'),
],
use: ['style-loader', 'css-loader'],
},
],
},
},
),
);
Loading

0 comments on commit 0259489

Please sign in to comment.