refactor: convert sources to use React and Next.js (#1)

Reworked the project into a Next.js project

- Files and styles are ported as they were previously created
- Firebase support ported, needs to be tested

---------

Co-authored-by: Riccardo Montagnin <[email protected]>

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,13 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 # IDEs
 .idea/
 .vscode/
 
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 firebase-debug.log*
 firebase-debug.*.log*
 

README.md

@@ -20,5 +20,5 @@ npm install -g firebase-tools
 To test this website on your local machine, just run the following command:
 
 ```
-firebase emulators:start --only hosting
+yarn serve
 ```

firebase.json

@@ -8,6 +8,10 @@
       "**/node_modules/**"
     ],
     "rewrites": [
+      {
+        "source": "**",
+        "function": "nextjsFunc"
+      },
       {
         "source": "/events/**",
         "dynamicLinks": true
@@ -17,5 +21,13 @@
         "dynamicLinks": true
       }
     ]
+  },
+  "functions": {
+    "runtime": "nodejs16",
+    "source": ".",
+    "predeploy": [
+      "npm --prefix \"$PROJECT_DIR\" install",
+      "npm --prefix \"$PROJECT_DIR\" run build"
+    ]
   }
 }

firebaseFunctions.js

@@ -0,0 +1,18 @@
+const { join } = require('path')
+const { https } = require('firebase-functions')
+const next = require('next')
+
+const nextjsDistDir = join('src', require('./next.config.js').distDir)
+console.log(nextjsDistDir);
+
+const nextjsServer = next({
+  dev: false,
+  conf: {
+    distDir: nextjsDistDir,
+  },
+})
+const nextjsHandle = nextjsServer.getRequestHandler()
+
+exports.nextjsFunc = https.onRequest((req, res) => {
+  return nextjsServer.prepare().then(() => nextjsHandle(req, res))
+})

next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  distDir: ".next",
+  reactStrictMode: true,
+  rewrites: async () => [
+    {
+      source: "/public/creator.html",
+      destination: "/api/creator.js",
+    },
+  ],
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "bondscape-website",
+  "version": "0.1.0",
+  "private": true,
+  "main": "firebaseFunctions.js",
+  "type": "commonjs",
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "serve": "yarn build && firebase emulators:start --only functions,hosting",
+    "shell": "yarn build && firebase functions:shell",
+    "deploy": "firebase deploy --only functions,hosting",
+    "logs": "firebase functions:log"
+  },
+  "dependencies": {
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "10.4.15",
+    "cross-env": "^7.0.3",
+    "eslint": "8.49.0",
+    "eslint-config-next": "13.4.19",
+    "firebase-admin": "^11.10.1",
+    "firebase-functions": "^4.4.1",
+    "next": "13.4.19",
+    "next-seo": "^6.1.0",
+    "path": "^0.12.7",
+    "postcss": "8.4.29",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-responsive": "^9.0.2",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2",
+    "use-places-autocomplete": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/google.maps": "^3.54.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}