Merge pull request #17 from ajesuscode/dev

Dockerfile for local development
ajesuscode · Apr 1, 2024 · f9b3751 · f9b3751
2 parents 7d7a327 + 91970ff
commit f9b3751
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 77 deletions.
diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -0,0 +1,20 @@
+# Use the official Node.js image as the base
+FROM node:18-alpine
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock) to the working directory
+COPY package*.json ./
+
+# Install dependencies (including dev dependencies)
+RUN npm install
+
+# Copy the entire project to the working directory
+COPY . .
+
+# Expose the port your app will run on
+EXPOSE 3000
+
+# Set the command to start your Next.js app in development mode
+CMD ["npm", "run", "dev"]
diff --git a/README.md b/README.md
@@ -1,3 +1,10 @@
 # Surf Pintxos
 
 ### Open source Surf forecast for all Pays Basque spots
+
+### Running localy from Docker
+
+1. Clone repository to your machine
+2. Build the development Docker image using `docker build -f Dockerfile.dev -t my-nextjs-app-dev .`
+3. Run the development container with the volume mount: `docker run -p 3000:3000 -v $(pwd):/app my-nextjs-app-dev`
+4. The container will now have access to the codebase on the host machine, and any changes made to the codebase will be reflected in the running Next.js app inside the container.
diff --git a/src/app/(surfspots)/layout.tsx b/src/app/(surfspots)/layout.tsx
@@ -10,56 +10,56 @@ import { getTidesData, getCurrentTide } from "../utils/surfUtils";
 import CurrentTide from "../components/atom/CurrentTide";
 
 export default async function FavoriteSpotsLayout({
-    children,
+  children,
 }: {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }) {
-    const supabase = createServerComponentClient<Database>({ cookies });
-    const {
-        data: { user },
-    } = await supabase.auth.getUser();
-    const tide = await getTidesData();
-    let currentTide: { tide: string; time: string } | null =
-        { tide: "", time: "" } || null;
-    if (tide) {
-        currentTide = getCurrentTide(tide);
-    }
+  const supabase = createServerComponentClient<Database>({ cookies });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  const tide = await getTidesData();
+  let currentTide: { tide: string; time: string } | null =
+    { tide: "", time: "" } || null;
+  if (tide) {
+    currentTide = getCurrentTide(tide);
+  }
 
-    return (
-        <main className="flex flex-col p-4 pt-16 xl:p-20 h-full">
-            <div className="flex flex-row justify-between gap-4 items-center sticky top-14 bg-primary py-4 z-20 w-full">
-                <div className="flex flex-col md:flex-row gap-4 justify-between items-center w-full">
-                    <div className="flex flex-row justify-start items-center gap-4 w-full">
-                        {user && (
-                            <Link href="/favorite">
-                                <div
-                                    className={`font-body text-base lg:text-xl font-bold 
+  return (
+    <main className="flex flex-col p-4 pt-16 xl:p-20 h-full">
+      <div className="flex flex-row justify-between gap-4 items-center sticky top-14 bg-primary py-4 z-20 w-full">
+        <div className="flex flex-col md:flex-row gap-4 justify-between items-center w-full">
+          <div className="flex flex-row justify-start items-center gap-4 w-full">
+            {user && (
+              <Link href="/favorite">
+                <div
+                  className={`font-body text-base lg:text-xl font-bold 
                                     text-light/50
                                     
                             `}
-                                >
-                                    Favorite
-                                </div>
-                            </Link>
-                        )}
-                        <Link href="/spots">
-                            <div
-                                className={`font-body text-base lg:text-xl font-bold 
+                >
+                  Favorite
+                </div>
+              </Link>
+            )}
+            <Link href="/spots">
+              <div
+                className={`font-body text-base lg:text-xl font-bold 
                                     text-light/50
                                     
                             `}
-                            >
-                                All Pintxos
-                            </div>
-                        </Link>
-                    </div>
-                    <div className="flex flex-row gap-4 justify-end items-center">
-                        <SearchPintxos />
-                        <CurrentTide currentTide={currentTide} />
-                    </div>
-                </div>
-            </div>
-            {children}
-        </main>
-    );
+              >
+                All Pintxos
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-row gap-4 justify-end items-center">
+            <SearchPintxos />
+            <CurrentTide currentTide={currentTide} />
+          </div>
+        </div>
+      </div>
+      {children}
+    </main>
+  );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,38 +7,38 @@ import { Database } from "./lib/database.types";
 import pintxos_lg from "./components/pintxo_lg_logo.png";
 import { redirect } from "next/navigation";
 export default async function Home() {
-    const supabase = createServerComponentClient<Database>({ cookies });
-    const {
-        data: { user },
-    } = await supabase.auth.getUser();
-    if (user) {
-        redirect("/favorite");
-    }
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-center gap-4 p-2">
-            <Image
-                src={pintxos_lg}
-                width={150}
-                alt="surf_pintxos_logo"
-                quality={100}
-            />
-            <h1 className="text-4xl xl:text-6xl text-light font-display">
-                Surf Pintxos
-            </h1>
-            <p className="text-md lg:text-lg text-light font-body font-light mb-8  mx-auto ">
-                Surf forecast for all Pays Basque spots
-            </p>
-            <Link href="/spots">
-                <button className="w-72 p-4 rounded-md bg-secondary text-primary hover:bg-light hover:text-dark font-body">
-                    Check Pintxos
-                </button>
-            </Link>
-            <span className="text-light font-body">or</span>
-            <Link href="/info">
-                <button className="w-72 p-4 rounded-md border border-light text-secondary hover:bg-dark hover:text-light font-body">
-                    Pintxos Guide
-                </button>
-            </Link>
-        </main>
-    );
+  const supabase = createServerComponentClient<Database>({ cookies });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (user) {
+    redirect("/favorite");
+  }
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-4 p-2">
+      <Image
+        src={pintxos_lg}
+        width={150}
+        alt="surf_pintxos_logo"
+        quality={100}
+      />
+      <h1 className="text-4xl xl:text-6xl text-light font-display">
+        Surf Pintxos
+      </h1>
+      <p className="text-md lg:text-lg text-light font-body font-light mb-8  mx-auto ">
+        Surf forecast for all Pays Basque spots
+      </p>
+      <Link href="/spots">
+        <button className="w-72 p-4 rounded-md bg-secondary text-primary hover:bg-light hover:text-dark font-body">
+          Check Pintxos
+        </button>
+      </Link>
+      <span className="text-light font-body">or</span>
+      <Link href="/info">
+        <button className="w-72 p-4 rounded-md border border-light text-secondary hover:bg-dark hover:text-light font-body">
+          Pintxos Guide
+        </button>
+      </Link>
+    </main>
+  );
 }