Skip to content

Commit 189c562

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: Use Vite instead of Webpack for development (coder#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

‎site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,5 @@ export const AccountPage: React.FC = () => {
3838
</Section>
3939
)
4040
}
41+
42+
export default AccountPage

‎site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,5 @@ export const SSHKeysPage: React.FC<React.PropsWithChildren<unknown>> = () => {
6969
</>
7070
)
7171
}
72+
73+
export default SSHKeysPage

‎site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,5 @@ export const SecurityPage: React.FC = () => {
3333
</Section>
3434
)
3535
}
36+
37+
export default SecurityPage

‎site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,5 @@ export const CreateUserPage: React.FC = () => {
4949
</Margins>
5050
)
5151
}
52+
53+
export default CreateUserPage

‎site/src/pages/UsersPage/UsersPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,3 +195,5 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
195195
</>
196196
)
197197
}
198+
199+
export default UsersPage

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ export const WorkspaceBuildPage: FC = () => {
2525
</>
2626
)
2727
}
28+
29+
export default WorkspaceBuildPage

‎site/src/pages/WorkspacePage/WorkspacePage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,5 @@ const useStyles = makeStyles((theme) => ({
154154
margin: theme.spacing(2),
155155
},
156156
}))
157+
158+
export default WorkspacePage

‎site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,5 @@ export const WorkspaceSchedulePage: React.FC = () => {
101101
console.error("WorkspaceSchedulePage: unknown state :: ", scheduleState)
102102
return <Navigate to="/" />
103103
}
104+
105+
export default WorkspaceSchedulePage

‎site/src/pages/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ import { Navigate } from "react-router-dom"
44
export const IndexPage: FC = () => {
55
return <Navigate to="/workspaces" replace />
66
}
7+
8+
export default IndexPage

‎site/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"resolveJsonModule": true,
1414
"skipLibCheck": true,
1515
"strict": true,
16-
"target": "es2018",
16+
"target": "es2020",
1717
"baseUrl": "./src"
1818
},
1919
"include": ["**/*.ts", "**/*.tsx"],

‎site/vite.config.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import react from "@vitejs/plugin-react"
2+
import path from "path"
3+
import { defineConfig } from "vite"
4+
5+
export default defineConfig({
6+
plugins: [react()],
7+
publicDir: path.resolve(__dirname, "./static"),
8+
build: {
9+
outDir: path.resolve(__dirname, "./out"),
10+
},
11+
define: {
12+
"process.env": process.env,
13+
},
14+
server: {
15+
port: process.env.PORT ? Number(process.env.PORT) : 8080,
16+
proxy: {
17+
"/api": {
18+
target: process.env.CODER_HOST || "http://localhost:3000",
19+
ws: true,
20+
secure: process.env.NODE_ENV === "production",
21+
},
22+
},
23+
},
24+
resolve: {
25+
alias: {
26+
api: path.resolve(__dirname, "./src/api"),
27+
components: path.resolve(__dirname, "./src/components"),
28+
hooks: path.resolve(__dirname, "./src/hooks"),
29+
i18n: path.resolve(__dirname, "./src/i18n"),
30+
pages: path.resolve(__dirname, "./src/pages"),
31+
testHelpers: path.resolve(__dirname, "./src/testHelpers"),
32+
theme: path.resolve(__dirname, "./src/theme"),
33+
util: path.resolve(__dirname, "./src/util"),
34+
xServices: path.resolve(__dirname, "./src/xServices"),
35+
},
36+
},
37+
})

0 commit comments

Comments
 (0)