[Vite] base and port in dev server config not working

[nbyx]

Current Behavior

If I try to set the vite dev-server port or base in the vite.config.ts seems to be overwritten with the default ones. The config is working partially as I used the resolve alias to resolve some files.

Only if I set the baseHref or port for the port change in workspace.json I can see the affected dev-server changes.

The baseHref './' for embedded development is also not working as a baseHref.

This is the current vite.config.ts in my app directory. I tested the base on two different places as you can see.

export default defineConfig((env) => ({
    base: '/BLA/',
    resolve: {
        alias: [
            {
                find: /^~.+/,
                replacement: (val: string) => {
                    return val.replace(/^~/, "");
                },
            },
            { find: '@styles', replacement: path.resolve(__dirname, '../../libs/common/ui-assets/src/styles')},
            { find: '@assets', replacement: path.resolve(__dirname, '../../libs/common/ui-assets/src/assets')}
        ] as AliasOptions
    },
    server: {
        base: '/BLA/',
        https: true,
        hmr: false,
        open: false,
        port: 3010,
    },
    plugins: [
        react(),
        ViteTsConfigPathsPlugin({
            root: '../../',
            projects: ['tsconfig.base.json'],
        }),
        splitVendorChunkPlugin(),
    ]
}));

the server and build from workspace.json:

"build": {
    "executor": "@nrwl/vite:build",
    "outputs": ["{options.outputPath}"],
    "options": {
        "outputPath": "dist/apps/my-app",
        "index": "apps/my-app/public/index.html",
        "main": "apps/my-app/src/boot.tsx",
        "tsConfig": "apps/my-app/tsconfig.app.json",
        "assets": [
            {
                "input": "libs/common/ui-assets/src/assets",
                "output": "assets",
                "glob": "**/*"
            }
        ],
        "styles": [],
        "scripts": [],
        "stylePreprocessorOptions": {
            "includePaths": ["libs/common/ui-assets/src/styles"]
        }
    },
    "configurations": {
        "production": {
            "fileReplacements": [
                {
                    "replace": "apps/my-app/src/environments/environment.ts",
                    "with": "apps/my-app/src/environments/environment.prod.ts"
                }
            ],
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "extractLicenses": true,
            "vendorChunk": false,
            "budgets": [
                {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                }
            ]
        },
        "development": {
            "extractLicenses": false,
            "optimization": false,
            "sourceMap": true,
            "vendorChunk": true
        }
    },
    "defaultConfiguration": "production"
},
 "serve": {
    "executor": "@nrwl/vite:dev-server",
    "options": {
        "buildTarget": "my-app:build",
        "port": 3010,
        "configFile": "apps/my-app/vite.config.ts"
    },
    "configurations": {
        "production": {
            "buildTarget": "my-app:build:production"
        },
        "development": {
            "buildTarget": "my-app:build:development"
        }
    },
    "defaultConfiguration": "development"
},

Expected Behavior

The port and base options in vite.config.ts should affect the dev-server config.

As an alternative it would be good if the baseHref in the workspace.json would accept the option of vite dev-server to have a base as './' to have relative paths in index.html.

Github Repo

No response

Steps to Reproduce

1. Add vite to workspace
2. change port or base in vite.config.ts
3. port is not changing and base is not working

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.18.0
   OS   : darwin arm64
   npm  : 8.19.2
   
   nx : 15.2.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.2.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.2.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.2.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.2.1
   @nrwl/js : 15.2.1
   @nrwl/linter : 15.2.1
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.2.1
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.2.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.2.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.2.1
   @nrwl/web : 15.2.1
   @nrwl/webpack : 15.2.1
   @nrwl/workspace : 15.2.1
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nrwl/vite: 15.2.1

Failure Logs

No response

Additional Information

No response

[mandarini]

Hi there @nbyx ! Thanks for reporting this issue! The next version of Nx will contain some fixes regarding these things, but I'll continue to monitor this issue (and the bugs you reported). Please bear with us! :)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.