static files

apps/web/package.json

@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "bootstrap": "^5.2.3",
     "next": "^13.1.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
     "ui": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
-    "eslint": "7.32.0",
-    "eslint-config-custom": "*",
-    "tsconfig": "*",
     "@types/node": "^17.0.12",
     "@types/react": "^18.0.22",
     "@types/react-dom": "^18.0.7",
+    "eslint": "7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
     "typescript": "^4.5.3"
   }
 }

apps/web/pages/_app.js

@@ -0,0 +1,5 @@
+// add bootstrap css
+import "bootstrap/dist/css/bootstrap.css"; // own css files here
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

apps/web/pages/index.tsx

@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
 import * as React from "react";
+import { Col, Container, Navbar, Row } from "react-bootstrap";
 
 const DynamicMap = dynamic(() => import("../components/GalaxyMap"), {
   ssr: false,
@@ -8,8 +9,16 @@ const DynamicMap = dynamic(() => import("../components/GalaxyMap"), {
 export default function Web() {
   return (
     <div>
-      <h1>Web</h1>
-      <DynamicMap />
+      <Navbar>
+        <Container>
+          <Navbar.Brand>Twilight Assembly</Navbar.Brand>
+        </Container>
+      </Navbar>
+      <Container fluid>
+        <Row>
+          <DynamicMap />
+        </Row>
+      </Container>
     </div>
   );
 }

apps/web/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js"],
   "exclude": ["node_modules"]
 }