react start cannot find files in public folder - node.js

When running npm start, my code shows a blank page, without favicon either, and the browse console shows
Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/bundle.js”. bundle.js:23:1
Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/0.chunk.js”. bundle.js:23:1
Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/main.chunk.js”. bundle.js:23:1
If it helps debugging, my code works previously, but after npm audit, my package.json changed
- "react-scripts": "3.4.1"
+ "react-scripts": "^3.4.3"
My package.json
{
"name": "short_text_understand",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
"eject": "react-scripts eject",
"lint": "eslint .",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:5000",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"gh-pages": "^3.1.0",
"prettier": "^2.0.5"
}
}
Structure of source is
.
├── Dockerfile
├── LICENSE
├── README.md
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
├── package-lock.json
├── package.json
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   └── site.webmanifest
├── src
│   ├── index.js
│   ├── normalize.css
│   ├── skeleton.css
│   └── style.css
└── src_python
├── Dockerfile
├── __pycache__
What I do not understand is why the bundle.js disappears, and why my favicon is not loaded, even though I did not move the public folder, and things worked before.
I am totally new in this, please tell if you need any other information

If you are using create react app to generate application then follow the instructions given in this link
https://create-react-app.dev/docs/using-the-public-folder/

The reason was because I used ublock (not ublock origin). Note that this is not the of the shelf version, as I selected all the black list

Related

npm peer dependencies not being enforced

I am trying to understand peer dependencies in npm, and could not understand the behavior below.
I have the following versions of node and npm :
$ npm -v
8.15.0
$ node -v
v16.17.0
The following directory structure:
peer-dep-test$ tree -I "node_modules"
.
├── library
│ ├── package-lock.json
│ └── package.json
└── project
├── package-lock.json
└── package.json
Library contains the following imports (#altostra/type-validations is used as an example small package here):
{
"name": "library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"peerDependencies": {
"#altostra/type-validations": "2.6.5"
}
}
and project contains the following:
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"#altostra/type-validations": "1.0.2",
"library": "file:../library"
}
}
The project project has a version of #altostra/type-validations which should be incompatible with library - but I get no error on doing npm install. npm list gives the following output:
peer-dep-test/project$ npm list --all
project#1.0.0 peer-dep-test/project
├─┬ #altostra/type-validations#1.0.2
│ └─┬ #reactivex/ix-es2015-cjs#3.0.2
│ ├── #types/node#13.13.52
│ └── tslib#1.14.1
└─┬ library#1.0.0 -> ./../library
└─┬ #altostra/type-validations#2.6.5
└─┬ #reactivex/ix-es2015-cjs#3.0.2
├── #types/node#13.13.52
└── tslib#1.14.1
As per my understanding of peer dependencies,
library should expect #altostra/type-validations#2.6.5 to be installed directly in project
#altostra/type-validations#1.0.2 should conflict with the peerDependency of library, and either warn or error.
Am I missing something here?

Vue packages version mismatch: why does #nuxt/vue-renderer 2.15.8 install vue-server-renderer#2.7.10?

I have a packages version mismatch that I don't understand how to fix.
When I do:
rm -rf node_modules package-lock.json
npm install
npm run dev
I'm getting the following error:
╭────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: │
│ │
│ Vue packages version mismatch: │
│ │
│ - vue#2.6.14 │
│ - vue-server-renderer#2.7.10 │
│ │
│ This may cause things to work incorrectly. Make sure to use the same version for both. │
│ │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
So, I checked what was installing vue-server-renderer#2.7.10 using npm-tree, and I'm getting this dependencies tree:
├─┬ nuxt 2.15.8
│ └─┬ #nuxt/vue-renderer 2.15.8
│ ├── vue-server-renderer 2.7.10
Why would #nuxt/vue-renderer install vue-server-renderer 2.7.10 instead of 2.15.8 ?
And how can I fix it ?
package.json:
{
"name": "my project",
"version": "1.3.0",
"description": "my project description",
"author": "John",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js"
},
"dependencies": {
"#nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/markdownit": "^2.0.0",
"#nuxtjs/proxy": "^2.1.0",
"core-js": "^3.25.2",
"echarts": "^5.3.3",
"jshint": "^2.13.5",
"lodash": "^4.17.21",
"nuxt": "^2.15.8",
"nuxt-highlightjs": "^1.0.3",
"nuxt-leaflet": "^0.0.27",
"vue-echarts": "^6.2.3",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/composition-api": "^0.32.0",
"#nuxtjs/date-fns": "^1.5.0",
"#nuxtjs/vuetify": "^1.12.3",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
"prettier": "^2.7.1"
}
}

Vue.js - ERROR in Conflict: Multiple assets emit different content to the same filename index.html

if I create a new vue.js project on my macbook and compile it with "npm run serve", I get the following error. I haven't changed any file since creating it.
markus#Markuss-MBP meinerstesprojekt % npm run serve
> meinerstesprojekt#0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 6:12:51 PM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(true)
}
}
package.json
{
"name": "meinerstesprojekt",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "^5.0.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
npm version: 8.5.3
Node-Version: v16.14.0
Vue-Version: #vue/cli 5.0.1
The following folders are in the path:
├── README.md
├── babel.config.js
├── dist
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js
Do you know why this doesn't work? Unfortunately, I couldn't find the solution by searching the web
i was having this issue because of the path to the project was having spaces in the folders name
so i renamed the paths to the project and it works
Example
from user/some path here/your-project-name
to user/somePathHere/your-project-name
and everything starts to work.
Solution:
Step 1: Rename index.html to index.ejs;
Step 2: Add html: { template: './src/index.ejs' } to node_nodules/webpack/bin/webpack.js
The reason for the error may be: When the scaffolding was used to create a project, the names of multiple files were duplicated.
When you hit vue create your-project-name Select ([Vue 3] babel,eslint)
and try to npm run serve.
And also you can use vue ui to start a new project or import old one, and see everything about your project run in a GUI in your browser so you can figure out any problem.

Yarn uses wrong dependecy

Since I've updated to yarn berry via: yarn set version berry I cannot run my project, the dependency tree is somehow broken. For ease I've provided examples for react-router but this happends with other packages too.
I have a monorepo with this structure:
/
|- .yarn
|- node_modules
|- common/
|- backoffice/
|- frontoffice/
|- test
|- .yarnrc.yml
|- package.json
|- lerna.json
frontoffice and backoffice are react apps. While common have the shared interfaces and components.
backoffice depends on react-router#5 and is writtenn in typescript while the frontoffice depends on react-router#6-beta and is ES5.
When I try to start the backoffice or the frontoffice I have the errors:
$ cd packages/frontoffice
$ yarn start
Failed to compile.
Attempted import error: 'Redirect' is not exported from 'react-router'.
In fact the backoffice is using react-router#v6 and frontoffice is using react-router#5
when I try to start the backoffice I get the error:
Type '{ path: any; render: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; childr
en: Requireable<...>; element: Requireable<...>; path: Requireable<...>; }>, never> & Pick<...>'.
Property 'render' does not exist on type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; children: Requireable<...>; element: Require
able<...>; path: Requireable<...>; }>, never> & Pick<...>'. TS2322
Also the IDE is highlighting the code, with errors everywhere on all packages.
I've run the lerna why command and to me everything seems fine:
$ yarn why react
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react#npm:17.0.1 (via npm:17.0.1)
│
└─ react-dragscroll#npm:2.0.1
└─ react#npm:16.14.0 (via npm:^16.1.1)
$ yarn why react-router
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
│
├─ react-router-dom#npm:5.3.0
│ └─ react-router#npm:5.2.1 (via npm:5.2.1)
│
├─ react-router-dom#npm:6.0.0-beta.0
│ └─ react-router#npm:6.0.0-beta.0 (via npm:6.0.0-beta.0)
│
├─ react-router-dom#npm:5.3.0 [1602b]
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
└─ react-router-dom#npm:6.0.0-beta.0 [46813]
└─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$ yarn why react-router-dom
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
└─ #mymonorepo/frontoffice#workspace:packages/frontoffice
└─ react-router-dom#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$
Did I forget something to configure? Is there a way to force the right version for each package?
the nodeLinker option in .yarnrc.yml is set to node-modules
the pakage.json are the following:
/package.json
{
"name": "mymonorepo",
"version": "0.1.0",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
},
"resolutions": {
"graphql": "^15.3.0"
},
"devDependencies": {
"husky": "^4.3.8",
"lerna": "^3.22.1",
"lint-staged": "^10.5.3"
},
"packageManager": "yarn#3.2.0"
}
/backoffice/package.json
{
"name": "#mymonorepo/backoffice",
"version": "3.0.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.8",
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
...
"react": "^17.0.0",
"react-admin": "^3.19.7",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"recharts": "^1.8.5",
"redux-saga": "^1.0.0"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "node ./build.js",
"eject": "react-scripts test"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"#types/classnames": "^2.3.1",
"#types/fetch-mock": "^7.3.2",
"#types/jest": "^26.0.19",
"#types/node": "^12.12.14",
"#types/query-string": "5.1.0",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.2.0",
"#types/react-router-dom": "^5.2.0",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.4.0"
}
}
/frontoffice/package.json
{
"name": "#mymonorepo/frontoffice",
"version": "2.1.0",
"dependencies": {
"#apollo/client": "^3.1.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
...
"react": "17.0.1",
"react-compound-timer": "^1.1.15",
"react-content-loader": "^5.1.4",
"react-custom-scrollbars-2": "^4.3.0",
"react-detect-offline": "^2.4.0",
"react-device-detect": "^1.6.2",
"react-dom": "17.0.1",
"react-fullscreen-image": "^0.0.3",
"react-gtm-module": "^2.0.8",
"react-helmet": "^6.1.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-router-hash-link": "^2.0.0",
"react-router-modal": "^2.0.0-rc3",
"react-scripts": "^4.0.1",
"react-scroll-trigger": "^0.6.6",
"react-share": "^4.2.1",
"react-show-more-text": "^1.4.6",
"react-ticker": "^1.2.2",
"react-use-dimensions": "^1.2.1",
"react-window": "^1.8.6",
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts --max_old_space_size=4096 build --silent",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"depcheck": "^1.3.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}

Setting correct paths when configuring http server with npm and grunt for OpenUI5

I'm trying to setup an http server with node.js for using OpenUI5. My trials are based on the article found at
https://www.newventuresoftware.com/blog/developing-sapui5-applications-with-visual-studio-code
My problem is to correctly set the paths in the different files involved.
When executing
npm run start
in directory
/var/www/html/p1
the following error message appears in the browsers console:
2019-01-25 12:54:44 Device API logging initialized - DEVICE Device.js:85:22
2019-01-25 12:54:44.940000 Changing log level to DEBUG - sap.base.log Log.js:412:41
2019-01-25 12:54:44.940000 SAP Logger started. - Log.js:412:41
2019-01-25 12:54:44.941000 URL prefixes set to: - sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:44.941000 (default) : node_modules/#openui5/sap.ui.core/src/ - sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:44.941000 'myapp' : ./ - sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:45.333000 Creating Core - sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.338000 theme = sap_belize - Log.js:412:41
2019-01-25 12:54:45.338000 modules = sap.m.library - Log.js:412:41
2019-01-25 12:54:45.338000 bindingSyntax = complex - Log.js:412:41
2019-01-25 12:54:45.338000 frameOptions = allow - Log.js:412:41
2019-01-25 12:54:45.338000 xx-supportedLanguages = - Log.js:412:41
2019-01-25 12:54:45.338000 xx-fiori2Adaptation = false - Log.js:412:41
2019-01-25 12:54:45.340000 Declared modules: sap.ui.core.library,sap.m.library - sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Declared theme sap_belize - sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Content direction set to 'ltr' - sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Browser-Id: ff64 - sap.ui.core.Core Log.js:413:43
2019-01-25 12:54:45.341000 Sync point 'UI5 Document Ready' created - Log.js:412:41
2019-01-25 12:54:45.341000 Sync point 'UI5 Core Preloads and Bootstrap Script' created - Log.js:412:41
2019-01-25 12:54:45.342000 Sync point 'UI5 Core Preloads and Bootstrap Script' finished (tasks:2, open:0, failures:0) - Log.js:412:41
2019-01-25 12:54:45.343000 Modules and libraries declared via bootstrap-configuration are loaded synchronously. Set preload configuration to 'async' or switch to asynchronous bootstrap to prevent these requests. - SyncXHR Log.js:411:29
2019-01-25 12:54:45.347000 Analyzing Library sap.ui.core - sap.ui.core.Core.initLibrary() Log.js:413:43
2019-01-25 12:54:45.350000 Including node_modules/#openui5/sap.ui.core/src/sap/ui/core/themes/sap_belize/library.css - sap.ui.core.Core.includeLibraryTheme() - Log.js:412:41
Error: failed to load 'sap/m/library.js' from node_modules/#openui5/sap.ui.core/src/sap/m/library.js: 404 - Not Found
The file not found is located at
./node_modules/#openui5/sap.m/src/sap/m/library.js
directory tree:
/var/www/html/p1/
├── Gruntfile.js
├── index.html
├── node_modules
│   ├── abbrev
...
│   ├── #openui5
│   │   ├── sap.m
│   │   ├── sap.ui.core
│   │   ├── sap.ui.layout
│   │   ├── sap.ui.unified
│   │   └── themelib_sap_belize
...
│   └── yargs
│   ├── CHANGELOG.md
│   ├── completion.sh.hbs
│   ├── index.js
│   ├── lib
│   ├── LICENSE
│   ├── node_modules
│   ├── package.json
│   └── README.md
├── package.json
└── package-lock.json
404 directories, 1762 files
package.json:
{
"name": "P1",
"version": "1.0.0",
"private": true,
"description": "",
"dependencies": {
"#openui5/sap.m": "^1.60.0",
"#openui5/sap.ui.core": "^1.60.0",
"#openui5/sap.ui.layout": "^1.60.0",
"#openui5/themelib_sap_belize": "^1.60.0"
},
"devDependencies": {
"grunt": "^1.0.2",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-openui5": "^0.13.0"
},
"scripts": {
"start": "grunt serve",
"build": "grunt build"
},
"author": "",
"license": "ISC"
}
Gruntfile.js:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
connect: {
options: {
port: 8080,
hostname: '*'
},
src: {},
dist: {}
},
openui5_connect: {
options: {
resources: [
'node_modules/#openui5',
],
testresources: [
'node_modules/#openui5',
]
},
src: {
options: {
appresources: '.'
}
},
dist: {
options: {
appresources: '.'
}
}
},
openui5_preload: {
component: {
options: {
resources: {
cwd: 'node_modules/#openui5',
prefix: 'myapp',
src: [
'**/*.js',
'**/*.fragment.html',
'**/*.fragment.json',
'**/*.fragment.xml',
'**/*.view.html',
'**/*.view.json',
'**/*.view.xml',
'**/*.properties',
'manifest.json',
'!test/**'
]
},
dest: 'dist'
},
components: true
}
},
clean: {
dist: 'dist',
coverage: 'coverage'
},
copy: {
dist: {
files: [ {
expand: true,
cwd: '.',
src: [
'**',
'!test/**'
],
dest: 'dist'
} ]
}
},
eslint: {
webapp: ['.']
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-openui5');
// Server task
grunt.registerTask('serve', function(target) {
grunt.task.run('openui5_connect:' + (target || 'src') + ':keepalive');
});
// Build task
grunt.registerTask('build', ['clean:dist', 'openui5_preload', 'copy']);
// Default task
grunt.registerTask('default', ['serve']);
};
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>My Hello World App</title>
<script src="node_modules/#openui5/sap.ui.core/src/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"myapp": "./"}'>
</script>
</head>
<body class="sapUiBody" id="content">
Hallo
</body>
</html>
What changes are necessary to make the server find the file
library.js
in the current directory layout?
Is there any hard reason that you are still using grunt and not the new UI5 Build Tooling?
Just take a look at the Openui5 Sample App how to use it.
In your case you should put the index.html into the webapp folder, set the the bootstrapping to
<script src="resources/sap-ui-core.js"
and use the following package.json
{
"name": "P1",
"version": "1.0.0",
"private": true,
"description": "",
"dependencies": {
"#openui5/sap.m": "^1.60.0",
"#openui5/sap.ui.core": "^1.60.0",
"#openui5/sap.ui.layout": "^1.60.0",
"#openui5/themelib_sap_belize": "^1.60.0"
},
"devDependencies": {
"#ui5/cli": "^1.0.0",
"eslint": "^4.19.1",
"karma": "^3.1.3",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-openui5": "^0.2.3",
"karma-qunit": "^1.2.1",
"qunitjs": "^2.4.1",
"rimraf": "^2.6.2",
"start-server-and-test": "^1.4.1"
},
"scripts": {
"start": "ui5 serve",
"lint": "eslint webapp",
"karma": "karma start",
"karma-ci": "karma start karma-ci.conf.js",
"watch": "start-server-and-test start http://localhost:8080 karma",
"test": "npm run lint && rimraf coverage && start-server-and-test start http://localhost:8080 karma-ci",
"build": "rimraf dist && ui5 build --a"
},
"author": "",
"license": "ISC"
}
then run npm install and after that ui5 init once.
After that start your app with npm start
If you really want to stick with grunt, checkout the
legacy-grunt-and-bower-setup branch of the Openui5 Sample App and use the Gruntfile/bower.json/package.json from here.

Resources