feat(env): load env variables from machine

813ed83b · Leonardo Christino · Alen Zubic · d219c7c6 · 813ed83b · 813ed83b
Commit 813ed83b authored 1 year ago by Leonardo Christino Committed by Alen Zubic 1 year ago
--- a/.dockerignore
+++ b/.dockerignore
 node_modules
\ No newline at end of file
+libs/storybook
\ No newline at end of file
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,19 +2,49 @@ FROM node:lts-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
-COPY . /app
 WORKDIR /app
-FROM base AS build
 ARG IMAGE_TAG="dev-no-image-tag"
-ENV VITE_GRAPHPOLARIS_VERSION=$IMAGE_TAG
+ENV GRAPHPOLARIS_VERSION=$IMAGE_TAG
+FROM base AS install
+COPY package.json ./
+COPY pnpm-lock.yaml ./
+COPY pnpm-workspace.yaml ./
+COPY turbo.json ./
+COPY apps/web/package.json ./apps/web/package.json
+COPY apps/docs/package.json ./apps/docs/package.json
+COPY libs/config/package.json ./libs/config/package.json
+COPY libs/shared/package.json ./libs/shared/package.json
 RUN pnpm install --frozen-lockfile
+FROM base AS build
+WORKDIR /app
+COPY apps /app/apps
+COPY libs /app/libs
+COPY --from=install /app /app
 # Fixes: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 RUN pnpm run build
+FROM base AS env-build
+RUN npm install -g pkg
+WORKDIR /app
+COPY --from=install /app/node_modules /app/node_modules
+RUN npx pkg ./node_modules/@import-meta-env/cli/bin/import-meta-env.js --target node18-alpine-x64 --output import-meta-env-alpine
 FROM nginx:1.25-alpine
+WORKDIR /app
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY entrypoint.sh /usr/bin/entrypoint.sh
+COPY apps/web/.env.example /.env.example
+COPY --from=env-build /app/import-meta-env-alpine /import-meta-env-alpine
 COPY --from=build /app/apps/web/dist /usr/share/nginx/html
-COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
+RUN chmod +x /usr/bin/entrypoint.sh
-EXPOSE 80
+EXPOSE 4200
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["/usr/bin/entrypoint.sh"]
+# ENTRYPOINT ["ls", "-la"]
--- a/apps/web/.env
+++ b/apps/web/.env
-VITE_BACKEND_URL=https://api.graphpolaris.com
+BACKEND_URL=http://localhost
-VITE_STAGING=local
+BACKEND_WSS_URL=ws://localhost:3001/
\ No newline at end of file
+STAGING=dev
+SKIP_LOGIN=true
+BACKEND_USER=:3000
+BACKEND_QUERY=:3003
+BACKEND_SCHEMA=:3002
+GRAPHPOLARIS_VERSION=dev
\ No newline at end of file
--- a/apps/web/.env.development
+++ b/apps/web/.env.development
-VITE_BACKEND_URL=http://localhost
-VITE_BACKEND_WSS_URL=ws://localhost:3001/
-VITE_STAGING=dev
-VITE_SKIP_LOGIN=true
-VITE_BACKEND_USER=:3000
-VITE_BACKEND_QUERY=:3003
-VITE_BACKEND_SCHEMA=:3002
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
+GRAPHPOLARIS_VERSION=
+BACKEND_URL=
+BACKEND_WSS_URL=
+STAGING=
+SKIP_LOGIN=
+BACKEND_USER=
+BACKEND_QUERY=
+BACKEND_SCHEMA=
\ No newline at end of file
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -7,12 +7,14 @@
    <meta name="description" content="Graphpolaris" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
  </head>
  <body>
+    <script>
+      globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
+    </script>
    <div id="root" data-theme="graphpolaris"></div>
    <script type="module" src="./src/main.tsx"></script>
  </body>

--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,6 +7,7 @@
    "dev2": "vite --host local.graphpolaris.com --port 4200",
    "dev": "vite --port 4200",
    "build": "tsc && vite build",
+    "build-env": "npx import-meta-env -x .env.example",
    "build-dev": "tsc && vite build --mode development",
    "preview": "vite preview",
    "lint": "eslint *.ts*",
@@ -29,6 +30,8 @@
  "devDependencies": {
    "@iconify/json": "^2.2.95",
    "@iconify/react": "^4.1.1",
+    "@import-meta-env/cli": "^0.6.5",
+    "@import-meta-env/unplugin": "^0.4.9",
    "@storybook/react": "7.0.0-rc.5",
    "@svgr/core": "^8.0.0",
    "@svgr/plugin-jsx": "^8.0.1",

--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -42,7 +42,7 @@ export function App(props: App) {
  const session = useSessionCache();
  const query = useQuerybuilderGraph() as QueryMultiGraph;
  const queryHash = useQuerybuilderHash();
-  const ws = useRef(new WebSocketHandler(import.meta.env.VITE_BACKEND_WSS_URL));
+  const ws = useRef(new WebSocketHandler(import.meta.env.BACKEND_WSS_URL));
  const [authCheck, setAuthCheck] = useState(false);
  const ml = useML();
  const mlHash = useMLEnabledHash();

--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -69,7 +69,7 @@ export const Navbar = (props: NavbarComponentProps) => {
  const currentLogo = !'dark' ? logo_white : logo; // TODO: support dark mode
-  const buildInfo = import.meta.env.VITE_GRAPHPOLARIS_VERSION || 'dev';
+  const buildInfo = import.meta.env.GRAPHPOLARIS_VERSION;
  return (
    <div className="w-full h-auto px-5">

--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 import dts from 'vite-plugin-dts';
 import sassDts from 'vite-plugin-sass-dts';
+import ImportMetaEnvPlugin from '@import-meta-env/unplugin';
 export default defineConfig({
  plugins: [
@@ -12,6 +13,9 @@ export default defineConfig({
      insertTypesEntry: true,
    }),
    sassDts(),
+    ImportMetaEnvPlugin.vite({
+      example: '.env.example',
+    }),
  ],
  resolve: {
    alias: {

--- a/docker-compose.yml
+++ b/docker-compose.yml
+version: '3.9'
+services:
+  frontend:
+    image: frontend:develop
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+    ports:
+      - 4200:4200
+    environment:
+      - BACKEND_URL=http://
+      - BACKEND_WSS_URL=ws://client-updater-service/
+      - STAGING=dev
+      - SKIP_LOGIN=true
+      - BACKEND_USER=user-management-service
+      - BACKEND_QUERY=query-service
+      - BACKEND_SCHEMA=schema-service
+      - GRAPHPOLARIS_VERSION=dev
+    restart: always
+    networks:
+      - graphpolaris_network
+networks:
+  graphpolaris_network:
+    name: custom_network
+    external: true
--- a/entrypoint.sh
+++ b/entrypoint.sh
+#!/bin/sh
+/import-meta-env-alpine -x /.env.example -p "/usr/share/nginx/html/**/*" --disposable
+nginx -g "daemon off;"
\ No newline at end of file
--- a/libs/shared/lib/components/Popup.tsx
+++ b/libs/shared/lib/components/Popup.tsx
-import { useState } from 'react';
 export const Popup = (props: { children: React.ReactNode; open: boolean; hAnchor: 'left' | 'right' }) => {
  return (
    <>

--- a/libs/shared/lib/data-access/api/database.ts
+++ b/libs/shared/lib/data-access/api/database.ts
@@ -39,8 +39,8 @@ export const useDatabaseAPI = () => {
  const { accessToken } = useAuthorizationCache();
  const cache = useSessionCache();
  const dispatch = useAppDispatch();
-  const domain = import.meta.env.VITE_BACKEND_URL;
+  const domain = import.meta.env.BACKEND_URL;
-  const useruri = import.meta.env.VITE_BACKEND_USER;
+  const useruri = import.meta.env.BACKEND_USER;
  function AddDatabase(request: AddDatabaseRequest, options: AddDatabaseOptions = {}): Promise<void> {
    const { setAsCurrent = true, updateDatabaseCache = false } = options;

--- a/libs/shared/lib/data-access/api/query.ts
+++ b/libs/shared/lib/data-access/api/query.ts
@@ -6,8 +6,8 @@ import { useAuthorizationCache, useSessionCache } from '../store';
 export const useQueryAPI = () => {
  const cache = useSessionCache();
  const { accessToken } = useAuthorizationCache();
-  const domain = import.meta.env.VITE_BACKEND_URL;
+  const domain = import.meta.env.BACKEND_URL;
-  const query_url = import.meta.env.VITE_BACKEND_QUERY;
+  const query_url = import.meta.env.BACKEND_QUERY;
  async function execute(query: BackendQueryFormat) {
    const response = await fetch(`${domain}${query_url}/execute/`, {

--- a/libs/shared/lib/data-access/api/schema.ts
+++ b/libs/shared/lib/data-access/api/schema.ts
@@ -5,8 +5,8 @@ import { useAuthorizationCache, useSessionCache } from '../store';
 export const useSchemaAPI = () => {
  const cache = useSessionCache();
  const { accessToken } = useAuthorizationCache();
-  const domain = import.meta.env.VITE_BACKEND_URL;
+  const domain = import.meta.env.BACKEND_URL;
-  const schema = import.meta.env.VITE_BACKEND_SCHEMA;
+  const schema = import.meta.env.BACKEND_SCHEMA;
  async function RequestSchema(databaseName?: string) {
    if (!databaseName) databaseName = cache.currentDatabase;

--- a/libs/shared/lib/data-access/api/user.ts
+++ b/libs/shared/lib/data-access/api/user.ts
@@ -10,7 +10,7 @@ export type User = {
 export const useUserAPI = () => {
  const { accessToken } = useAuthorizationCache();
-  const domain = import.meta.env.VITE_BACKEND_URL;
+  const domain = import.meta.env.BACKEND_URL;
  function GetUserInfo(): Promise<User> {
    return new Promise<User>((resolve, reject) => {

--- a/libs/shared/lib/data-access/authorization/useAuth.jsx
+++ b/libs/shared/lib/data-access/authorization/useAuth.jsx
@@ -16,7 +16,7 @@ export const useAuth = () => {
  const dispatch = useAppDispatch();
  useEffect(() => {
-    if (import.meta.env.VITE_SKIP_LOGIN) {
+    if (import.meta.env.SKIP_LOGIN) {
      console.warn('skipping login');
      setLogin(true);
      dispatch(

--- a/libs/shared/lib/vis/geovis/layers/BaseLayer.tsx
+++ b/libs/shared/lib/vis/geovis/layers/BaseLayer.tsx
@@ -22,6 +22,7 @@ export const generateBaseLayer = (mapType: number) => {
    maxZoom: 19,
    tileSize: 256,
+    //@ts-ignore
    renderSubLayers: (props: any) => {
      const {
        bbox: { west, south, east, north },

--- a/libs/shared/lib/vis/geovis/layers/ClusterLayer.tsx
+++ b/libs/shared/lib/vis/geovis/layers/ClusterLayer.tsx
@@ -116,6 +116,7 @@ export class ClusterLayer extends CompositeLayer<LayerProps> {
        id: 'edges',
        data: this.state.edges,
        pickable: true,
+        //@ts-ignore
        extensions: [new BrushingExtension()],
        brushingEnabled: this.props.brushing,
        brushingRadius: 500000,