Set up vite configuration

This commit is contained in:
2024-10-28 20:32:42 +01:00
parent f1b5027e7f
commit 552016f61d
8 changed files with 1245 additions and 6219 deletions

5
.gitignore vendored
View File

@@ -129,6 +129,9 @@ dist
.yarn/install-state.gz .yarn/install-state.gz
.pnp.* .pnp.*
# Vite
.vite
##### Go ##### ##### Go #####
@@ -157,4 +160,4 @@ go.work.sum
main main
*.db *.db
data data

View File

@@ -1,10 +0,0 @@
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
],
"plugins": [
"@babel/plugin-transform-class-properties",
"@babel/plugin-transform-runtime"
]
}

File diff suppressed because it is too large Load Diff

View File

@@ -2,10 +2,11 @@
"name": "novamd-frontend", "name": "novamd-frontend",
"version": "0.1.0", "version": "0.1.0",
"description": "Yet another markdown editor", "description": "Yet another markdown editor",
"main": "index.js", "type": "module",
"scripts": { "scripts": {
"start": "webpack serve --mode development --open", "start": "vite",
"build": "webpack --mode production" "build": "vite build",
"preview": "vite preview"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -43,11 +44,15 @@
"rehype-katex": "^7.0.1", "rehype-katex": "^7.0.1",
"remark-math": "^6.0.0" "remark-math": "^6.0.0"
}, },
"eslintConfig": { "devDependencies": {
"extends": [ "@types/react": "^18.2.67",
"react-app", "@types/react-dom": "^18.2.22",
"react-app/jest" "@vitejs/plugin-react": "^4.2.1",
] "postcss": "^8.4.47",
"postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"sass": "^1.80.4",
"vite": "^5.4.10"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@@ -60,26 +65,5 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"@babel/core": "^7.25.7",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-class-properties": "^7.25.7",
"@babel/plugin-transform-runtime": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"@babel/preset-react": "^7.25.7",
"babel-loader": "^9.2.1",
"css-loader": "^7.1.2",
"html-webpack-plugin": "^5.6.0",
"postcss": "^8.4.47",
"postcss-loader": "^8.1.1",
"postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"sass": "^1.79.4",
"sass-loader": "^16.0.2",
"style-loader": "^4.0.0",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.1.0"
} }
} }

View File

@@ -1,14 +0,0 @@
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};

View File

@@ -1,12 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NovaMD</title> <title>NovaMD</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script type="module" src="./index.js"></script>
</body> </body>
</html> </html>

70
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,70 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import postcssPresetMantine from 'postcss-preset-mantine';
import postcssSimpleVars from 'postcss-simple-vars';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
plugins: [react()],
// Maintain webpack's entry point behavior
root: 'src',
publicDir: '../public',
build: {
// Output to the same directory as webpack
outDir: '../dist',
emptyOutDir: true,
// Configure asset handling
assetsDir: 'assets',
// Generate sourcemaps in development
sourcemap: mode === 'development',
// Configure rollup options
rollupOptions: {
input: {
main: path.resolve(__dirname, 'src/index.html'),
},
},
},
// Server configuration (dev only)
server: {
port: 3000,
open: true,
},
// Define environment variables
define: {
'window.API_BASE_URL': JSON.stringify(
mode === 'production' ? '/api/v1' : 'http://localhost:8080/api/v1'
),
},
// CSS configuration
css: {
postcss: {
plugins: [
postcssPresetMantine(),
postcssSimpleVars({
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
}),
],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
}));

View File

@@ -1,49 +0,0 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production';
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new webpack.DefinePlugin({
'window.API_BASE_URL': JSON.stringify(
isProduction ? '/api/v1' : 'http://localhost:8080/api/v1'
),
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
port: 3000,
open: true,
},
};
};