mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
ec077c6191
Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle - [x] Switch from `next/link` to `react-router-dom`'s link > This part was easy - just change the import to `import { Link } from "react-router-dom"` and `<Link href={...} />` to `<Link to={...} />` - [x] Switch from `next/router` to `react-router-dom`'s paradigms (`useNavigation`, `useLocation`, and `useParams`) > `router.push` can be converted to `navigate(...)` (provided by the `useNavigate` hook) > `router.replace` can be converted `navigate(..., {replace: true})` > Query parameters (`const { query } = useRouter`) can be converted to `const query = useParams()`) - [x] Implement client-side routing with `react-router-dom` > Parameterized routes in NextJS like `projects/[organization]/[project]` would look like: > ``` > <Route path="projects"> > <Route path=":organization/:project"> > <Route index element={<ProjectPage />} /> > </Route> > </Route> > ``` I've hooked up a `build:analyze` command that spins up a server to show the bundle size: <img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png"> The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
/**
|
|
* @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 { commonWebpackConfig } from "./webpack.common"
|
|
|
|
const commonPlugins = commonWebpackConfig.plugins || []
|
|
|
|
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 protocal, hostname and port automatically for us.
|
|
webSocketURL: "auto://0.0.0.0:0/ws",
|
|
},
|
|
devMiddleware: {
|
|
publicPath: "/",
|
|
},
|
|
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: 8080,
|
|
proxy: {
|
|
"/api": "http://localhost:3000",
|
|
},
|
|
static: ["./static"],
|
|
},
|
|
|
|
// Development mode - see:
|
|
// https://webpack.js.org/configuration/mode/#mode-development
|
|
mode: "development",
|
|
|
|
output: {
|
|
...commonWebpackConfig.output,
|
|
|
|
// The chunk name will be used as-is for the bundle output
|
|
// This is simpler than production, to improve performance
|
|
// (no need to calculate hashes in development)
|
|
filename: "[name].js",
|
|
},
|
|
|
|
plugins: [
|
|
...commonPlugins,
|
|
|
|
// The ReactRefreshWebpackPlugin enables hot-module reloading:
|
|
// https://github.com/pmmmwh/react-refresh-webpack-plugin
|
|
new ReactRefreshWebpackPlugin({
|
|
overlay: true,
|
|
}),
|
|
],
|
|
}
|
|
|
|
export default config
|