From a25e58f81882f4b4b001de74969480b7a0576ab0 Mon Sep 17 00:00:00 2001 From: Manolo Battista Date: Thu, 5 Sep 2024 12:09:10 +0200 Subject: [PATCH 1/2] feat: runtime env variables with next-runtime-env --- .env.development | 8 +- .eslintrc.json | 3 +- .gitignore | 3 + Dockerfile | 28 +- arke/getClient.ts | 13 +- .../AppFormConfigProvider.tsx | 2 +- entrypoint.sh | 18 + next.config.js | 6 + package.json | 1 + pages/_app.tsx | 2 +- pages/_document.tsx | 3 +- pages/api/auth/[...nextauth].ts | 7 +- pages/index.tsx | 3 +- pnpm-lock.yaml | 7071 +++++++++-------- utils/auth.ts | 3 +- utils/system.ts | 3 +- 16 files changed, 4026 insertions(+), 3148 deletions(-) create mode 100644 entrypoint.sh diff --git a/.env.development b/.env.development index 868a666..43dc254 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,5 @@ -NEXT_PUBLIC_ARKE_SERVER_URL=http://0.0.0.0:4000 -NEXT_MULTIPROJECT=true -NEXTAUTH_URL=http://localhost:3100/api/auth -NEXTAUTH_SECRET=your_secret +NEXT_PUBLIC_ARKE_SERVER_URL="http://0.0.0.0:4000" NEXT_PUBLIC_ARKE_PROJECT="" +NEXT_PUBLIC_MULTIPROJECT="true" +NEXTAUTH_URL="http://localhost:3100/api/auth" +NEXTAUTH_SECRET="your_secret" diff --git a/.eslintrc.json b/.eslintrc.json index aea44ae..2fccc2c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,6 +2,7 @@ "plugins": ["prettier"], "extends": ["next/core-web-vitals", "plugin:prettier/recommended"], "rules": { - "react-hooks/exhaustive-deps": "off" + "react-hooks/exhaustive-deps": "off", + "@next/next/no-sync-scripts": "off" } } diff --git a/.gitignore b/.gitignore index c87c9b3..37c4843 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# Runtime env +/public/__ENV.js diff --git a/Dockerfile b/Dockerfile index 6b1a7f0..b689a2e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,10 +1,5 @@ FROM node:18-alpine AS base -ARG ARKE_SERVER_SSR_URL="http://host.docker.internal:4000" -ARG ARKE_SERVER_URL="http://0.0.0.0:4000" -ARG NEXTAUTH_URL="http://localhost:3100/api/auth" -ARG PROJECT_ID - # Install dependencies only when needed FROM base AS deps RUN apk add --no-cache libc6-compat @@ -27,17 +22,6 @@ WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . -# Build .env file -RUN echo NEXTAUTH_SECRET=\" | tr -d '\n' > .env.production \ - && openssl rand -base64 32 | tr -d '\n' >> .env.production \ - && echo \" >> .env.production \ - && echo NEXT_PUBLIC_ARKE_SERVER_URL= | tr -d '\n' >> .env.production \ - && echo $ARKE_SERVER_URL >> .env.production \ - && echo NEXT_PUBLIC_ARKE_SERVER_SSR_URL= | tr -d '\n' >> .env.production \ - && echo $ARKE_SERVER_SSR_URL >> .env.production \ - && echo NEXTAUTH_URL= | tr -d '\n' >> .env.production \ - && echo $NEXTAUTH_URL >> .env.production - RUN yarn build # Production image, copy all the files and run next @@ -50,14 +34,16 @@ RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public +COPY --from=builder /app/entrypoint.sh ./entrypoint.sh COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static -USER nextjs - -EXPOSE 3100 +# Create the __ENV.js file dynamically +RUN apk add --no-cache bash +RUN chmod +x entrypoint.sh -ENV PORT 3100 +EXPOSE 3000 +ENV PORT 3000 -CMD ["node", "server.js"] +ENTRYPOINT ["/app/entrypoint.sh"] diff --git a/arke/getClient.ts b/arke/getClient.ts index 944c7cc..1ea76f7 100644 --- a/arke/getClient.ts +++ b/arke/getClient.ts @@ -14,24 +14,17 @@ * limitations under the License. */ -import { Client, HTTPStatusCode, TToken } from "@arkejs/client"; +import { Client, TToken } from "@arkejs/client"; import { GetServerSidePropsContext } from "next"; import { getSession } from "next-auth/react"; import { getToken } from "next-auth/jwt"; import { getCookie } from "cookies-next"; import { getCookieName } from "@/utils/auth"; import { NextParsedUrlQuery } from "next/dist/server/request-meta"; -import { redirect } from "next/navigation"; +import { env } from "next-runtime-env"; const getServerUrl = () => { - if ( - typeof window == "undefined" && - process.env.NEXT_PUBLIC_ARKE_SERVER_SSR_URL - ) { - return process.env.NEXT_PUBLIC_ARKE_SERVER_SSR_URL; - } - - return process.env.NEXT_PUBLIC_ARKE_SERVER_URL; + return env("NEXT_PUBLIC_ARKE_SERVER_URL"); }; const getProjectId = (context?: { diff --git a/components/AppFormConfigProvider/AppFormConfigProvider.tsx b/components/AppFormConfigProvider/AppFormConfigProvider.tsx index 7d5340f..3acc3f4 100644 --- a/components/AppFormConfigProvider/AppFormConfigProvider.tsx +++ b/components/AppFormConfigProvider/AppFormConfigProvider.tsx @@ -110,7 +110,7 @@ export default function AppFormConfigProvider(props: { children: ReactNode }) { onChange={(value) => field.onChange(JSON.parse(value))} /> ), - dynamic: ({ field }) => ( + dynamic: ({ field }: any) => ( ./public/__ENV.js + +# Loop through all environment variables +for var in $(env | grep '^NEXT_PUBLIC_' | cut -d= -f1); do + # Extract the variable name and value + value=$(printenv "$var") + # Format and append to __ENV.js + echo " $var: \"${value}\"," >> ./public/__ENV.js +done + +# Close the JSON object in __ENV.js +echo "};" >> ./public/__ENV.js + +# Start the server +node server.js diff --git a/next.config.js b/next.config.js index a5d5e16..913cedb 100644 --- a/next.config.js +++ b/next.config.js @@ -14,6 +14,12 @@ * limitations under the License. */ +const { configureRuntimeEnv } = require("next-runtime-env/build/configure"); +const { makeEnvPublic } = require("next-runtime-env/build/make-env-public"); + +/* Runtime ENV variables */ +configureRuntimeEnv(); + /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, diff --git a/package.json b/package.json index c6d426d..027e076 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "cookies-next": "^2.1.1", "next": "13.2.4", "next-auth": "^4.22.1", + "next-runtime-env": "^1.7.4", "prismjs": "^1.29.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 670c7b5..b1199a9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -19,7 +19,7 @@ import "@/styles/prism.css"; import type { AppProps } from "next/app"; import { Inter } from "next/font/google"; import { SessionProvider } from "next-auth/react"; -import { NextPage } from "next"; +import { GetStaticProps, NextPage } from "next"; import AppFormConfigProvider from "@/components/AppFormConfigProvider/AppFormConfigProvider"; import dynamic from "next/dynamic"; import AppTableConfigProvider from "@/components/Table/AppTableConfigProvider"; diff --git a/pages/_document.tsx b/pages/_document.tsx index 9da6974..399ad78 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -14,13 +14,14 @@ * limitations under the License. */ -import { Html, Head, Main, NextScript } from "next/document"; +import { Html, Main, Head, NextScript } from "next/document"; export default function Document() { return ( +