Document steps needed to build from git

[devvmh]

Description

I installed this app today on Nextcloud 24 via git clone into my apps directory. I needed to run git checkout stable-0.9.x to get the app to install. Once I did so, I was able to use the Teifun2 android app to access and create recipes.

However, when I visit the cookbook app in the web interface, I get a white screen of death. The error message in the browser Javascript console says:

GET https://nextcloud.devinhoward.ca/apps/cookbook/js/cookbook-main.js?v=f72e17f2-0 404
nextcloud.devinhoward.ca/:451 Refused to execute script from 'https://nextcloud.devinhoward.ca/apps/cookbook/js/cookbook-main.js?v=f72e17f2-0' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Reproduction Steps to reproduce the behavior:

1. Install cookbook stable-0.9.x
2. Visit /index.php/apps/cookbook/ in the web UI.

Expected behavior See the recipes UI

Actual behavior White screen of death

Screenshots

Browser I can reproduce this error in Firefox, Chromium, Opera, and Brave.

Versions Nextcloud server version: 24.0.9 RC1 Cookbook version: stable-0.9.x Database system: MariaDB My nginx config: https://pastebin.com/n1b04jQb

[MarcelRobitaille]

When you do git clone of this repository, you only download the source javascript files. These need to be bundled into main.js and guest.js. From your description, it looks like you haven't done this. Please run npm install and npm run build in the folder you cloned.

[devvmh]

Ah! Thanks for the tip. Documenting my steps here...

I tried nvm use node which installed 19, but it didn't install. Then I did nvm use 16 and I got most things working except

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@nextcloud/[email protected]',
npm WARN EBADENGINE   required: { node: '^14.0.0', npm: '^7.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
npm WARN EBADENGINE }

(I tried nvm 14 as well but 16 seems more successful with fewer manual steps, so documenting 16 here).

After removing node_modules, I ran npm install https://github.com/nextcloud/nextcloud-vue.git. This gave me one more error which I didn't try to fix:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@skjnldsv/[email protected]',
npm WARN EBADENGINE   required: { node: '^14.0.0', npm: '^7.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
npm WARN EBADENGINE }

My next attempt to build gave me

Error: Cannot find module '@nextcloud/browserslist-config'

fixed by npm install @nextcloud/browserslist-config. My next invocation got a lot further along but still ended with 28 errors. Truncated output is:

...
Module not found: Error: Can't resolve '@nextcloud/vue/dist/Components/Modal' in '/var/www/nextcloud/apps/cookbook/src/components'
...
Module not found: Error: Can't resolve '@nextcloud/vue/dist/Components/Button' in '/var/www/nextcloud/apps/cookbook/src/components'
...
28 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
 
webpack 5.75.0 compiled with 28 errors in 18009 ms

Full output at https://pastebin.com/VWTzH0VN

Can you help me with a few questions?

1. Any ideas what I'm doing wrong for the JS build above?
2. Is there a better way for me to install than via git? i.e. how do most people install?
3. I'm thinking of making a PR to add some hints about installation ("Normal people do X to install, try that first. If you install via git, run npm install / npm run build...") to the README. Is that a good place? Or should I create an INSTALLING.md and link from README? Other thoughts?

Thanks!

[devvmh]

OK, I deleted the git repo entirely and download/enabled the app through the web UI. Much simpler! Still, I'd love to get the git-based version working if possible!

[MarcelRobitaille]

I use node 16.14.2. Make sure you do rm -rf node_modules && npm install after changing node versions.

Still, I'd love to get the git-based version working if possible!

Why? Would you like to develop / contribute? There is a guide on setting up the development environment.

[christianlupus]

I just saw that there are some flaws in the documentation but these are only for special cases relevant.

[devvmh]

Why? Would you like to develop / contribute?

I manage my nextcloud install via git, and hence most of the apps are also managed via git. It'll be a bit weird to manage this one with another workflow.

[christianlupus]

I try to give you a short advice here.

I tried nvm use node which installed 19, but it didn't install. Then I did nvm use 16 and I got most things working except

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@nextcloud/[email protected]',
npm WARN EBADENGINE   required: { node: '^14.0.0', npm: '^7.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
npm WARN EBADENGINE }

This is just a warning. All right. I get it as well. Should work though.

(I tried nvm 14 as well but 16 seems more successful with fewer manual steps, so documenting 16 here).

After removing node_modules, I ran npm install https://github.com/nextcloud/nextcloud-vue.git. This gave me one more error which I didn't try to fix:

No, this will change the version installed of the dependency. You do not want to do that. Especially for the 0.9.x branch.

It should be sufficient to run npm ci. This will install the current packages of the branch.

fixed by npm install @nextcloud/browserslist-config. My next invocation got a lot further along but still ended with 28 errors. Truncated output is:

...

This was due to your accidental upgrade of the Vue package.

Can you help me with a few questions?

1. Any ideas what I'm doing wrong for the JS build above?

See my answers above. Just install with npm ci or npm i if it was required. Do not change the versions if you do not attempt to upgrade the dependencies.

2. Is there a better way for me to install than via git? i.e. how do most people install?

Most people are users and install from the app store. If you want to develop, the way to go is the gut repo. Then you need to set up your environment and get a different installation. This will not be usable for production. There is the chance to install a version from GitHub as each version committed and pushed will be built automatically. This is mainly for debugging.

3. I'm thinking of making a PR to add some hints about installation ("Normal people do X to install, try that first. If you install via git, run npm install / npm run build...") to the README. Is that a good place? Or should I create an INSTALLING.md and link from README? Other thoughts?

There is already a documentation in place. The range should not contain this. We could add a hint to a contributing file. I think this can be done with the upgrade in the den environment (#1426).