From bda4947df6b404453f72abcee7cc0920fd887cf7 Mon Sep 17 00:00:00 2001 From: Alec Ananian <1013230+alecananian@users.noreply.github.com> Date: Wed, 29 May 2024 15:56:19 +0200 Subject: [PATCH] env var cleanup (#38) * create env file before codegen * env var cleanup --- .env.sample | 10 ++++----- .github/workflows/deploy.yml | 2 +- Dockerfile | 23 ++++++++++---------- app/lib/cache.server.ts | 2 +- app/lib/chain.server.ts | 2 +- app/root.tsx | 8 ++----- app/routes/pools_.$id[.]png.tsx | 2 +- app/routes/resources.og.tsx | 2 +- app/routes/swap.$tokenIn.$tokenOut[.]png.tsx | 4 ++-- app/routes/swap.tsx | 2 +- app/types.ts | 16 -------------- env.d.ts | 18 +++++++++++++-- global.d.ts | 23 -------------------- 13 files changed, 42 insertions(+), 72 deletions(-) diff --git a/.env.sample b/.env.sample index bd9506a..53a754a 100644 --- a/.env.sample +++ b/.env.sample @@ -2,8 +2,8 @@ MAGICSWAPV2_API_URL= TROVE_API_URL=https://trove-api-dev.treasure.lol TROVE_API_NETWORK=arbsepolia TROVE_API_KEY= -PUBLIC_NODE_ENV=development -PUBLIC_THIRDWEB_CLIENT_ID= -PUBLIC_ENABLE_TESTNETS=true -PUBLIC_WALLET_CONNECT_KEY= -DEFAULT_TOKEN_ADDRESS=0x55d0cf68a1afe0932aff6f36c87efa703508191c \ No newline at end of file +VITE_NODE_ENV=development +VITE_ENABLE_TESTNETS=true +VITE_THIRDWEB_CLIENT_ID= +VITE_WALLET_CONNECT_KEY= +VITE_DEFAULT_TOKEN_ADDRESS=0x55d0cf68a1afe0932aff6f36c87efa703508191c \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 28451fb..602e4e2 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -16,6 +16,6 @@ jobs: - name: Set up flyctl uses: superfly/flyctl-actions/setup-flyctl@master - name: Deploy - run: flyctl deploy --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-secret dotenv="${{ secrets.ENV }}" --build-arg MAGICSWAPV2_API_URL=${{ vars.MAGICSWAPV2_API_URL }} + run: flyctl deploy --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-secret dotenv="${{ secrets.ENV }}" env: FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} diff --git a/Dockerfile b/Dockerfile index cbe4e1e..4c4274b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -13,10 +13,6 @@ ENV NODE_ENV="production" # Throw-away build stage to reduce size of final image FROM base as build -# Set environment variables -ARG MAGICSWAPV2_API_URL -ENV MAGICSWAPV2_API_URL=$MAGICSWAPV2_API_URL - # Install packages needed to build node modules RUN apt-get update -qq && \ apt-get install -y build-essential pkg-config python-is-python3 @@ -25,22 +21,25 @@ RUN apt-get update -qq && \ RUN npm install -g pnpm RUN apt-get -y update && apt-get -y install curl -# Install node modules -COPY --link package*.json ./ -# COPY patches ./patches +# Copy application code +COPY --link . . +# Install dependencies RUN npm install --include=dev -# Copy application code -COPY --link . . +# Create environment file +RUN --mount=type=secret,id=dotenv,dst=env \ + tr ' ' '\n' < env > .env # Run code generation RUN npm run generate # Build application -RUN --mount=type=secret,id=dotenv,dst=env \ - tr ' ' '\n' < env > .env && \ - npm run build +RUN npm run build + +# Remove development dependencies +# Disabled because GraphQL codegen has extra dependencies +# RUN npm prune --omit=dev # Final stage for app image FROM base diff --git a/app/lib/cache.server.ts b/app/lib/cache.server.ts index f0d84aa..09a5a14 100644 --- a/app/lib/cache.server.ts +++ b/app/lib/cache.server.ts @@ -10,7 +10,7 @@ declare global { let lru: LRUCache; -if (process.env.NODE_ENV === "production") { +if (import.meta.env.NODE_ENV === "production") { lru = new LRUCache({ max: 1000 }); } else { if (!global.__lruCache) { diff --git a/app/lib/chain.server.ts b/app/lib/chain.server.ts index 9cdb25c..3466371 100644 --- a/app/lib/chain.server.ts +++ b/app/lib/chain.server.ts @@ -4,6 +4,6 @@ import { arbitrumSepolia } from "viem/chains"; export const client = createPublicClient({ chain: arbitrumSepolia, transport: http( - `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${process.env.PUBLIC_THIRDWEB_CLIENT_ID}` + `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}` ), }); diff --git a/app/root.tsx b/app/root.tsx index b5aeef9..32ad111 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -58,14 +58,10 @@ export default function App() { ], transports: { [arbitrum.id]: http( - `https://arb-mainnet.g.alchemy.com/v2/${ - import.meta.env.VITE_ALCHEMY_KEY - }` + `https://${arbitrum.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}` ), [arbitrumSepolia.id]: http( - `https://arb-sepolia.g.alchemy.com/v2/${ - import.meta.env.VITE_ALCHEMY_KEY - }` + `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}` ), }, walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_KEY, diff --git a/app/routes/pools_.$id[.]png.tsx b/app/routes/pools_.$id[.]png.tsx index ccacdc8..e204689 100644 --- a/app/routes/pools_.$id[.]png.tsx +++ b/app/routes/pools_.$id[.]png.tsx @@ -195,7 +195,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { headers: { "Content-Type": "image/png", "cache-control": - process.env.NODE_ENV === "development" + import.meta.env.NODE_ENV === "development" ? "no-cache, no-store" : "public, immutable, no-transform, max-age=86400", }, diff --git a/app/routes/resources.og.tsx b/app/routes/resources.og.tsx index f636aa5..58fa3a9 100644 --- a/app/routes/resources.og.tsx +++ b/app/routes/resources.og.tsx @@ -15,7 +15,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { headers: { "Content-Type": "image/png", "cache-control": - process.env.NODE_ENV === "development" + import.meta.env.NODE_ENV === "development" ? "no-cache, no-store" : "public, immutable, no-transform, max-age=31536000", }, diff --git a/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx b/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx index b98709b..74d8c5f 100644 --- a/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx +++ b/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx @@ -20,7 +20,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { const tokenIn = inputAddress ? await fetchToken(inputAddress) - : await fetchToken(process.env.DEFAULT_TOKEN_ADDRESS); + : await fetchToken(import.meta.env.VITE_DEFAULT_TOKEN_ADDRESS); const tokenOut = await fetchToken(outputAddress); @@ -74,7 +74,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { headers: { "Content-Type": "image/png", "cache-control": - process.env.NODE_ENV === "development" + import.meta.env.NODE_ENV === "development" ? "no-cache, no-store" : "public, immutable, no-transform, max-age=86400", }, diff --git a/app/routes/swap.tsx b/app/routes/swap.tsx index 3bfa58a..6aaa8d4 100644 --- a/app/routes/swap.tsx +++ b/app/routes/swap.tsx @@ -101,7 +101,7 @@ export async function loader({ request }: LoaderFunctionArgs) { const outputAddress = url.searchParams.get("out"); const [tokenIn, tokenOut] = await Promise.all([ - fetchToken(inputAddress ?? process.env.DEFAULT_TOKEN_ADDRESS), + fetchToken(inputAddress ?? import.meta.env.VITE_DEFAULT_TOKEN_ADDRESS), outputAddress ? fetchToken(outputAddress) : null, ]); diff --git a/app/types.ts b/app/types.ts index 6e81fe3..a0503a4 100644 --- a/app/types.ts +++ b/app/types.ts @@ -1,21 +1,5 @@ import type { GetPairsQuery } from ".graphclient"; -/** Environment and helpers */ -export type EnvVar = - | "PUBLIC_THIRDWEB_CLIENT_ID" - | "PUBLIC_NODE_ENV" - | "PUBLIC_ENABLE_TESTNETS" - | "MAGICSWAPV2_API_URL" - | "TROVE_API_URL" - | "TROVE_API_NETWORK" - | "TROVE_API_KEY" - | "PUBLIC_WALLET_CONNECT_KEY" - | "DEFAULT_TOKEN_ADDRESS"; - -export type Env = { - [key in EnvVar]: string; -}; - export type Optional = T | undefined; export type AddressString = `0x${string}`; diff --git a/env.d.ts b/env.d.ts index ed99d26..426794e 100644 --- a/env.d.ts +++ b/env.d.ts @@ -2,11 +2,25 @@ /// interface ImportMetaEnv { - readonly VITE_ALCHEMY_KEY: string; + readonly VITE_NODE_ENV: string; readonly VITE_ENABLE_TESTNETS: string; - readonly CHVITE_WALLET_CONNECT_KEYAIN: string; + readonly VITE_THIRDWEB_CLIENT_ID: string; + readonly VITE_WALLET_CONNECT_KEY: string; + readonly VITE_DEFAULT_TOKEN_ADDRESS: string; } interface ImportMeta { readonly env: ImportMetaEnv; } + +declare global { + namespace NodeJS { + interface ProcessEnv { + readonly TROVE_API_URL: string; + readonly TROVE_API_NETWORK: string; + readonly TROVE_API_KEY: string; + } + } +} + +export {}; diff --git a/global.d.ts b/global.d.ts index 87db5bd..cbd2bc0 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,28 +1,5 @@ -import type { Env, EnvVar } from "~/types"; - export {}; -declare global { - /** - * To make typescript stop complaining when trying to access window.env - */ - interface Window { - env: { - [key in EnvVar]: string; - }; - } - - namespace NodeJS { - /** - * Extend process.env with our custom environment variables. - */ - interface ProcessEnv extends Env { - NODE_ENV: "development" | "production" | "test"; - PORT: string; - } - } -} - declare module "react" { interface HTMLAttributes { tw?: string;