Skip to content

Commit 189c562

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

File tree

22 files changed

+462
-37
lines changed

22 files changed

+462
-37
lines changed

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy