feat: Env issue in web (#236)

implerhq · May 11, 2023 · 8524bb8 · 8524bb8
2 parents 860a779 + e40b7c9
commit 8524bb8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 21 deletions.
diff --git a/apps/web/libs/api.ts b/apps/web/libs/api.ts
@@ -1,3 +1,4 @@
+import getConfig from 'next/config';
 import { API_KEYS, VARIABLES } from '@config';
 
 interface Route {
@@ -77,6 +78,8 @@ function handleResponseStatusAndContentType(response: Response) {
   else throw new Error(`Unsupported response content-type: ${contentType}`);
 }
 
+const { publicRuntimeConfig } = getConfig();
+
 export async function commonApi<T>(
   key: keyof typeof API_KEYS,
   {
@@ -88,7 +91,7 @@ export async function commonApi<T>(
 ) {
   try {
     const route = routes[key];
-    const url = process.env.NEXT_PUBLIC_API_BASE_URL + route.url(parameters);
+    const url = publicRuntimeConfig.NEXT_PUBLIC_API_BASE_URL + route.url(parameters);
     const method = route.method;
 
     const response = await fetch(url, {

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -1,6 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  publicRuntimeConfig: {
+    NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
+    NEXT_PUBLIC_EMBED_URL: process.env.NEXT_PUBLIC_EMBED_URL,
+    NEXT_PUBLIC_AMPLITUDE_ID: process.env.NEXT_PUBLIC_AMPLITUDE_ID,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
-import { AppProps } from 'next/app';
+import getConfig from 'next/config';
+import App, { AppProps } from 'next/app';
 import { Poppins } from '@next/font/google';
 import { useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
@@ -12,8 +13,10 @@ import { ColorSchemeProvider, MantineProvider, ColorScheme } from '@mantine/core
 import { addOpacityToHex } from 'shared/utils';
 import { mantineConfig, colors } from '@config';
 
-if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_AMPLITUDE_ID) {
-  init(process.env.NEXT_PUBLIC_AMPLITUDE_ID);
+const { publicRuntimeConfig } = getConfig();
+
+if (typeof window !== 'undefined' && publicRuntimeConfig.NEXT_PUBLIC_AMPLITUDE_ID) {
+  init(publicRuntimeConfig.NEXT_PUBLIC_AMPLITUDE_ID);
 }
 
 const client = new QueryClient({
@@ -30,7 +33,7 @@ const poppinsFont = Poppins({
   subsets: ['latin'],
 });
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
     key: 'color-scheme',
     defaultValue: 'dark',
@@ -95,3 +98,10 @@ export default function App({ Component, pageProps }: AppProps) {
     </>
   );
 }
+
+MyApp.getInitialProps = async (appContext: any) => {
+  // calls page's `getInitialProps` and fills `appProps.pageProps`
+  const appProps = await App.getInitialProps(appContext);
+
+  return { ...appProps };
+};
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
@@ -1,7 +1,10 @@
 import Script from 'next/script';
+import getConfig from 'next/config';
 import { createGetInitialProps } from '@mantine/next';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
+const { publicRuntimeConfig } = getConfig();
+
 const getInitialProps = createGetInitialProps();
 
 export default class _Document extends Document {
@@ -14,7 +17,7 @@ export default class _Document extends Document {
         <body>
           <Main />
           <NextScript />
-          <Script type="text/javascript" src={process.env.NEXT_PUBLIC_EMBED_URL} strategy="beforeInteractive" />
+          <Script type="text/javascript" src={publicRuntimeConfig.NEXT_PUBLIC_EMBED_URL} strategy="beforeInteractive" />
         </body>
       </Html>
     );

diff --git a/apps/web/pages/signin/index.tsx b/apps/web/pages/signin/index.tsx
@@ -1,16 +1,15 @@
 import jwt from 'jwt-decode';
 import { useEffect } from 'react';
+import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 
 import { CONSTANTS, ROUTES } from '@config';
 import { Signin } from '@components/signin';
 import { OnboardLayout } from '@layouts/OnboardLayout';
 
-interface SigninPageProps {
-  API_URL: string;
-}
+const { publicRuntimeConfig } = getConfig();
 
-export default function SigninPage({ API_URL }: SigninPageProps) {
+export default function SigninPage() {
   const { query, push } = useRouter();
 
   useEffect(() => {
@@ -22,15 +21,7 @@ export default function SigninPage({ API_URL }: SigninPageProps) {
     }
   }, [query, push]);
 
-  return <Signin API_URL={API_URL} error={query?.error as string} />;
-}
-
-export function getServerSideProps() {
-  return {
-    props: {
-      API_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
-    },
-  };
+  return <Signin API_URL={publicRuntimeConfig.NEXT_PUBLIC_API_BASE_URL} error={query?.error as string} />;
 }
 
 SigninPage.Layout = OnboardLayout;
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -79,6 +79,8 @@ services:
       NEXT_PUBLIC_API_BASE_URL: ${API_ROOT_URL}
       NEXT_PUBLIC_EMBED_URL: ${WIDGET_EMBED_PATH}
       NEXT_PUBLIC_AMPLITUDE_ID: ${WEB_AMPLITUDE_ID}
+    ports:
+      - 4200:4200
   rabbitmq:
     image: rabbitmq:3-alpine
     container_name: 'rabbitmq'