Skip to content

Commit 189c562

Browse files
author
Bruno Quaresma
authored
chore: Use Vite instead of Webpack for development (coder#4156)
1 parent ee00a1d commit 189c562

22 files changed

Lines changed: 462 additions & 37 deletions

File tree

‎scripts/develop.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ CODER_DEV_SHIM="${PROJECT_ROOT}/scripts/coder-dev.sh"
9797
fi
9898

9999
# Start the frontend once we have a template up and running
100-
CODER_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=false yarn --cwd=./site dev || kill -INT -$$ &
100+
CODER_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=false yarn --cwd=./site dev:vite || kill -INT -$$ &
101101

102102
log
103103
log "===================================================================="

‎site/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
▄█▀ ▀█▄
5+
▄▄ ▀▀▀ █▌ ██▀▀█▄ ▐█
6+
▄▄██▀▀█▄▄▄ ██ ██ █▀▀█ ▐█▀▀██ ▄█▀▀█ █▀▀
7+
█▌ ▄▌ ▐█ █▌ ▀█▄▄▄█▌ █ █ ▐█ ██ ██▀▀ █
8+
██████▀▄█ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀ ▀
9+
-->
10+
11+
<head>
12+
<meta charset="utf-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<meta name="theme-color" content="#17172E" />
15+
<meta name="application-name" content="Coder2" />
16+
<meta property="og:type" content="website" />
17+
<meta property="csp-nonce" content="{{ .CSP.Nonce }}" />
18+
<meta property="csrf-token" content="{{ .CSRF.Token }}" />
19+
<meta
20+
id="api-response"
21+
data-statuscode="{{ .APIResponse.StatusCode }}"
22+
data-message="{{ .APIResponse.Message }}"
23+
/>
24+
<!-- We need to set data-react-helmet to be able to override it in the workspace page -->
25+
<link
26+
rel="alternate icon"
27+
type="image/png"
28+
href="/favicons/favicon.png"
29+
data-react-helmet="true"
30+
/>
31+
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" data-react-helmet="true" />
32+
</head>
33+
34+
<body>
35+
<div id="root"></div>
36+
<script type="module" src="./src/Main.tsx"></script>
37+
</body>

‎site/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"check:all": "yarn format:check && yarn lint && yarn test",
1111
"chromatic": "chromatic",
1212
"dev": "webpack-dev-server --config=webpack.dev.ts",
13+
"dev:vite": "vite",
1314
"format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
1415
"format:types": "prettier --write 'src/api/typesGenerated.ts'",
1516
"format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
@@ -34,6 +35,7 @@
3435
"@material-ui/icons": "4.5.1",
3536
"@material-ui/lab": "4.0.0-alpha.42",
3637
"@testing-library/react-hooks": "8.0.1",
38+
"@vitejs/plugin-react": "2.1.0",
3739
"@xstate/inspect": "0.6.5",
3840
"@xstate/react": "3.0.1",
3941
"axios": "0.26.1",
@@ -65,6 +67,7 @@
6567
"tzdata": "1.0.30",
6668
"ua-parser-js": "1.0.2",
6769
"uuid": "9.0.0",
70+
"vite": "3.1.3",
6871
"xstate": "4.33.5",
6972
"xterm": "4.19.0",
7073
"xterm-addon-fit": "0.5.0",

‎site/src/AppRouter.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@ import { useSelector } from "@xstate/react"
22
import { FeatureNames } from "api/types"
33
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
44
import { RequirePermission } from "components/RequirePermission/RequirePermission"
5+
import IndexPage from "pages"
6+
import AuditPage from "pages/AuditPage/AuditPage"
7+
import LoginPage from "pages/LoginPage/LoginPage"
58
import { SetupPage } from "pages/SetupPage/SetupPage"
69
import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
10+
import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
11+
import UsersPage from "pages/UsersPage/UsersPage"
12+
import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
713
import { FC, lazy, Suspense, useContext } from "react"
814
import { Route, Routes } from "react-router-dom"
915
import { selectPermissions } from "xServices/auth/authSelectors"
@@ -12,28 +18,27 @@ import { XServiceContext } from "xServices/StateContext"
1218
import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
1319
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
1420
import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
15-
import { IndexPage } from "./pages"
16-
import { NotFoundPage } from "./pages/404Page/404Page"
17-
import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"
18-
import { HealthzPage } from "./pages/HealthzPage/HealthzPage"
19-
import { LoginPage } from "./pages/LoginPage/LoginPage"
20-
import { TemplatesPage } from "./pages/TemplatesPage/TemplatesPage"
21-
import { AccountPage } from "./pages/UserSettingsPage/AccountPage/AccountPage"
22-
import { SecurityPage } from "./pages/UserSettingsPage/SecurityPage/SecurityPage"
23-
import { SSHKeysPage } from "./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage"
24-
import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
25-
import { UsersPage } from "./pages/UsersPage/UsersPage"
26-
import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPage"
27-
import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
28-
import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
2921

22+
// Lazy load pages
23+
// - Pages that are secondary, not in the main navigation or not usually accessed
24+
// - Pages that use heavy dependencies like charts or time libraries
25+
const NotFoundPage = lazy(() => import("./pages/404Page/404Page"))
26+
const CliAuthenticationPage = lazy(() => import("./pages/CliAuthPage/CliAuthPage"))
27+
const HealthzPage = lazy(() => import("./pages/HealthzPage/HealthzPage"))
28+
const AccountPage = lazy(() => import("./pages/UserSettingsPage/AccountPage/AccountPage"))
29+
const SecurityPage = lazy(() => import("./pages/UserSettingsPage/SecurityPage/SecurityPage"))
30+
const SSHKeysPage = lazy(() => import("./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage"))
31+
const CreateUserPage = lazy(() => import("./pages/UsersPage/CreateUserPage/CreateUserPage"))
32+
const WorkspaceBuildPage = lazy(() => import("./pages/WorkspaceBuildPage/WorkspaceBuildPage"))
33+
const WorkspacePage = lazy(() => import("./pages/WorkspacePage/WorkspacePage"))
34+
const WorkspaceSchedulePage = lazy(
35+
() => import("./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"),
36+
)
3037
const WorkspaceAppErrorPage = lazy(
3138
() => import("./pages/WorkspaceAppErrorPage/WorkspaceAppErrorPage"),
3239
)
3340
const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
34-
const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
3541
const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
36-
const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
3742
const TemplatePage = lazy(() => import("./pages/TemplatePage/TemplatePage"))
3843

3944
export const AppRouter: FC = () => {
@@ -133,9 +138,6 @@ export const AppRouter: FC = () => {
133138
/>
134139
</Route>
135140

136-
{/* REMARK: Route under construction
137-
Eventually, we should gate this page
138-
with permissions and licensing */}
139141
<Route path="/audit">
140142
<Route
141143
index

‎site/src/Main.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
1-
import { inspect } from "@xstate/inspect"
21
import { createRoot } from "react-dom/client"
3-
import { Interpreter } from "xstate"
42
import { App } from "./app"
5-
63
import "./i18n"
74

8-
// if this is a development build and the developer wants to inspect
9-
if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
10-
// configure the XState inspector to open in a new tab
11-
inspect({
12-
url: "https://stately.ai/viz?inspect",
13-
iframe: false,
14-
})
15-
// configure all XServices to use the inspector
16-
Interpreter.defaultOptions.devTools = true
17-
}
18-
195
// This is the entry point for the app - where everything start.
206
// In the future, we'll likely bring in more bootstrapping logic -
217
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32

‎site/src/pages/404Page/404Page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,5 @@ const useStyles = makeStyles((theme) => ({
3030
borderRight: theme.palette.divider,
3131
},
3232
}))
33+
34+
export default NotFoundPage

‎site/src/pages/CliAuthPage/CliAuthPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,5 @@ export const CliAuthenticationPage: React.FC<React.PropsWithChildren<unknown>> =
2929
</>
3030
)
3131
}
32+
33+
export default CliAuthenticationPage

‎site/src/pages/HealthzPage/HealthzPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@ import { FC } from "react"
66
* accessible by humans and services.
77
*/
88
export const HealthzPage: FC = () => <div>ok</div>
9+
10+
export default HealthzPage

‎site/src/pages/LoginPage/LoginPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,5 @@ export const LoginPage: React.FC = () => {
5959
)
6060
}
6161
}
62+
63+
export default LoginPage

‎site/src/pages/TemplatesPage/TemplatesPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ export const TemplatesPage: React.FC = () => {
2727
</>
2828
)
2929
}
30+
31+
export default TemplatesPage

0 commit comments

Comments
 (0)