diff --git a/.env b/.env
index a8c73466d..ce348f2e8 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,10 @@
+# ViteJS based
+VITE_VERSION=latest
+VITE_BASE_API_URL=http://localhost:8000/api/v2/
+VITE_FORM_ID=93c09209-5fb9-4105-b6bb-9d9f0aa6782c
+VITE_USE_HASH_ROUTING=false
+
+# Legacy
 REACT_APP_VERSION=latest
 REACT_APP_BASE_API_URL=http://localhost:8000/api/v2/
 REACT_APP_FORM_ID=93c09209-5fb9-4105-b6bb-9d9f0aa6782c
diff --git a/src/api-mocks/base.js b/src/api-mocks/base.js
index 95359e37b..22536188d 100644
--- a/src/api-mocks/base.js
+++ b/src/api-mocks/base.js
@@ -1,7 +1,8 @@
+import {getEnv} from 'env';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';
 
-export const BASE_URL = process.env.REACT_APP_BASE_API_URL || 'http://localhost:8000/api/v2/';
+export const BASE_URL = getEnv('BASE_API_URL') || 'http://localhost:8000/api/v2/';
 
 /**
  * Create a function to build an object from a default with optional overrides.
diff --git a/src/components/Literal.jsx b/src/components/Literal.jsx
index 759015b16..a37483778 100644
--- a/src/components/Literal.jsx
+++ b/src/components/Literal.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {useContext} from 'react';
 
-const isDevelopment = process.env.NODE_ENV === 'development';
+import {DEBUG} from 'utils';
 
 const LiteralContext = React.createContext();
 LiteralContext.displayName = 'LiteralContext';
@@ -24,7 +24,7 @@ const EMPTY_LITERAL = {resolved: ''};
 const Literal = ({name}) => {
   const literals = useContext(LiteralContext);
   const value = (literals[name] || EMPTY_LITERAL).resolved;
-  if (isDevelopment && !value) {
+  if (DEBUG && !value) {
     console.warn(`Literal ${name} not found!`);
   }
   return value;
diff --git a/src/env.mjs b/src/env.mjs
new file mode 100644
index 000000000..3a756133f
--- /dev/null
+++ b/src/env.mjs
@@ -0,0 +1,34 @@
+/**
+ * Handle the env in both (legacy) CRA and the new Vite-based setup.
+ *
+ * CRA is `process.env` based, using NodeJS, while ViteJS used import.meta from the
+ * module system.
+ */
+
+let env;
+let envVarPrefix = 'VITE';
+
+let DEBUG = false;
+
+// Support both CRA and Vite for the time being.
+try {
+  env = process.env;
+  // it's legacy create-react-app
+  DEBUG = env.NODE_ENV === 'development';
+  envVarPrefix = 'REACT_APP';
+} catch (error) {
+  if (error instanceof ReferenceError) {
+    // it's ViteJS, which doesn't know `process`
+    env = import.meta.env;
+    DEBUG = env.MODE === 'development';
+  } else {
+    throw error;
+  }
+}
+
+const getEnv = name => {
+  const fullName = `${envVarPrefix}_${name}`;
+  return env[fullName];
+};
+
+export {DEBUG, env, getEnv};
diff --git a/src/hooks/usePageViews.js b/src/hooks/usePageViews.js
index be9289cfd..5bd1fc1ac 100644
--- a/src/hooks/usePageViews.js
+++ b/src/hooks/usePageViews.js
@@ -2,8 +2,7 @@ import {useContext, useEffect, useRef} from 'react';
 import {useLocation} from 'react-router-dom';
 
 import {ConfigContext} from 'Context';
-
-const isDev = process.env.NODE_ENV === 'development';
+import {DEBUG} from 'utils';
 
 function usePrevious(value) {
   const ref = useRef({
@@ -25,7 +24,7 @@ function usePrevious(value) {
 
 const ANALYTICS_PROVIDERS = {
   debug: async location =>
-    isDev &&
+    DEBUG &&
     console.log(
       `Tracking navigation to ${window.location.origin + location.pathname}${location.hash}`
     ),
diff --git a/src/index.jsx b/src/index.jsx
index 020ec73c9..a7b879766 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,22 +1,24 @@
+import {getEnv} from 'env';
+
 import './index.scss';
 import {OpenForm} from './sdk';
 
-// import displayComponents from './custom-display-components';
-
-const {REACT_APP_BASE_API_URL, REACT_APP_FORM_ID, REACT_APP_USE_HASH_ROUTING} = process.env;
+const BASE_API_URL = getEnv('BASE_API_URL');
+const FORM_ID = getEnv('FORM_ID');
+const USE_HASH_ROUTING = getEnv('USE_HASH_ROUTING');
 
 window.onload = () => {
   const formId = new URLSearchParams(document.location.search).get('form');
   const targetNode = document.getElementById('root');
   const form = new OpenForm(targetNode, {
-    baseUrl: REACT_APP_BASE_API_URL,
-    formId: formId || REACT_APP_FORM_ID,
+    baseUrl: BASE_API_URL,
+    formId: formId || FORM_ID,
     basePath: '/',
     // added for testing purposes - adding a real CSP breaks *a lot* of things of Create
     // React App :(
     CSPNonce: 'RqgbALvp8D5b3+8NuhfuKg==',
     // displayComponents,
-    useHashRouting: REACT_APP_USE_HASH_ROUTING === 'true' || false,
+    useHashRouting: USE_HASH_ROUTING === 'true' || false,
   });
   form.init();
 };
diff --git a/src/utils.js b/src/utils.js
index 5885b3b7b..3f94fbf4d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,9 +1,11 @@
 import classNames from 'classnames';
 
+import {getEnv} from './env';
 import {applyPrefix} from './formio/utils';
 
-export const DEBUG = process.env.NODE_ENV === 'development';
-const {REACT_APP_VERSION} = process.env;
+export {DEBUG} from './env';
+
+const VERSION = getEnv('VERSION');
 
 export const getFormattedDateString = (intl, dateString) => {
   if (!dateString) return '';
@@ -24,6 +26,4 @@ export const getBEMClassName = (base, modifiers = []) => {
 // usage: await sleep(3000);
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-export const getVersion = () => {
-  return REACT_APP_VERSION || 'unknown';
-};
+export const getVersion = () => VERSION || 'unknown';