[Vite] fileReplacements is not working for dev-server

[nodegin]

Current Behavior

fileReplacements is not working for dev-server (i.e. serve command)

Expected Behavior

When specifying the fileReplacements in the project.json and running with configuration, the file should also be replaced in local dev server, not just bundling production build.

Github Repo

No response

Steps to Reproduce

1. Add fileReplacements to the project.json
2. Run local dev server
3. Observe if the file is replaced

Nx Report

>  NX   Report complete - copy this into the issue template

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

Failure Logs

No response

Additional Information

No response

[mandarini]

Yep, that was fixed in 15.2.1! :D

here's the PR

[mandarini]

here's the other issue referencing it

[nodegin]

@mandarini It's a different issue I guess, I tried 15.2.1 and the issue is not fixed yet:

I actually have created a PR before

[goinnovise]

@nodegin Did you ever find a solution for this? I am trying to swap out environment variables found in .ts file at build time in a Nx Vite app.

[mandarini]

@goinnovise here are some links that may help you:

1. https://vitejs.dev/guide/env-and-mode.html
2. https://nx.dev/recipes/environment-variables/use-environment-variables-in-react#for-react-applications-using-vite
3. https://vitejs.dev/config/shared-options.html#resolve-alias

[mandarini]

@nodegin when I merged your PR, the fileReplacements stopped working for the vite builder, so I had to revert it.

[nodegin]

@goinnovise You can do the followings with latest version of @nrwl/vite.

1. Create .env.XXX files depends on your configurations / environments

# /apps/web/.env.staging
VITE_APP_API_URL="https://stg.myapp.com"
# /apps/web/.env.production
VITE_APP_API_URL="https://myapp.com"

2. Edit project.json to add your MODE

# /apps/web/project.json
...
    "build": {
      "configurations": {
        "production": {
          "mode": "production",
          "sourceMap": false
        },
        "staging": {
          "mode": "staging",
          "sourceMap": true
        }
      },
      "defaultConfiguration": "staging",
      "executor": "@nrwl/vite:build",
      "options": {
        "outputPath": "dist/apps/web"
      },
      "outputs": ["{options.outputPath}"]
    },
...

3. Finally access the env var via import.meta.env.VITE_APP_API_URL
   Note: the typing might be missing initially which you have to prepare your own .d.ts definition, otherwise VSCode will not suggest according to your .env file.

interface ImportMeta {
  env: {
    MODE: 'staging' | 'production'
    VITE_APP_API_URL: string
  }
}

Which should be able to add configs for different envs.
But if you need to replace a certain file across different envs, it is not supported anymore.

[goinnovise]

@nodegin Thanks for responding. This was the route I ended up going yesterday.

[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.