Replace index.html, favicon.ico with `fileReplacements` option

Expected Behavior

fileReplacements would replace an index.html file if specified

Current Behavior

What is the current behavior? File replacements only seems to work with .ts files.

Failure Information (for bugs)

Not sure where to find logs for this.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

npx create-nx-workspace@latest repro-workspace

nx add @nrwl/react

nx g @nrwl/react:app f5

Add apps/f5/src/environments/one-word-story.ts and apps/f5/src/one-word-story-index.html

update build to match this angular.json snippet

   "f5": {
      "root": "apps/f5",
      "sourceRoot": "apps/f5/src",
      "projectType": "application",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/web:build",
          "options": {
            "outputPath": "dist/apps/f5",
            "index": "apps/f5/src/index.html",
            "main": "apps/f5/src/main.tsx",
            "polyfills": "apps/f5/src/polyfills.ts",
            "tsConfig": "apps/f5/tsconfig.app.json",
            "assets": ["apps/f5/src/favicon.ico", "apps/f5/src/assets"],
            "styles": ["apps/f5/src/styles.scss"],
            "scripts": [],
            "webpackConfig": "@nrwl/react/plugins/webpack"
          },
          "configurations": {
            "one-word-story": {
              "outputPath": "dist/apps/one-word-story",
              "fileReplacements": [
                {
                  "replace": "apps/f5/src/environments/environment.ts",
                  "with": "apps/f5/src/environments/one-word-story.ts"
                },
                {
                  "replace": "apps/f5/src/index.html",
                  "with": "apps/f5/src/one-word-story-index.html"
                },
             ]
           }
         }
       }
     }

nx run f5:build:one-word-story

If you can provide steps to reproduce from scratch, that would be enormously appreciated (i.e. where the first step is npx create-nx-workspace@latest repro-workspace)

Context

My use case is I’d like to generate different bundles for different customers without having to create a project for each customer. The differences between each customer’s site is just index.ts, favicon.ico, and environment.ts.

Please provide any relevant information about your setup:

  @nrwl/cli : 8.11.2

Failure Logs

Not sure where to find these.

Other

Thanks for the great tool.

[xiongemi]

to replace index.html, i got it work this way:

 "configurations": {
            "production": {
              "index": "<path to index.prod.html>",

[Stupidism]

I encountered this problem, too. I had a prod.ico and wanted to replace favicon.ico in production like this:

"fileReplacements": [
                {
                  "replace": "apps/storage-ui/src/assets/favicon.ico",
                  "with": "apps/storage-ui/src/assets/prod.ico"
                },
...

Of course it didn’t work. I think it’s because the assets folder is overwritten again by the assets option. like this issue described

Here’s my workaround for replacing favicon:

add another production folder inside assets folder and rename my prod.ico as production/favicon.ico

"production": {
              "assets": [
                {
                  "input": "apps/storage-ui/src/assets/production",
                  "glob": "**/*.{css,ico}",
                  "output": "assets"
                }
              ],
}