vite-config

import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { getAliases } from 'vite-aliases';

const aliases = getAliases({
  path: 'src',
  prefix: '@',
});

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; // <-

  // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
  // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

  const isProd = mode === 'production';
  let plugins = []

  const env = loadEnv(mode, process.cwd()); // <-
  const envCut = Object.keys(env).map((v) => {
    const keys =
      'VITE_STRIPE_KEY, VITE_RECAPTCHA_KEY, VITE_MAPS_KEY, VITE_GMAPS_KEY, VITE_FACEBOOK_PIXEL_ID, VITE_GOOGLE_TAG_MANAGER_ID, VITE_TITLE, VITE_ICON_PATH';
    const val = env[v];
    let nval = val;
    if (keys.split(', ').includes(v)) {
      nval = val.slice(0, 3) + '****' + val.slice(val.length - 3, val.length);
    }
    return {
      key: v,
      value: nval,
    };
  });

  const highestKeyLength = envCut
    .map((v) => v.key.length)
    .sort((a, b) => b - a)[0];

  const highestValueLength = envCut
    .map((v) => v.value.length)
    .sort((a, b) => b - a)[0];

  const separator = '█';
  const separatorTop = '▄';
  const separatorBottom = '▀';
  console.log('\nEnvironment: ' + mode);
  console.log(separatorTop.repeat(highestKeyLength + highestValueLength + 7));
  console.log(
    separator +
      ' '.repeat(highestKeyLength + 2) +
      separator +
      ' '.repeat(highestValueLength + 2) +
      separator
  );

  envCut.forEach((v) =>
    console.log(
      `${separator} ${v.key}` +
        ' '.repeat(highestKeyLength - v.key.length) +
        ` ${separator} ${v.value}` +
        ' '.repeat(highestValueLength - v.value.length) +
        ` ${separator}`
    )
  );
  console.log(
    separator +
      ' '.repeat(highestKeyLength + 2) +
      separator +
      ' '.repeat(highestValueLength + 2) +
      separator
  );
  console.log(
    separatorBottom.repeat(highestKeyLength + highestValueLength + 7)
  );

  const viteEnv = {};
  if (isProd) {
    Object.keys(process.env).forEach((key) => {
      if (key.startsWith(`VITE_`)) {
        viteEnv[`import.meta.env.${key}`] = process.env[key];  // <-
      }
    });
  }

  if(mode === 'development') plugins.push(reactRefresh())


  return defineConfig({
    plugins,
    publicDir: './public',
    resolve: {
      alias: aliases,
    },
    ...(isProd && { define: viteEnv }),
    server: {
      port: 3001,
      host: true,
    },
    build: {
      chunkSizeWarningLimit: 2500,
    },
    optimizeDeps: {
      include: ["@material-ui/utils", "@react-icons/all-files"]
    },
  });
};