rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui_migration feat(deps): setup vite mjs and index.html

Browse source
This commit is contained in:
Antonio Anaya 2026-01-20 17:59:16 -06:00
parent d6c636f0cb
commit 3e528fdfa1
3 changed files with 99 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

25
webapp/index.html Normal file
View file

@ -0,0 +1,25 @@
// index.html
// The main HTML file for the OpenFlexure Microscope web application.
// Vite will use this file as a template to build the final HTML served to users.
// It's at root directory to allow Vite to process it.
// The previous version was located at public/index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>OpenFlexure Microscope</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

17
webapp/public/old.index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>OpenFlexure Microscope</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

57
webapp/vite.config.mjs Normal file
View file

@ -0,0 +1,57 @@
// vite.config.mjs
// Vite configuration file for a Vue 2 webapp using the Vue 2 compatibility build.
// Vite replaces Vue CLI as the build tool. As it is designed for Vue 3, we use the
// @vue/compat package to enable Vue 2 maintaining compatibility syntax and features.
// Important: This is a preliminary setup, for vue2 to vue3 migration purposes.
// Note: Comments are generated to explain relevant configuration options.
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// Enable Vue 2 compatibility mode.
compatConfig: {
MODE: 2
}
}
}
}),
],
resolve: {
alias: {
// Use Vue 2 compatible build.
'vue': '@vue/compat',
// Setup path alias for src directory.
// This allows importing modules using '@/path/to/module'.
'@': fileURLToPath(new URL('./src', import.meta.url))
},
// Recognize these file extensions for module resolution.
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
server: {
host: true,
// Set the development server port to 8080.
// OFM uses port 5000, so we avoid conflicts. run, and override by using the address:
// http://microscope.local:8080/?overrideOrigin=http://microscope.local:5000#
port: 8080,
strictPort: true,
},
css: {
preprocessorOptions: {
less: {
// Always include math in Less files.
math: 'always',
// Enable relative URLs in Less files.
relativeUrls: true,
// Enable JavaScript in Less files
javascriptEnabled: true,
}
}
}
})