Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dockerfile for local development #17

Merged
merged 3 commits into from
Apr 1, 2024
Merged

Dockerfile for local development #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58d1cd8
Update TODOs
actions-user Oct 25, 2023
bfae599
added dockerile for local development
ajesuscode Apr 1, 2024
91970ff
Merge branch 'dev' of https://github.com/ajesuscode/surf_pintxos into…
ajesuscode Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions Dockerfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"]
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
86 changes: 43 additions & 43 deletions src/app/(surfspots)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
68 changes: 34 additions & 34 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Loading