Files & Subfolders in the Public folder are noting being served

[DavainWhite]

Current Behavior

I am unable to see files in the public folder when the app is being served or built

Expected Behavior

I should be able to see the files

Steps to Reproduce

steps 1). create nx-plus vue app named frontend 2). try to add any files or subfolders to the public folder 3). serve the app and see that they do not appear 3). build the app and see that they do not appear

angular.json { "version": 1, "projects": { "backend": { "projectType": "application", "schematics": { "@nrwl/angular:component": { "style": "scss" } }, "root": "apps/backend", "sourceRoot": "apps/backend/src", "prefix": "latestmetric-com", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/apps/backend", "index": "apps/backend/src/index.html", "main": "apps/backend/src/main.ts", "polyfills": "apps/backend/src/polyfills.ts", "tsConfig": "apps/backend/tsconfig.app.json", "aot": true, "assets": [ "apps/backend/src/favicon.ico", "apps/backend/src/assets" ], "styles": ["apps/backend/src/styles.scss"], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "apps/backend/src/environments/environment.ts", "with": "apps/backend/src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "8mb", "maximumError": "10mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "backend:build", "proxyConfig": "apps/backend/proxy.conf.json" }, "configurations": { "production": { "browserTarget": "backend:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "backend:build" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "apps/backend/tsconfig.app.json", "apps/backend/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!apps/backend/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "apps/backend/jest.config.js", "tsConfig": "apps/backend/tsconfig.spec.json", "passWithNoTests": true, "setupFile": "apps/backend/src/test-setup.ts" } } } }, "backend-e2e": { "root": "apps/backend-e2e", "sourceRoot": "apps/backend-e2e/src", "projectType": "application", "architect": { "e2e": { "builder": "@nrwl/cypress:cypress", "options": { "cypressConfig": "apps/backend-e2e/cypress.json", "tsConfig": "apps/backend-e2e/tsconfig.e2e.json", "devServerTarget": "backend:serve" }, "configurations": { "production": { "devServerTarget": "backend:serve:production" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": ["apps/backend-e2e/tsconfig.e2e.json"], "exclude": ["**/node_modules/**", "!apps/backend-e2e/**"] } } } }, "api-interfaces": { "root": "libs/api-interfaces", "sourceRoot": "libs/api-interfaces/src", "projectType": "library", "schematics": {}, "architect": { "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "libs/api-interfaces/tsconfig.lib.json", "libs/api-interfaces/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!libs/api-interfaces/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "libs/api-interfaces/jest.config.js", "tsConfig": "libs/api-interfaces/tsconfig.spec.json", "passWithNoTests": true } } } }, "graphql": { "projectType": "library", "root": "libs/graphql", "sourceRoot": "libs/graphql/src", "prefix": "latestmetric-com", "architect": { "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "libs/graphql/tsconfig.lib.json", "libs/graphql/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!libs/graphql/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "libs/graphql/jest.config.js", "tsConfig": "libs/graphql/tsconfig.spec.json", "passWithNoTests": true, "setupFile": "libs/graphql/src/test-setup.ts" } } }, "schematics": {} }, "frontend": { "projectType": "application", "root": "apps/frontend", "sourceRoot": "apps/frontend/src", "architect": { "build": { "builder": "@nx-plus/vue:browser", "options": { "dest": "dist/apps/frontend", "index": "apps/frontend/public/index.html", "main": "apps/frontend/src/main.ts", "tsConfig": "apps/frontend/tsconfig.app.json" }, "configurations": { "production": { "mode": "production", "filenameHashing": true, "productionSourceMap": true, "css": { "extract": true, "sourceMap": false } } } }, "serve": { "builder": "@nx-plus/vue:dev-server", "options": { "browserTarget": "frontend:build" }, "configurations": { "production": { "browserTarget": "frontend:build:production" } } }, "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", "config": "apps/frontend/.eslintrc", "tsConfig": [ "apps/frontend/tsconfig.app.json", "apps/frontend/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!apps/frontend/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "apps/frontend/jest.config.js", "tsConfig": "apps/frontend/tsconfig.spec.json", "passWithNoTests": true } } } }, "frontend-e2e": { "root": "apps/frontend-e2e", "sourceRoot": "apps/frontend-e2e/src", "projectType": "application", "architect": { "e2e": { "builder": "@nrwl/cypress:cypress", "options": { "cypressConfig": "apps/frontend-e2e/cypress.json", "tsConfig": "apps/frontend-e2e/tsconfig.e2e.json", "devServerTarget": "frontend:serve" }, "configurations": { "production": { "devServerTarget": "frontend:serve:production" } } }, "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", "config": "apps/frontend-e2e/.eslintrc", "tsConfig": ["apps/frontend-e2e/tsconfig.e2e.json"], "exclude": ["**/node_modules/**", "!apps/frontend-e2e/**"] } } } } }, "cli": { "defaultCollection": "@nrwl/angular" }, "schematics": { "@nrwl/angular:application": { "unitTestRunner": "jest", "e2eTestRunner": "cypress" }, "@nrwl/angular:library": { "unitTestRunner": "jest" } }, "defaultProject": "backend" }

package.json { "name": "redacted", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "nx": "nx", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "nx workspace-lint && ng lint", "e2e": "ng e2e", "affected:apps": "nx affected:apps", "affected:libs": "nx affected:libs", "affected:build": "nx affected:build", "affected:e2e": "nx affected:e2e", "affected:test": "nx affected:test", "affected:lint": "nx affected:lint", "affected:dep-graph": "nx affected:dep-graph", "affected": "nx affected", "format": "nx format:write", "format:write": "nx format:write", "format:check": "nx format:check", "update": "ng update @nrwl/workspace", "workspace-schematic": "nx workspace-schematic", "dep-graph": "nx dep-graph", "help": "nx help", "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" }, "private": true, "dependencies": { "@angular/animations": "9.1.3", "@angular/cdk": "9.2.1", "@angular/common": "9.1.3", "@angular/compiler": "9.1.3", "@angular/core": "9.1.3", "@angular/forms": "9.1.3", "@angular/platform-browser": "9.1.3", "@angular/platform-browser-dynamic": "9.1.3", "@angular/platform-server": "9.1.3", "@angular/router": "9.1.3", "@fortawesome/fontawesome-free": "5.13.0", "@jnields/vue-helmet": "^3.0.0", "@nestjs/common": "^6.8.3", "@nestjs/core": "^6.8.3", "@nestjs/platform-express": "^6.8.3", "@ng-bootstrap/ng-bootstrap": "6.1.0", "@ngrx/effects": "9.1.0", "@ngrx/entity": "9.1.0", "@ngrx/router-store": "9.1.0", "@ngrx/store": "9.1.0", "@ngrx/store-devtools": "9.1.0", "@ngx-loading-bar/core": "4.2.0", "@ngx-translate/core": "12.1.2", "@nrwl/angular": "9.3.0", "@types/lodash": "4.14.150", "angular-in-memory-web-api": "0.10.0", "apexcharts": "3.19.0", "aws-amplify": "^3.0.17", "aws-amplify-angular": "^5.0.17", "bootstrap": "4.5.0", "chart.js": "2.9.3", "chartist": "0.11.4", "classlist.js": "1.1.20150312", "clipboard": "2.0.6", "core-js": "3.6.5", "date-arithmetic": "^4.1.0", "hammerjs": "2.0.8", "highlight.js": "^9.17.1", "lodash": "4.17.15", "material-design-icons": "3.0.1", "moment": "2.24.0", "ng-apexcharts": "1.2.3", "ng-inline-svg": "10.0.0", "ngrx-store-freeze": "0.2.4", "ngx-clipboard": "13.0.0", "ngx-daterangepicker-material": "2.2.0", "ngx-highlightjs": "3.0.3", "ngx-perfect-scrollbar": "9.0.0", "ngx-permissions": "7.0.3", "object-path": "0.11.4", "popper.js": "^1.16.1", "reflect-metadata": "^0.1.13", "rxjs": "6.5.5", "smooth-scrollbar": "^8.5.2", "socicon": "3.0.5", "tooltip.js": "^1.3.3", "tslib": "1.11.1", "vue": "^2.6.11", "vue-router": "^3.2.0", "web-animations-js": "2.3.2", "zone.js": "0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.901.3", "@angular/cli": "9.1.3", "@angular/compiler-cli": "9.1.3", "@angular/language-service": "9.1.3", "@angular/material": "9.2.1", "@angular/material-moment-adapter": "9.2.1", "@nestjs/schematics": "^6.7.0", "@nestjs/testing": "^6.8.3", "@ngrx/schematics": "9.1.0", "@nrwl/cypress": "9.3.0", "@nrwl/jest": "9.3.0", "@nrwl/nest": "9.3.0", "@nrwl/node": "9.3.0", "@nrwl/workspace": "9.3.0", "@nx-plus/vue": "^0.5.0", "@types/chartist": "0.9.47", "@types/jasmine": "3.5.0", "@types/jasminewd2": "2.0.3", "@types/jest": "25.1.4", "@types/node": "12.11.1", "@types/object-path": "0.11.0", "codelyzer": "5.2.2", "css-loader": "^3.4.2", "cypress": "^4.1.0", "dotenv": "6.2.0", "eslint": "6.8.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "jest": "25.2.3", "jest-preset-angular": "8.1.2", "karma": "4.3.0", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "2.1.0", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "node-sass": "4.13.1", "prettier": "2.0.4", "protractor": "5.4.3", "ts-jest": "25.2.1", "ts-node": "8.3.0", "tslint": "6.0.0", "typescript": "3.7.5", "webpack-bundle-analyzer": "3.6.1", "webpack-cli": "3.3.11", "webpack-messages": "2.0.4", "webpack-rtl-plugin": "2.0.0", "@nrwl/eslint-plugin-nx": "9.3.0", "@typescript-eslint/parser": "2.19.2", "@typescript-eslint/eslint-plugin": "2.19.2", "eslint-config-prettier": "6.0.0", "@vue/test-utils": "1.0.0-beta.31", "babel-core": "^7.0.0-bridge.0", "jest-serializer-vue": "^2.0.2", "jest-transform-stub": "^2.0.0", "vue-jest": "^3.0.5", "@vue/cli-plugin-typescript": "~4.3.0", "@vue/cli-service": "~4.3.0", "@vue/eslint-config-typescript": "^5.0.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" } }

/public index.html `<!DOCTYPE html>

` ### Failure Logs no failure logs ### Environment Plugin name and version: "@nx-plus/vue": "^0.5.0", @nrwl/angular : 9.3.0 @nrwl/cli : 9.3.0 @nrwl/cypress : 9.3.0 @nrwl/eslint-plugin-nx : 9.3.0 @nrwl/express : Not Found @nrwl/jest : 9.3.0 @nrwl/linter : 9.3.0 @nrwl/nest : 9.3.0 @nrwl/next : Not Found @nrwl/node : 9.3.0 @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 9.3.0 @nrwl/web : Not Found @nrwl/workspace : 9.3.0 typescript : 3.7.5

[BuckyMaler]

This is working as expected for me. As you can see in the screenshot below I moved logo.png from assets/ to public/img/ and it loads. You can also see the favicon loaded in the browser tab. Make sure you're referencing images inside of public/ with absolute paths. Also, if you're using --publicPath, then you need to prepend your image paths with that. This is all explained here.

If this doesn't help, then please provide a repo with a minimal reproduction.

[DavainWhite]

@BuckyMaler I am trying to reference static files inside the index.html file in the public folder. like the favicon images and the site manifest (which are'nt being served for me).

here are some images showing the folder structure of my project as well as it being served. In the second image you can see that I am unable to directly access this image

this image shows that after building the project the referenced image in the index.html file are not saved at all

[BuckyMaler]

It seems to be working for me.

favicon-32x32.png loads:

android-icon-192x192.png loads:

All images are copied to dist/:

I used this to generate the images, but that's a moot point. Am I doing something different from you?

Please provide a reproducible example or this will be labeled as can't reproduce.

[DavainWhite]

@BuckyMaler It seems as thought the problem might have been with nx workspace v10

I recreated the repo with the npx create-nx-workspace@^9.0.0 and it suddenly started to work correctly.