Vite Config for Production

[anandsb84]

Hi,

I am new to Vite, and we already have a vite config.js done for dev.
We want to use vite for production, so can you please help me, what all changes must be done in below files.

BaseViteConfig.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs/promises';
import { resolve, dirname } from 'path';
import { fileURLToPath } from 'url';

const _dirname = dirname(fileURLToPath(import.meta.url));

const BaseViteConfig = (objParams) => defineConfig({
//root:"../../Demo.React",
// build:{
// rollupOptions:{
// input:"/Application/Demo/PC/Start/index.html"
// }
// },
resolve:{
alias:[
{
find : "@root",
replacement:resolve(_dirname, '../../Demo.React')
},
{
find : "@rootclient",
replacement:resolve(_dirname,"../../Demo.React.Client")
},
{
find : "@shared",
replacement:resolve(_dirname,"../../DemoFiles.BusinessLogic")
},
{
find : "@sharedclient",
replacement:resolve(_dirname,"../../DemoFiles.BusinessLogic.Client")
},
{
find : "@appfolder",
replacement:resolve(_dirname,"../../Demo.React/" + objParams.ApplicationFolderName)
},
{
find : "@inlineimage",
replacement:resolve(_dirname,"../../DemoFiles.Resources/Themes/Default/0.InlineImage"),
customResolver(updatedId, importer, resolveOptions) {
let strNewUrl = updatedId.replace('?inline','?url');
strNewUrl = strNewUrl.replace('?in-line','?url');
return strNewUrl;
}
},
{
find : "@intranetdefaulttheme",
replacement:resolve(_dirname,"../../DemoFiles.Resources/Themes/Default/c.Intranet/Skin2018")
},
{
find : "react-dom$",
replacement:"react-dom/profiling"
},
{
find : "scheduler/tracing",
replacement:"scheduler/tracing-profiling"
},
{
find: '../../DemoFiles.Resources/Themes/Default/0.InlineImage',
replacement: '',
customResolver(updatedId, importer, resolveOptions) {
let strNewUrl = updatedId.replace('?inline','?inline');
console.log('arun');
return fileURLToPath(new URL(strNewUrl,import.meta.url));
}
}
]
},
//publicDir: '../../Demo.React.Bundle',
esbuild: {
loader: 'jsx',
include: [//..jsx?$/],
exclude: [],
},
optimizeDeps: {
include:['isomorphic-fetch','redux','redux-devtools-extension','redux-logger','react-json-tree','immer','timers-browserify','util','react-split-pane','prop-types','d3','@microsoft/signalr','@fluentui/font-icons-mdl2','@fluentui/react/lib/Button','@fluentui/react'],
//include: ['linked-dep'],
esbuildOptions: {
plugins: [
{
name: 'load-js-files-as-jsx',
setup(build) {
build.onLoad(
{ filter: /\..js$/ },
async (args) => ({
loader: 'jsx',
contents: await fs.readFile(args.path, 'utf8'),
})
);
},
}
],
},
},
plugins: [react()],
server: {
//port: 8081,
//open:'../Index/Demo/index.html',
},
});

export default BaseViteConfig;

MainProjectConfig.config.js

import BaseViteConfig from './BaseViteConfig.js';

const MainProjectConfig = BaseViteConfig({
ApplicationFolderName: "Application/Demo/PC",
ApplicationName : "Demo"
});

export default MainProjectConfig;

script in package.json

 "DemoViteServe": "vite serve --config ./Vite/MainProjectConfig.config.js",
 
the above one is working for dev

these two i have added for prod 
"DemoViteBuild": "vite build --config ./Vite/MainProjectConfig.config.js",
"DemoVitePreview": "vite preview --config ./Vite/MainProjectConfig.config.js",

can you please let me know the changes to be done for production

[ArnaudBarre]

This is not a patten in Vite to use different configuration for dev and prod.

You can use the same file, and use a callback to update the some fields depending on the command/environment: https://vitejs.dev/config/#conditional-config

Note: You can wrap your code with ```js and ``` to format your code