coder · BrunoQuaresma · Sep 23, 2022 · Sep 22, 2022 · Sep 22, 2022 · Sep 22, 2022
diff --git 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 || kill -INT -$$ &
+	CODER_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=false yarn --cwd=./site dev:vite || kill -INT -$$ &
 
 	log
 	log "===================================================================="

diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<!--
+    ▄█▀    ▀█▄
+     ▄▄ ▀▀▀  █▌   ██▀▀█▄          ▐█
+ ▄▄██▀▀█▄▄▄  ██  ██      █▀▀█ ▐█▀▀██ ▄█▀▀█ █▀▀
+█▌   ▄▌   ▐█ █▌  ▀█▄▄▄█▌ █  █ ▐█  ██ ██▀▀  █
+     ██████▀▄█    ▀▀▀▀   ▀▀▀▀  ▀▀▀▀▀  ▀▀▀▀ ▀
+  -->
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#17172E" />
+  <meta name="application-name" content="Coder2" />
+  <meta property="og:type" content="website" />
+  <meta property="csp-nonce" content="{{ .CSP.Nonce }}" />
+  <meta property="csrf-token" content="{{ .CSRF.Token }}" />
+  <meta
+    id="api-response"
+    data-statuscode="{{ .APIResponse.StatusCode }}"
+    data-message="{{ .APIResponse.Message }}"
+  />
+  <!-- We need to set data-react-helmet to be able to override it in the workspace page -->
+  <link
+    rel="alternate icon"
+    type="image/png"
+    href="/favicons/favicon.png"
+    data-react-helmet="true"
+  />
+  <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" data-react-helmet="true" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/Main.tsx"></script>
+</body>
diff --git a/site/package.json b/site/package.json
@@ -10,6 +10,7 @@
     "check:all": "yarn format:check && yarn lint && yarn test",
     "chromatic": "chromatic",
     "dev": "webpack-dev-server --config=webpack.dev.ts",
+    "dev:vite": "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}'",
@@ -34,6 +35,7 @@
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
     "@testing-library/react-hooks": "8.0.1",
+    "@vitejs/plugin-react": "2.1.0",
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.0.1",
     "axios": "0.26.1",
@@ -63,6 +65,7 @@
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.2",
     "uuid": "9.0.0",
+    "vite": "3.1.3",
     "xstate": "4.33.5",
     "xterm": "4.19.0",
     "xterm-addon-fit": "0.5.0",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -2,8 +2,14 @@ import { useSelector } from "@xstate/react"
 import { FeatureNames } from "api/types"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { RequirePermission } from "components/RequirePermission/RequirePermission"
+import IndexPage from "pages"
+import AuditPage from "pages/AuditPage/AuditPage"
+import LoginPage from "pages/LoginPage/LoginPage"
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
+import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
+import UsersPage from "pages/UsersPage/UsersPage"
+import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
 import { FC, lazy, Suspense, useContext } from "react"
 import { Route, Routes } from "react-router-dom"
 import { selectPermissions } from "xServices/auth/authSelectors"
@@ -12,28 +18,27 @@ import { XServiceContext } from "xServices/StateContext"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
-import { IndexPage } from "./pages"
-import { NotFoundPage } from "./pages/404Page/404Page"
-import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"
-import { HealthzPage } from "./pages/HealthzPage/HealthzPage"
-import { LoginPage } from "./pages/LoginPage/LoginPage"
-import { TemplatesPage } from "./pages/TemplatesPage/TemplatesPage"
-import { AccountPage } from "./pages/UserSettingsPage/AccountPage/AccountPage"
-import { SecurityPage } from "./pages/UserSettingsPage/SecurityPage/SecurityPage"
-import { SSHKeysPage } from "./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage"
-import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
-import { UsersPage } from "./pages/UsersPage/UsersPage"
-import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPage"
-import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
-import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
 
+// Lazy load pages
+// - Pages that are secondary, not in the main navigation or not usually accessed
+// - Pages that use heavy dependencies like charts or time libraries
+const NotFoundPage = lazy(() => import("./pages/404Page/404Page"))
+const CliAuthenticationPage = lazy(() => import("./pages/CliAuthPage/CliAuthPage"))
+const HealthzPage = lazy(() => import("./pages/HealthzPage/HealthzPage"))
+const AccountPage = lazy(() => import("./pages/UserSettingsPage/AccountPage/AccountPage"))
+const SecurityPage = lazy(() => import("./pages/UserSettingsPage/SecurityPage/SecurityPage"))
+const SSHKeysPage = lazy(() => import("./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage"))
+const CreateUserPage = lazy(() => import("./pages/UsersPage/CreateUserPage/CreateUserPage"))
+const WorkspaceBuildPage = lazy(() => import("./pages/WorkspaceBuildPage/WorkspaceBuildPage"))
+const WorkspacePage = lazy(() => import("./pages/WorkspacePage/WorkspacePage"))
+const WorkspaceSchedulePage = lazy(
+  () => import("./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"),
+)
 const WorkspaceAppErrorPage = lazy(
   () => import("./pages/WorkspaceAppErrorPage/WorkspaceAppErrorPage"),
 )
 const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
-const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
 const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
-const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
 const TemplatePage = lazy(() => import("./pages/TemplatePage/TemplatePage"))
 
 export const AppRouter: FC = () => {
@@ -133,9 +138,6 @@ export const AppRouter: FC = () => {
           />
         </Route>
 
-        {/* REMARK: Route under construction
-        Eventually, we should gate this page
-        with permissions and licensing */}
         <Route path="/audit">
           <Route
             index

diff --git a/site/src/Main.tsx b/site/src/Main.tsx
@@ -1,21 +1,7 @@
-import { inspect } from "@xstate/inspect"
 import { createRoot } from "react-dom/client"
-import { Interpreter } from "xstate"
 import { App } from "./app"
-
 import "./i18n"
 
-// if this is a development build and the developer wants to inspect
-if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
-  // configure the XState inspector to open in a new tab
-  inspect({
-    url: "https://stately.ai/viz?inspect",
-    iframe: false,
-  })
-  // configure all XServices to use the inspector
-  Interpreter.defaultOptions.devTools = true
-}
-
 // This is the entry point for the app - where everything start.
 // In the future, we'll likely bring in more bootstrapping logic -
 // like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32

diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
@@ -30,3 +30,5 @@ const useStyles = makeStyles((theme) => ({
     borderRight: theme.palette.divider,
   },
 }))
+
+export default NotFoundPage
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
@@ -29,3 +29,5 @@ export const CliAuthenticationPage: React.FC<React.PropsWithChildren<unknown>> =
     </>
   )
 }
+
+export default CliAuthenticationPage
diff --git a/site/src/pages/HealthzPage/HealthzPage.tsx b/site/src/pages/HealthzPage/HealthzPage.tsx
@@ -6,3 +6,5 @@ import { FC } from "react"
  * accessible by humans and services.
  */
 export const HealthzPage: FC = () => <div>ok</div>
+
+export default HealthzPage
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -59,3 +59,5 @@ export const LoginPage: React.FC = () => {
     )
   }
 }
+
+export default LoginPage
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -27,3 +27,5 @@ export const TemplatesPage: React.FC = () => {
     </>
   )
 }
+
+export default TemplatesPage
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -38,3 +38,5 @@ export const AccountPage: React.FC = () => {
     </Section>
   )
 }
+
+export default AccountPage
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -69,3 +69,5 @@ export const SSHKeysPage: React.FC<React.PropsWithChildren<unknown>> = () => {
     </>
   )
 }
+
+export default SSHKeysPage
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -33,3 +33,5 @@ export const SecurityPage: React.FC = () => {
     </Section>
   )
 }
+
+export default SecurityPage
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
@@ -49,3 +49,5 @@ export const CreateUserPage: React.FC = () => {
     </Margins>
   )
 }
+
+export default CreateUserPage
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -195,3 +195,5 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     </>
   )
 }
+
+export default UsersPage
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
@@ -25,3 +25,5 @@ export const WorkspaceBuildPage: FC = () => {
     </>
   )
 }
+
+export default WorkspaceBuildPage
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -154,3 +154,5 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
   },
 }))
+
+export default WorkspacePage
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -101,3 +101,5 @@ export const WorkspaceSchedulePage: React.FC = () => {
   console.error("WorkspaceSchedulePage: unknown state :: ", scheduleState)
   return <Navigate to="/" />
 }
+
+export default WorkspaceSchedulePage
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
@@ -4,3 +4,5 @@ import { Navigate } from "react-router-dom"
 export const IndexPage: FC = () => {
   return <Navigate to="/workspaces" replace />
 }
+
+export default IndexPage
diff --git a/site/tsconfig.json b/site/tsconfig.json
@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2018",
+    "target": "es2020",
     "baseUrl": "./src"
   },
   "include": ["**/*.ts", "**/*.tsx"],

diff --git a/site/vite.config.ts b/site/vite.config.ts
@@ -0,0 +1,37 @@
+import react from "@vitejs/plugin-react"
+import path from "path"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [react()],
+  publicDir: path.resolve(__dirname, "./static"),
+  build: {
+    outDir: path.resolve(__dirname, "./out"),
+  },
+  define: {
+    "process.env": process.env,
+  },
+  server: {
+    port: process.env.PORT ? Number(process.env.PORT) : 8080,
+    proxy: {
+      "/api": {
+        target: process.env.CODER_HOST || "http://localhost:3000",
+        ws: true,
+        secure: process.env.NODE_ENV === "production",
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      api: path.resolve(__dirname, "./src/api"),
+      components: path.resolve(__dirname, "./src/components"),
+      hooks: path.resolve(__dirname, "./src/hooks"),
+      i18n: path.resolve(__dirname, "./src/i18n"),
+      pages: path.resolve(__dirname, "./src/pages"),
+      testHelpers: path.resolve(__dirname, "./src/testHelpers"),
+      theme: path.resolve(__dirname, "./src/theme"),
+      util: path.resolve(__dirname, "./src/util"),
+      xServices: path.resolve(__dirname, "./src/xServices"),
+    },
+  },
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,3 +30,5 @@ const useStyles = makeStyles((theme) => ({ @@
         borderRight: theme.palette.divider,
       },
     }))
+    export default NotFoundPage