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

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",
"version": "0.1.0",
"description": "Yet another markdown editor",
"main": "index.js",
"type": "module",
"scripts": {
"start": "webpack serve --mode development --open",
"build": "webpack --mode production"
"start": "vite",
"build": "vite build",
"preview": "vite preview"
},
"repository": {
"type": "git",
@@ -43,11 +44,15 @@
"rehype-katex": "^7.0.1",
"remark-math": "^6.0.0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
"devDependencies": {
"@types/react": "^18.2.67",
"@types/react-dom": "^18.2.22",
"@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": {
"production": [
@@ -60,26 +65,5 @@
"last 1 firefox 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>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NovaMD</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="./index.js"></script>
</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,
},
};
};