How to hack existing apps: Put deck from git in apps folder but it doesn't load

I’m interested in tinkering with apps, in particular, right now, I am interested in modifying the Deck app. To try to do this, I created a local Netcloud server installation on my local which works fine. This is installed in /var/www/nextcloud, running under apache. I tried the dev server but it was unbearably slow, so I had to do a proper installation locally. I’m using the master branch as the Deck from git requires a minimum of version 25 to work.

I then cloned the Deck app and ran make install-deps. I then rsynced the deck app to the Nextcloud apps directory /var/www/nextcloud/apps, and because the web directory must be owned by www-data, changed ownership like this:

rsync -a --delete /home/<redacted>/src/deck  /var/www/nextcloud/apps

chown -R www-data:www-data /var/www/nextcloud/apps/deck

I then restarted apache, went to apps and enabled the app, which had sucessfully appeared in the list of apps. The Deck app was now available in the menu. However, when I click on the app, the page changes but nothing ever loads in the area under the menu.

I assume therefore that there is some missing step in the process, my gues is a step to install database tables related to the app. I looked in the documentation, butI could only find descriptions of database migrations for apps, not the initial creation for a new app.

Can anyone tell me what I’m missing and how to do it?

1 Like

Did you run make build?

Thanks, I didn’t, and it solves the problem, well, after manually installing all the npm dependencies which aren’t listed in the instructions. For other’s benefit, these dependencies are:

npm install vue-loader
npm install node-polyfill-webpack-plugin
npm install terser-webpack-plugin
npm install webpack
npm install babel
npm install babel-loader
npm install @babel/plugin-syntax-dynamic-import
npm install @babel/preset-env
npm install ical.js
npm install css-loader
npm install sass-loader
npm install sass

Happy hacking :v:

make build removes the node_modules folder and does a fresh installation of all dependencies. It’s not required to install any other npm package.

Will I kept hitting errors like

/usr/share/nodejs/webpack/node_modules/webpack-cli/bin/cli.js:93
				throw err;
				^

Error: Cannot find module 'vue-loader'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
<snip>

and information like this:

npm WARN @nextcloud/babel-config@1.0.0 requires a peer of @babel/plugin-proposal-class-properties@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/babel-config@1.0.0 requires a peer of @babel/plugin-syntax-dynamic-import@^7.8.3 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/babel-config@1.0.0 requires a peer of @babel/plugin-transform-modules-commonjs@^7.13.8 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/babel-config@1.0.0 requires a peer of @babel/plugin-transform-shorthand-properties@^7.12.13 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/babel-config@1.0.0 requires a peer of @babel/preset-env@^7.13.12 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/calendar-js@3.0.0 requires a peer of ical.js@^1.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of @babel/eslint-parser@^7.16.5 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of @nextcloud/eslint-plugin@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint@^8.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-config-standard@^17.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-plugin-import@^2.25.4 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-plugin-jsdoc@^39.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-plugin-node@^11.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-plugin-promise@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of eslint-plugin-vue@^8.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/eslint-config@8.0.0 requires a peer of webpack@^5.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/stylelint-config@2.1.2 requires a peer of stylelint@^14.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/stylelint-config@2.1.2 requires a peer of stylelint-config-recommended-scss@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/stylelint-config@2.1.2 requires a peer of stylelint-config-recommended-vue@^1.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/vue-dashboard@2.0.1 requires a peer of @nextcloud/vue@^3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of babel-loader@^8.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of css-loader@^6.5.1 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of node-polyfill-webpack-plugin@2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of sass@^1.47.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of sass-loader@^13.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of webpack@^5.66.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of webpack-cli@^4.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN @nextcloud/webpack-vue-config@5.2.1 requires a peer of webpack-dev-server@^4.7.2 but none is installed. You must install peer dependencies yourself.
npm WARN @relative-ci/agent@3.1.3 requires a peer of webpack@^4.0.0 || ^5.0.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN linkifyjs@2.1.9 requires a peer of jquery@>= 1.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN linkifyjs@2.1.9 requires a peer of react@>= 0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN linkifyjs@2.1.9 requires a peer of react-dom@>= 0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN nextcloud-vue-collections@0.10.0 requires a peer of @nextcloud/vue@^3.10.2 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@3.3.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-jest@3.0.7 requires a peer of babel-core@^6.25.0 || ^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@15.9.8 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@15.9.8 requires a peer of webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0 but none is installed. You must install peer dependencies yourself.

All of which has gone away after installing all those deps manually.

When do you get this error?

when running make build, I still have the full terminal session open.

Thanks :+1:

A)

This looks weird. Having a global webpack installation is not recommended: https://webpack.js.org/guides/installation/#global-installation

B)

webpack is a peer dependency. Are you already on npm 7? Because peer dependencies are not installed automatically with npm 6. That’s indeed a requirement we don’t list in readme.

cc @juliushaertl

I get this:

$ npm --version
6.14.4

FYI I am a complete beginner in php, some experience of web development generally, but very experienced in OOP in other languages such as python and C++. As a first step to guage the investment needed to work on this and learn more about web and php development I wanted to see if I could follow the instructions and get this first step working.

When you take a look in the package.json file, you see that you need to use Node14 and NPM 7:

I just tried it with the setup mentioned above and it correctly installed all dependencies and build the app.

1 Like

ok, due to my inexperience, I didn’t know to look in such a file for that info, so thanks for the tip.

I’m not even sure if you do find the engines key in all package.json files ;-). But most of the time when dealing with nextcloud it’s Node14 and NPM7 as far as I can tell.
I guess that’s what @kesselb wants to say: The requirement of Node14 and NPM 7 should be stated in the READEME file.