Merge pull request #3 from Robert-M-Lucas/setup-dev

(Hopefully) finished GitHub/Firebase setup
Robert-M-Lucas · Mar 22, 2024 · 0ef44f0 · 0ef44f0
2 parents 5876c97 + a88c0a1
commit 0ef44f0
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 152 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.firebase
diff --git a/README.md b/README.md
@@ -1 +1,52 @@
-# Budget-19
+# Budget-19
+
+## Starting Development
+
+When making changes, create a branch with the name `dev-[Jira issue name]`
+e.g. `dev-SCRUM-7` and work on that. See [deployment](#deployment) for
+instructions on how to deploy your changes.
+
+## Files
+
+Initial page setup (e.g. title): `/index.html`
+
+Router config ([docs](https://reactrouter.com/en/main)): `/src/router.tsx`
+
+## Commands
+
+Serve webpage locally: `npm run dev`
+
+### Firebase
+
+Install Firebase tools: `npm install -g firebase-tools`
+
+Login to Firebase: `firebase login`
+
+Configure Firebase settings: `firebase init`
+> :warning: Overwrites current settings!
+
+Configure Firebase emulator(s): `firebase init emulators`
+
+Start Firebase emulator(s): `firebase emulators:start`
+
+## Deployment
+
+> :warning: Do not use `firebase deploy` to deploy! This will circumvent GitHub!
+
+### Test Deployment
+
+Creating a test deployment to Firebase:
+```
+npm run build
+firebase hosting:channel:deploy [Test Deployment Name]
+```
+
+### Production Deployment
+
+Making a [pull request](https://github.com/Robert-M-Lucas/budget-19/compare)
+will automatically create a test deployment to Firebase (i.e. not
+overwrite the production app). You should see a message below your new pull
+request notifying you that your changes are being deployed. Click on
+the link shown when this is complete to view your changes. The pull
+request can them be merged into the `master` branch from which it'll
+be automatically deployed to https://budget-19.web.app/.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Budget-19</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "firebase": "^10.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "sass": "^1.72.0"
   },
   "devDependencies": {

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/ExampleComponent.tsx b/src/components/ExampleComponent.tsx
@@ -0,0 +1,5 @@
+function ExampleComponent() {
+    return <p>Example</p>
+}
+
+export default ExampleComponent;
diff --git a/src/index.css b/src/index.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import './utils/firebase.ts'
+import {RouterProvider} from "react-router-dom";
+import {router} from "./router.tsx";
+
+// ! Potentially temporary - UI Styling tbd
+import 'bootstrap/dist/css/bootstrap.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <React.StrictMode>
+        <RouterProvider router={router}/>
+    </React.StrictMode>,
 )
diff --git a/src/pages/index/App.tsx b/src/pages/index/App.tsx
@@ -0,0 +1,16 @@
+function App() {
+  return (
+      <>
+          <div style={{width: "100vw", height: "100vh"}} className="d-flex">
+              <div className="d-flex justify-content-center align-items-center" style={{width: "100vw"}}>
+                  <div className="text-center">
+                      <h1>Budget-19</h1>
+                      <p><a href="/test">Routing Test</a></p>
+                  </div>
+              </div>
+          </div>
+      </>
+  )
+}
+
+export default App
diff --git a/src/router.tsx b/src/router.tsx
@@ -0,0 +1,20 @@
+import {createBrowserRouter} from "react-router-dom";
+import App from "./pages/index/App.tsx";
+import ExampleComponent from "./components/ExampleComponent.tsx";
+
+// ? Routing - see https://reactrouter.com/en/main
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <App/>,
+        errorElement: <h1>404</h1>
+    },
+    {
+        path: "/test",
+        element: <>
+            <h1>Test Secondary Page</h1>
+            <ExampleComponent/>
+        </>,
+    },
+]);
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+
+// Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+    apiKey: "AIzaSyD70wqk2KYojBO_fAEiWEhDbiz4lo8vw2s",
+    authDomain: "budget-19.firebaseapp.com",
+    projectId: "budget-19",
+    storageBucket: "budget-19.appspot.com",
+    messagingSenderId: "208067569050",
+    appId: "1:208067569050:web:eca0ff615592577d6fc623",
+    measurementId: "G-QF0Z0VGCJ0"
+};
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+export const analytics = getAnalytics(app);
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    .firebase