Merge pull request #80 from allister-grange/feature/docker

Feature/docker

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.env.local.example

@@ -12,4 +12,6 @@ OUTLOOK_CLIENT_ID=
 OUTLOOK_CLIENT_SECRET=
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
+DATABASE_URL=
+DATABASE_URL_UNPOOLED=
 ANALYTICS_ENABLED=

.github/workflows/pipeline.yml

@@ -0,0 +1,53 @@
+name: Docker Build & Publish
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    name: Build Docker
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME}}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN}}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          platforms: linux/arm64
+          build-args: |
+            STRAVA_CLIENT_ID=${{ secrets.STRAVA_CLIENT_ID }}
+            STRAVA_SECRET=${{ secrets.STRAVA_SECRET }}
+            WEATHERAPI_TOKEN=${{ secrets.WEATHERAPI_TOKEN }}
+            SPOTIFY_CLIENT_ID=${{ secrets.SPOTIFY_CLIENT_ID }}
+            SPOTIFY_CLIENT_SECRET=${{ secrets.SPOTIFY_CLIENT_SECRET }}
+            FINNHUB_SECRET=${{ secrets.FINNHUB_SECRET }}
+            HOSTED_URL=${{ secrets.HOSTED_URL }}
+            TWITTER_CLIENT_ID=${{ secrets.TWITTER_CLIENT_ID }}
+            TWITTER_CLIENT_SECRET=${{ secrets.TWITTER_CLIENT_SECRET }}
+            TWITTER_CODE_CHALLENGE_KEY=${{ secrets.TWITTER_CODE_CHALLENGE_KEY }}
+            TOKEN_ENCRYPT_KEY=${{ secrets.TOKEN_ENCRYPT_KEY }}
+            OUTLOOK_CLIENT_ID=${{ secrets.OUTLOOK_CLIENT_ID }}
+            OUTLOOK_CLIENT_SECRET=${{ secrets.OUTLOOK_CLIENT_SECRET }}
+            GOOGLE_CLIENT_ID=${{ secrets.GOOGLE_CLIENT_ID }}
+            GOOGLE_CLIENT_SECRET=${{ secrets.GOOGLE_CLIENT_SECRET }}
+            ANALYTICS_ENABLED=${{ secrets.ANALYTICS_ENABLED }}
+            DATABASE_URL=${{ secrets.DATABASE_URL }}
+            DATABASE_URL_UNPOOLED=${{ secrets.DATABASE_URL_UNPOOLED }}
+          tags: |
+            ${{ secrets.DOCKER_HUB_USERNAME}}/startertab:${{ github.sha }}
+            ${{ secrets.DOCKER_HUB_USERNAME}}/startertab:latest

Dockerfile

@@ -0,0 +1,125 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npx prisma generate
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+
+ARG HOSTED_URL
+ENV HOSTED_URL=${HOSTED_URL}
+
+ARG STRAVA_CLIENT_ID
+ENV STRAVA_CLIENT_ID=${STRAVA_CLIENT_ID}
+
+ARG STRAVA_SECRET
+ENV STRAVA_SECRET=${STRAVA_SECRET}
+
+ARG WEATHERAPI_TOKEN
+ENV WEATHERAPI_TOKEN=${WEATHERAPI_TOKEN}
+
+ARG SPOTIFY_CLIENT_ID
+ENV SPOTIFY_CLIENT_ID=${SPOTIFY_CLIENT_ID}
+
+ARG SPOTIFY_CLIENT_SECRET
+ENV SPOTIFY_CLIENT_SECRET=${SPOTIFY_CLIENT_SECRET}
+
+ARG FINNHUB_SECRET
+ENV FINNHUB_SECRET=${FINNHUB_SECRET}
+
+ARG TWITTER_CLIENT_ID
+ENV TWITTER_CLIENT_ID=${TWITTER_CLIENT_ID}
+
+ARG TWITTER_CLIENT_SECRET
+ENV TWITTER_CLIENT_SECRET=${TWITTER_CLIENT_SECRET}
+
+ARG TWITTER_CODE_CHALLENGE_KEY
+ENV TWITTER_CODE_CHALLENGE_KEY=${TWITTER_CODE_CHALLENGE_KEY}
+
+ARG TOKEN_ENCRYPT_KEY
+ENV TOKEN_ENCRYPT_KEY=${TOKEN_ENCRYPT_KEY}
+
+ARG OUTLOOK_CLIENT_ID
+ENV OUTLOOK_CLIENT_ID=${OUTLOOK_CLIENT_ID}
+
+ARG OUTLOOK_CLIENT_SECRET
+ENV OUTLOOK_CLIENT_SECRET=${OUTLOOK_CLIENT_SECRET}
+
+ARG GOOGLE_CLIENT_ID
+ENV GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+
+ARG GOOGLE_CLIENT_SECRET
+ENV GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
+
+ARG DATABASE_URL
+ENV DATABASE_URL=${DATABASE_URL}
+
+ARG DATABASE_URL_UNPOOLED
+ENV DATABASE_URL_UNPOOLED=${DATABASE_URL_UNPOOLED}
+
+ARG ANALYTICS_ENABLED
+ENV ANALYTICS_ENABLED=${ANALYTICS_ENABLED}
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

README.md

@@ -64,6 +64,8 @@ OUTLOOK_CLIENT_ID=<YOUR_SECRET_HERE>
 OUTLOOK_CLIENT_SECRET=<YOUR_SECRET_HERE>
 GOOGLE_CLIENT_ID=<YOUR_SECRET_HERE>
 GOOGLE_CLIENT_SECRET=<YOUR_SECRET_HERE>
+DATABASE_URL=<YOUR_SECRET_HERE>
+DATABASE_URL_UNPOOLED=<YOUR_SECRET_HERE>
 ANALYTICS_ENABLED=<true or false>
 ```
 

next.config.js

@@ -6,6 +6,7 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 
 module.exports = withBundleAnalyzer({
   reactStrictMode: true,
+  output: "standalone",
   i18n: {
     locales: ["en"],
     defaultLocale: "en",

src/components/suggestions/SuggestionCard.tsx

@@ -38,7 +38,7 @@ export const SuggestionCard: React.FC<SuggestionCardProps> = ({
     }
     try {
       // doesn't matter too much if their vote disappears, c'est la vie
-      setVotes((votes) => votes + 1);
+      setVotes((votes: number) => votes + 1);
       const voteRes = await fetch(
         `/api/suggestions/vote?suggestionId=${suggestion.id}`,
         {
@@ -49,7 +49,7 @@ export const SuggestionCard: React.FC<SuggestionCardProps> = ({
         throw new Error("Failed to vote");
       }
     } catch (err) {
-      setVotes((votes) => votes - 1);
+      setVotes((votes: number) => votes - 1);
       setLiked(false);
       console.error(err);
     }
@@ -93,7 +93,7 @@ export const SuggestionCard: React.FC<SuggestionCardProps> = ({
           {suggestion.author}
         </Text>
         <Box>
-          {tags.map((tag, index) => (
+          {tags.map((tag: string, index: number) => (
             <Badge
               key={index}
               colorScheme={getRandomColor()}

src/components/themes/MarketplaceThemeCard.tsx

@@ -89,7 +89,7 @@ export const MarketPlaceThemeCard: React.FC<MarketPlaceThemeCardProps> = ({
     }
     try {
       // doesn't matter too much if their vote disappears, c'est la vie
-      setVotes((votes) => votes + 1);
+      setVotes((votes: number) => votes + 1);
       const voteRes = await fetch(`/api/themes/item/vote?themeId=${theme.id}`, {
         method: "POST",
       });
@@ -98,7 +98,7 @@ export const MarketPlaceThemeCard: React.FC<MarketPlaceThemeCardProps> = ({
         throw new Error("Failed to vote");
       }
     } catch (err) {
-      setVotes((votes) => votes - 1);
+      setVotes((votes: number) => votes - 1);
       setLiked(false);
       console.error(err);
     }
@@ -179,7 +179,7 @@ export const MarketPlaceThemeCard: React.FC<MarketPlaceThemeCardProps> = ({
             </Badge>
           </Text>
           <Flex mt="3">
-            {theme.tags.split(",").map((tag, idx) => (
+            {theme.tags.split(",").map((tag: string, idx: number) => (
               <Badge
                 key={idx + tag}
                 filter={themeSettings.globalSettings.textColor}

src/helpers/redirectHelpers.ts

@@ -1,13 +1,3 @@
-export const getClientUrl = (): string => {
-  return process.env.HOSTED_URL
-    ? `https://${process.env.HOSTED_URL}`
-    : "http://localhost:3000/";
-};
-
-export const getApiUrl = (): string => {
-  return process.env.VERCEL_URL ? process.env.VERCEL_URL : process.env.API_URL!;
-};
-
 export const getSpotifyRedirectUrl = (): string => {
   return process.env.HOSTED_URL
     ? `https://${process.env.HOSTED_URL}/api/spotify/auth/authorize`