From cdb888c23e962128151308cb33243642e560c438 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Tue, 12 Sep 2023 20:32:26 +0530
Subject: [PATCH] fix: selfhosted fixes (#2154)

* fix: selfhosted fixes

* fix: updated env example
---
 .env.example                          | 2 ++
 replace-env-vars.sh                   | 2 +-
 space/additional.d.ts                 | 2 ++
 space/components/accounts/sign-in.tsx | 4 ++--
 space/next.config.js                  | 5 ++++-
 space/package.json                    | 1 +
 space/pages/onboarding/index.tsx      | 7 +++----
 space/tsconfig.json                   | 2 +-
 8 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 space/additional.d.ts

diff --git a/.env.example b/.env.example
index 1d95c56a0..9fe0f47d9 100644
--- a/.env.example
+++ b/.env.example
@@ -23,6 +23,8 @@ NEXT_PUBLIC_SLACK_CLIENT_ID=""
 NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
 # public boards deploy url
 NEXT_PUBLIC_DEPLOY_URL=""
+# plane deploy using nginx
+NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
 
 # Backend
 # Debug value for api server use it as 0 for production use
diff --git a/replace-env-vars.sh b/replace-env-vars.sh
index afdc1492e..949ffd7d7 100644
--- a/replace-env-vars.sh
+++ b/replace-env-vars.sh
@@ -12,4 +12,4 @@ fi
 # Only perform action if $FROM and $TO are different.
 echo "Replacing all statically built instances of $FROM with this string $TO ."
 
-grep -R -la "${FROM}" apps/$DIRECTORY/.next | xargs -I{} sed -i "s|$FROM|$TO|g" "{}"
+grep -R -la "${FROM}" $DIRECTORY/.next | xargs -I{} sed -i "s|$FROM|$TO|g" "{}"
diff --git a/space/additional.d.ts b/space/additional.d.ts
new file mode 100644
index 000000000..f400344c6
--- /dev/null
+++ b/space/additional.d.ts
@@ -0,0 +1,2 @@
+// additional.d.ts
+/// <reference types="next-images" />
diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx
index b21ef167d..ed55f7697 100644
--- a/space/components/accounts/sign-in.tsx
+++ b/space/components/accounts/sign-in.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // components
 import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
 // images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
 
 export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
@@ -112,7 +112,7 @@ export const SignInView = observer(() => {
       <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
         <div className="grid place-items-center bg-custom-background-100">
           <div className="h-[30px] w-[30px]">
-            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+            <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane Logo" />
           </div>
         </div>
       </div>
diff --git a/space/next.config.js b/space/next.config.js
index 392a4cab9..bd3749f10 100644
--- a/space/next.config.js
+++ b/space/next.config.js
@@ -12,7 +12,10 @@ const nextConfig = {
 };
 
 if (parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) {
-  const nextConfigWithNginx = withImages({ basePath: "/spaces", ...nextConfig });
+  const nextConfigWithNginx = withImages({
+    basePath: "/spaces",
+    ...nextConfig,
+  });
   module.exports = nextConfigWithNginx;
 } else {
   module.exports = nextConfig;
diff --git a/space/package.json b/space/package.json
index 768abb8ff..f2bb39df6 100644
--- a/space/package.json
+++ b/space/package.json
@@ -69,6 +69,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
     "autoprefixer": "^10.4.13",
     "eslint": "8.34.0",
     "eslint-config-custom": "*",
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
index 2f08ee648..5cb168d38 100644
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@@ -1,7 +1,4 @@
 import React, { useEffect } from "react";
-import Image from "next/image";
-// assets
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -12,6 +9,8 @@ import useToast from "hooks/use-toast";
 // components
 import { OnBoardingForm } from "components/accounts/onboarding-form";
 
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
+
 const OnBoardingPage = () => {
   const { user: userStore } = useMobxStore();
 
@@ -34,7 +33,7 @@ const OnBoardingPage = () => {
           <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
           <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
             <div className="h-[30px] w-[30px]">
-              <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
+              <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
             </div>
           </div>
           <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
diff --git a/space/tsconfig.json b/space/tsconfig.json
index 63c95575d..3047edb7c 100644
--- a/space/tsconfig.json
+++ b/space/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "baseUrl": ".",