server WIP

package.json

@@ -32,6 +32,7 @@
     "country-emoji": "^1.5.6",
     "isbot": "^3.6.6",
     "joi": "^17.8.1",
+    "netlify-cli": "^13.0.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -42,9 +43,8 @@
     "typescript": "^4.9.5"
   },
   "scripts": {
-    "build": "remix build",
-    "dev": "NODE_ENV=development remix dev",
-    "start": "remix start"
+    "build": "netlify build",
+    "dev": "NODE_ENV=development remix dev"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

remix.config.js

@@ -1,7 +1,7 @@
 const { config } = require("@netlify/remix-edge-adapter");
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  ...config,
+  ...(process.env.NETLIFY || process.env.NETLIFY_LOCAL ? config : {}),
   appDirectory: "src",
   future: {
     unstable_postcss: true,

src/entry.server.tsx

@@ -32,8 +32,9 @@ export default async function handleRequest(
 ) {
   // check if we have a cached response in memory
   const cachedResponse = cache.get(request.url);
-  if (cachedResponse) {
-    console.log('Serving from cache', request.url);
+  const isBuildUrl = request.url.includes('/build/');
+  if (cachedResponse && !isBuildUrl) {
+    // console.log('Serving from cache', request.url);
     // if we have a cached response, check if it's less than 5 seconds old
     const now = new Date();
     const diff = now.getTime() - cachedResponse.date.getTime();
@@ -63,6 +64,7 @@ export default async function handleRequest(
   // tee the stream so we can cache it and send it to the client
   const [toReponse, toCache] = body.tee();
 
+  if (!isBuildUrl) {
     streamToText(toCache).then(html => {
       console.log('Caching', request.url);
       cache.set(request.url, {
@@ -70,6 +72,7 @@ export default async function handleRequest(
         date: new Date(),
       });
     });
+  }
 
   const headers = new Headers(responseHeaders);
   headers.set("Content-Type", "text/html");

src/styles.css

@@ -97,6 +97,10 @@ body::-webkit-scrollbar-thumb {
   grid-template-rows: 1fr auto auto;
 }
 
+.PersonWrapper:nth-child(5) {
+  background: green;
+}
+
 .PersonInner {
   padding: 2rem;