diff --git a/frontend/public/index.html b/frontend/index.html similarity index 60% rename from frontend/public/index.html rename to frontend/index.html index 5294c8ad..c067515a 100644 --- a/frontend/public/index.html +++ b/frontend/index.html @@ -4,11 +4,12 @@ Open Swarm - - + +
+ - \ No newline at end of file + diff --git a/frontend/package.json b/frontend/package.json index dad81384..0227dd2c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,9 +3,9 @@ "version": "1.0.0", "description": "Open Swarm — Agent Orchestrator frontend built with React", "scripts": { - "build": "webpack --mode=production", - "build:watch": "webpack --mode=development --watch", - "dev": "webpack serve --mode=development", + "build": "vite build", + "build:watch": "vite build --watch", + "dev": "vite", "clean": "rm -rf dist", "lint": "eslint src/", "lint:fix": "eslint src/ --fix", @@ -50,30 +50,17 @@ "zustand": "^5.0.12" }, "devDependencies": { - "@swc/core": "^1.15.26", "@tailwindcss/postcss": "^4.2.2", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", - "copy-webpack-plugin": "^14.0.0", - "css-loader": "^6.8.0", - "css-modules-types-loader": "^0.6.10", + "@vitejs/plugin-react-swc": "^4.3.0", "eslint": "^9.39.4", "eslint-plugin-react-hooks": "^7.0.1", - "html-webpack-plugin": "^5.5.0", "knip": "^6.1.0", "postcss": "^8.5.8", - "postcss-loader": "^8.2.1", "sass": "^1.89.2", - "sass-loader": "^16.0.5", - "style-loader": "^3.3.0", - "swc-loader": "^0.2.7", "typescript": "^5.0.0", "typescript-eslint": "^8.58.0", - "webpack": "^5.88.0", - "webpack-cli": "^5.1.0", - "webpack-dev-server": "^4.15.0" - }, - "browserslist": [ - "last 2 Chrome versions" - ] + "vite": "^8.0.8" + } } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts new file mode 100644 index 00000000..cae2f7f2 --- /dev/null +++ b/frontend/vite.config.ts @@ -0,0 +1,30 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react-swc' +import path from 'path' +import portsConfig from '../ports.config.json' + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-full.mjs')]: + path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-web.mjs'), + [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/langs.mjs')]: + path.resolve(__dirname, 'src/shims/shiki-langs-noop.mjs'), + }, + }, + server: { + port: portsConfig.frontend.dev, + proxy: { + '/api': { + target: `http://localhost:${portsConfig.backend.dev}`, + changeOrigin: true, + }, + }, + }, + base: './', + build: { + outDir: 'dist', + }, +}) diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js deleted file mode 100644 index 9dc3c13c..00000000 --- a/frontend/webpack.config.js +++ /dev/null @@ -1,115 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); - -const portsConfig = require('../ports.config.json'); - -module.exports = (env, argv) => { - const isDevelopment = argv.mode === 'development'; - - return { - entry: './src/index.tsx', - - output: { - path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: isDevelopment ? '/' : './', - clean: true - }, - - module: { - rules: [ - { - test: /\.(js|jsx|ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: 'swc-loader', - options: { - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - dynamicImport: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - target: 'es2017', - }, - }, - }, - }, - { - test: /\.css$/, - use: ['style-loader', 'css-loader', 'postcss-loader'] - }, - { - test: /\.module\.(scss|sass)$/, - use: [ - 'style-loader', - 'css-modules-types-loader', - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[name]__[local]___[hash:base64:5]' - } - } - }, - 'sass-loader' - ] - } - ] - }, - - resolve: { - extensions: ['.tsx', '.ts', '.js'], - alias: { - '@': path.resolve(__dirname, 'src'), - [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-full.mjs')]: - path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-web.mjs'), - [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/langs.mjs')]: - path.resolve(__dirname, 'src/shims/shiki-langs-noop.mjs'), - } - }, - - plugins: [ - new HtmlWebpackPlugin({ - template: './public/index.html', - filename: 'index.html', - favicon: './public/favicon.ico' - }), - new CopyWebpackPlugin({ - patterns: [ - { - from: 'public', - to: '.', - globOptions: { ignore: ['**/index.html', '**/favicon.ico'] }, - }, - ], - }), - ], - - cache: isDevelopment ? { type: 'filesystem' } : false, - - devtool: isDevelopment ? 'eval-cheap-module-source-map' : false, - - devServer: { - static: { directory: path.join(__dirname, 'public') }, - compress: true, - port: portsConfig.frontend.dev, - hot: true, - open: false, - historyApiFallback: true, - proxy: { - '/api': { - target: `http://localhost:${portsConfig.backend.dev}`, - changeOrigin: true, - }, - }, - } - }; -};