From 36228a40308d93a67b62f21566bea63eeb65388c Mon Sep 17 00:00:00 2001 From: Oksamies Date: Tue, 26 Aug 2025 15:00:55 +0300 Subject: [PATCH] Fix env variable grabbing Apparently the Vite env variables are not available in loaders or SSR in general. So we have to use the process instead on server side code. --- .github/workflows/test.yml | 8 ++++---- apps/cyberstorm-remix/app/c/community.tsx | 2 +- .../app/communities/communities.tsx | 2 +- .../app/p/dependants/Dependants.tsx | 2 +- apps/cyberstorm-remix/app/p/packageEdit.tsx | 2 +- apps/cyberstorm-remix/app/p/packageListing.tsx | 2 +- .../app/p/tabs/Changelog/Changelog.tsx | 2 +- .../app/p/tabs/Readme/Readme.tsx | 2 +- .../app/p/tabs/Required/Required.tsx | 2 +- .../app/p/tabs/Versions/Versions.tsx | 2 +- apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx | 2 +- .../app/p/tabs/Wiki/WikiFirstPage.tsx | 2 +- .../app/p/tabs/Wiki/WikiPage.tsx | 2 +- .../app/p/tabs/Wiki/WikiPageEdit.tsx | 2 +- apps/cyberstorm-remix/app/p/team/Team.tsx | 2 +- apps/cyberstorm-remix/app/root.tsx | 14 ++++++++++++-- apps/cyberstorm-remix/app/upload/upload.tsx | 2 +- .../cyberstorm/utils/ThunderstoreAuth.tsx | 16 ++++++++++++---- apps/cyberstorm-storybook/constants.ts | 5 ++--- tools/visual-diff-ci/run_ci_script.py | 6 ++++-- 20 files changed, 49 insertions(+), 30 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 4910bfc92..702a82a8c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -93,10 +93,10 @@ jobs: runs-on: ubuntu-latest needs: get-node-version env: - NEXT_PUBLIC_SITE_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }} - NEXT_PUBLIC_API_URL: ${{ vars.NEXT_PUBLIC_API_URL }} - PUBLIC_SITE_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }} - PUBLIC_API_URL: ${{ vars.NEXT_PUBLIC_API_URL }} + VITE_SITE_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }} + VITE_API_URL: ${{ vars.NEXT_PUBLIC_API_URL }} + VITE_AUTH_BASE_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }} + VITE_AUTH_RETURN_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }} steps: - uses: actions/checkout@v4 - name: Set up Node ${{ needs.get-node-version.outputs.node-version }} diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx index 88b36305e..d52ffa053 100644 --- a/apps/cyberstorm-remix/app/c/community.tsx +++ b/apps/cyberstorm-remix/app/c/community.tsx @@ -63,7 +63,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) { if (params.communityId) { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx index f90bac337..6c955fbfc 100644 --- a/apps/cyberstorm-remix/app/communities/communities.tsx +++ b/apps/cyberstorm-remix/app/communities/communities.tsx @@ -68,7 +68,7 @@ export async function loader({ request }: LoaderFunctionArgs) { const page = undefined; const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx index 83a7437f5..81b82cf56 100644 --- a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx +++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx @@ -27,7 +27,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/packageEdit.tsx b/apps/cyberstorm-remix/app/p/packageEdit.tsx index 480372782..3bf73fd47 100644 --- a/apps/cyberstorm-remix/app/p/packageEdit.tsx +++ b/apps/cyberstorm-remix/app/p/packageEdit.tsx @@ -44,7 +44,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx index 00c4df8b4..7d4eaba03 100644 --- a/apps/cyberstorm-remix/app/p/packageListing.tsx +++ b/apps/cyberstorm-remix/app/p/packageListing.tsx @@ -132,7 +132,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx b/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx index 044f075b6..b039d5dc7 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx @@ -9,7 +9,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx b/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx index 61999e1b2..d3e9ad0c7 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx @@ -9,7 +9,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx index 29bbd7ef0..b2b0f24ef 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx @@ -13,7 +13,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx index dee2cdd96..0920479b6 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx @@ -32,7 +32,7 @@ export async function loader({ params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx index b8c0e805c..94a6dd21f 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx @@ -13,7 +13,7 @@ export async function loader({ params }: LoaderFunctionArgs) { if (params.communityId && params.namespaceId && params.packageId) { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx index a6eda2f08..e4b81b572 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx @@ -10,7 +10,7 @@ export async function loader({ params }: LoaderFunctionArgs) { if (params.communityId && params.namespaceId && params.packageId) { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx index 4b3045020..aa784bef6 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx @@ -15,7 +15,7 @@ export async function loader({ params }: LoaderFunctionArgs) { ) { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPageEdit.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPageEdit.tsx index be6f1dacf..bbca2c3be 100644 --- a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPageEdit.tsx +++ b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPageEdit.tsx @@ -40,7 +40,7 @@ export async function loader({ params }: LoaderFunctionArgs) { ) { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/p/team/Team.tsx b/apps/cyberstorm-remix/app/p/team/Team.tsx index 10b455f48..dd3461f88 100644 --- a/apps/cyberstorm-remix/app/p/team/Team.tsx +++ b/apps/cyberstorm-remix/app/p/team/Team.tsx @@ -22,7 +22,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) { try { const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx index ab4715a71..7a3e51f40 100644 --- a/apps/cyberstorm-remix/app/root.tsx +++ b/apps/cyberstorm-remix/app/root.tsx @@ -108,7 +108,12 @@ const adContainerIds = ["right-column-1", "right-column-2", "right-column-3"]; export function Layout({ children }: { children: React.ReactNode }) { const data = useRouteLoaderData("root"); - const domain = import.meta.env.VITE_SITE_URL ?? "https://thunderstore.io"; + let domain: string; + if (import.meta.env.SSR) { + domain = process.env.VITE_SITE_URL || ""; + } else { + domain = import.meta.env.VITE_SITE_URL; + } const location = useLocation(); const shouldShowAds = location.pathname.startsWith("/teams") @@ -197,7 +202,12 @@ const TooltipProvider = memo(function TooltipProvider({ function App() { // TODO: Remove this customization when legacy site is removed - const domain = import.meta.env.VITE_SITE_URL ?? "https://thunderstore.io"; + let domain: string; + if (import.meta.env.SSR) { + domain = process.env.VITE_SITE_URL || ""; + } else { + domain = import.meta.env.VITE_SITE_URL; + } const data = useRouteLoaderData("root"); const dapper = new DapperTs(() => { diff --git a/apps/cyberstorm-remix/app/upload/upload.tsx b/apps/cyberstorm-remix/app/upload/upload.tsx index 44fa2e08c..bc44599d8 100644 --- a/apps/cyberstorm-remix/app/upload/upload.tsx +++ b/apps/cyberstorm-remix/app/upload/upload.tsx @@ -70,7 +70,7 @@ export async function loader() { // console.log("loader context", getSessionTools(context)); const dapper = new DapperTs(() => { return { - apiHost: import.meta.env.VITE_API_URL, + apiHost: process.env.VITE_API_URL, sessionId: undefined, }; }); diff --git a/apps/cyberstorm-remix/cyberstorm/utils/ThunderstoreAuth.tsx b/apps/cyberstorm-remix/cyberstorm/utils/ThunderstoreAuth.tsx index e837ce007..f92e6cbe5 100644 --- a/apps/cyberstorm-remix/cyberstorm/utils/ThunderstoreAuth.tsx +++ b/apps/cyberstorm-remix/cyberstorm/utils/ThunderstoreAuth.tsx @@ -4,11 +4,19 @@ interface Props { } export function buildAuthLoginUrl(props: Props) { - return `${import.meta.env.VITE_AUTH_BASE_URL}/auth/login/${props.type}/${ + let domain: string; + let returnDomain: string; + if (import.meta.env.SSR) { + domain = process.env.VITE_SITE_URL || ""; + returnDomain = process.env.VITE_AUTH_RETURN_URL || ""; + } else { + domain = import.meta.env.VITE_SITE_URL; + returnDomain = import.meta.env.VITE_AUTH_RETURN_URL; + } + + return `${domain}/auth/login/${props.type}/${ props.nextUrl ? `?next=${encodeURIComponent(props.nextUrl)}` - : `?next=${encodeURIComponent( - `${import.meta.env.VITE_AUTH_RETURN_URL}/communities/` - )}` + : `?next=${encodeURIComponent(`${returnDomain}/communities/`)}` }`; } diff --git a/apps/cyberstorm-storybook/constants.ts b/apps/cyberstorm-storybook/constants.ts index 563412b94..a2d7d3602 100644 --- a/apps/cyberstorm-storybook/constants.ts +++ b/apps/cyberstorm-storybook/constants.ts @@ -1,5 +1,4 @@ -export const API_DOMAIN = - process.env.NEXT_PUBLIC_API_URL || "https://thunderstore.io"; +export const API_DOMAIN = process.env.VITE_API_URL || "https://thunderstore.io"; export const ROOT_DOMAIN = - process.env.NEXT_PUBLIC_SITE_URL || "https://thunderstore.io"; + process.env.VITE_SITE_URL || "https://thunderstore.io"; diff --git a/tools/visual-diff-ci/run_ci_script.py b/tools/visual-diff-ci/run_ci_script.py index 1f8e98ac4..1a0351643 100644 --- a/tools/visual-diff-ci/run_ci_script.py +++ b/tools/visual-diff-ci/run_ci_script.py @@ -137,8 +137,10 @@ def setup_frontend(): def start_frontend() -> BgProcess: configs = { - "PUBLIC_SITE_URL": "http://127.0.0.1:8000", - "PUBLIC_API_URL": "http://127.0.0.1:8000", + "VITE_SITE_URL": "http://127.0.0.1:8000", + "VITE_API_URL": "http://127.0.0.1:8000", + "VITE_AUTH_BASE_URL": "http://127.0.0.1:8000", + "VITE_AUTH_RETURN_URL": "http://127.0.0.1:8000", } process = BgProcess( [YARN_PATH, "workspace", "@thunderstore/cyberstorm-remix", "start", "--host", "0.0.0.0", "--port", "3000"],