diff --git a/scripts/develop.sh b/scripts/develop.sh index 262d0f54d509f..0e001fcb66ac8 100755 --- a/scripts/develop.sh +++ b/scripts/develop.sh @@ -97,7 +97,7 @@ CODER_DEV_SHIM="${PROJECT_ROOT}/scripts/coder-dev.sh" fi # Start the frontend once we have a template up and running - CODER_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=false yarn --cwd=./site dev:vite || kill -INT -$$ & + CODER_HOST=http://127.0.0.1:3000 yarn --cwd=./site dev || kill -INT -$$ & log log "====================================================================" diff --git a/site/package.json b/site/package.json index 8c5c6938873be..3f397ead7ce89 100644 --- a/site/package.json +++ b/site/package.json @@ -9,8 +9,7 @@ "build:analyze": "NODE_ENV=production webpack --profile --progress --json --config=webpack.prod.ts > out/stats.json && webpack-bundle-analyzer out/stats.json out", "check:all": "yarn format:check && yarn lint && yarn test", "chromatic": "chromatic", - "dev": "webpack-dev-server --config=webpack.dev.ts", - "dev:vite": "vite", + "dev": "vite", "format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'", "format:types": "prettier --write 'src/api/typesGenerated.ts'", "format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'", @@ -78,7 +77,6 @@ }, "devDependencies": { "@playwright/test": "1.25.1", - "@pmmmwh/react-refresh-webpack-plugin": "0.5.7", "@storybook/addon-actions": "6.5.9", "@storybook/addon-essentials": "6.5.12", "@storybook/addon-links": "6.5.9", @@ -136,8 +134,7 @@ "typescript": "4.8.2", "webpack": "5.74.0", "webpack-bundle-analyzer": "4.6.1", - "webpack-cli": "4.10.0", - "webpack-dev-server": "4.10.1" + "webpack-cli": "4.10.0" }, "browserslist": [ "chrome 66", diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts deleted file mode 100644 index dad40526220b7..0000000000000 --- a/site/webpack.dev.ts +++ /dev/null @@ -1,120 +0,0 @@ -/** - * @fileoverview This file contains a development configuration for webpack - * meant for webpack-dev-server. - */ -import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin" -import { Configuration } from "webpack" -import "webpack-dev-server" -import { createCommonWebpackConfig } from "./webpack.common" - -const commonWebpackConfig = createCommonWebpackConfig() - -const commonPlugins = commonWebpackConfig.plugins || [] - -const commonRules = commonWebpackConfig.module?.rules || [] - -const config: Configuration = { - ...commonWebpackConfig, - - // devtool controls how source maps are generated. In development, we want - // more details (less optimized) for more readability and an easier time - // debugging - devtool: "eval-source-map", - - // devServer is the configuration for webpack-dev-server. - // - // REMARK: needs webpack-dev-server import at top of file for typings - devServer: { - // allowedHosts are services that can access the running server. - // Setting allowedHosts sets up the development server to spend specific headers to allow cross-origin requests. - // In v1, we use CODERD_HOST for the allowed host and origin in order to mitigate security risks. - // We don't have an equivalent in v2 - but we can allow localhost and cdr.dev, - // so that the site is accessible through dev urls. - // We don't want to use 'all' or '*' and risk a security hole in our dev environments. - allowedHosts: ["localhost", ".cdr.dev"], - - // client configures options that are observed in the browser/web-client. - client: { - // automatically sets the browser console to verbose when using HMR - logging: "verbose", - - // errors will display as a full-screen overlay - overlay: true, - - // build % progress will display in the browser - progress: true, - - // webpack-dev-server uses a webSocket to communicate with the browser - // for HMR. By setting this to auto://0.0.0.0/ws, we allow the browser - // to set the protocol, hostname and port automatically for us. - webSocketURL: "auto://0.0.0.0:0/ws", - }, - devMiddleware: { - publicPath: "/", - headers: { - // This header corresponds to "src/api/api.ts"'s hardcoded FE token. - // This is the secret side of the CSRF double cookie submit method. - "Set-Cookie": - "csrf_token=JXm9hOUdZctWt0ZZGAy9xiS/gxMKYOThdxjjMnMUyn4=; Path=/; HttpOnly; SameSite=Lax", - }, - }, - headers: { - "Access-Control-Allow-Origin": "*", - }, - - // historyApiFallback is required when using history (react-router) for - // properly serving index.html on 404s. - historyApiFallback: true, - hot: true, - port: process.env.PORT || 8080, - proxy: { - "/api": { - target: process.env.CODER_HOST || "http://localhost:3000", - ws: true, - secure: false, - }, - }, - // We must disable compression to get SSEs to work (in workspaceXService.ts) - compress: false, - static: ["./static"], - }, - - // Development mode - see: - // https://webpack.js.org/configuration/mode/#mode-development - mode: "development", - - module: { - rules: [ - ...commonRules, - - { - test: /\.css$/i, - // Use simple style-loader for CSS modules. This places styles directly - // in