fix: docker setup (#987)

* removing dependencies from .env

* dev: Passing the arguments from docker compose to DockerWeb in nextjs to define base environment variables

* dev: removed env from docker-compose and taking the env from shell

* dev: Updated docker file and used console in signin to test the env from docker

* dev: Docker setting env variables via shell

* removed env variables and args

* Update Dockerfile.web

* Update Dockerfile.web

* Update signin.tsx

* .

* .

* dev: Added BASE_URL from docker

* dev: Updated docker config

* dev: scripts for replacing variable during runtime

* dev: entrypoint script

* dev: update replace env script and update docker entrypoint command for frontend

* dev: update replace env script to not update process.env

* dev: update docker file to add missing variables as well

* fix: updated docker compose yml and web

* dev: create start script to run docker and update script for replacing variables

* dev: update setup script and env example script to create variables in the root of the project

* .

* dev: update docker compose hub

* dev: update docker compose hub command

* dev: update docker compose yml and env example

* dev: update docker compose hub

* dev: single docker

---------

Co-authored-by: Narayana <narayana.vadapalli1996@gmail.com>
Co-authored-by: gurusainath <gurusainath007@gmail.com>

apps/app/.env.example

@@ -1,12 +0,0 @@
-# Replace with your instance Public IP
-# NEXT_PUBLIC_API_BASE_URL = "http://localhost"
-NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
-NEXT_PUBLIC_GITHUB_APP_NAME=""
-NEXT_PUBLIC_GITHUB_ID=""
-NEXT_PUBLIC_SENTRY_DSN=""
-NEXT_PUBLIC_ENABLE_OAUTH=0
-NEXT_PUBLIC_ENABLE_SENTRY=0
-NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
-NEXT_PUBLIC_TRACK_EVENTS=0
-NEXT_PUBLIC_SLACK_CLIENT_ID=""

apps/app/Dockerfile.web

@@ -3,6 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 # Set working directory
 WORKDIR /app
+ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
 
 RUN yarn global add turbo
 COPY . .
@@ -12,10 +13,10 @@ RUN turbo prune --scope=app --docker
 # Add lockfile and package.json's of isolated subworkspace
 FROM node:18-alpine AS installer
 
-
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
 
 # First install the dependencies (as they change less often)
 COPY .gitignore .gitignore
@@ -26,9 +27,17 @@ RUN yarn install
 # Build the project
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+COPY replace-env-vars.sh /usr/local/bin/
+USER root
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
 
 RUN yarn turbo run build --filter=app
 
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_WEBAPP_URL}
+
 FROM node:18-alpine AS runner
 WORKDIR /app
 
@@ -43,8 +52,20 @@ COPY --from=installer /app/apps/app/package.json .
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone ./
-# COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone/node_modules ./apps/app/node_modules
-COPY --from=installer --chown=captain:plane /app/apps/app/.next/static ./apps/app/.next/static
+
+COPY --from=installer --chown=captain:plane /app/apps/app/.next ./apps/app/.next
+
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+USER root
+COPY replace-env-vars.sh /usr/local/bin/
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+RUN chmod +x /usr/local/bin/start.sh
+
+USER captain
 
 ENV NEXT_TELEMETRY_DISABLED 1
 

apps/app/next.config.js

@@ -1,6 +1,10 @@
+require("dotenv").config({ path: ".env" });
+
 const { withSentryConfig } = require("@sentry/nextjs");
 const path = require("path");
-const extraImageDomains = (process.env.NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS ?? "").split(",").filter((domain) => domain.length > 0);
+const extraImageDomains = (process.env.NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS ?? "")
+  .split(",")
+  .filter((domain) => domain.length > 0);
 
 const nextConfig = {
   reactStrictMode: false,

apps/app/package.json

@@ -23,6 +23,7 @@
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
     "cmdk": "^0.2.0",
+    "dotenv": "^16.0.3",
     "js-cookie": "^3.0.1",
     "lodash.debounce": "^4.0.8",
     "next": "12.3.2",

apps/app/pages/signin.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
 import Image from "next/image";
-
 // hooks
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";