nextcloud / app-tutorial

Tutorial app which is built in the tutorial

Nextcloud App Tutorial

This is the tutorial app which shows how to develop a very simple notes app.

Try it

To install it change into your Nextcloud's apps directory:

cd nextcloud/apps

Then clone this repository into a folder named notestutorial¹:

git clone https://github.com/nextcloud/app-tutorial.git notestutorial

Then install the dependencies using:

make composer

¹ It is important that the directory is named exactly like the app ID (see appinfo/info.xml).

Frontend development

The app tutorial also shows the very basic implementation of an app frontend using Vue.js. To build the frontend code after doing changes to its source in src/ requires to have Node and npm installed.

• 👩‍💻 Run make dev-setup to install the frontend dependencies
• 🏗 To build the Javascript whenever you make changes, run make build-js

To continuously run the build when editing source files you can make use of the make watch-js command.

app-tutorial's Issues

How to get updated .js files (browser cache question)

Hey There,

didnt know exactly where to put this question, but its related to this tutorial as i used this as a basis to start developing a nextcloud app..

After several changes and versions of the app, i often have the problem that webclients dont get the updated .js files..

lets say i have an additional js file: <script src="/nextcloud/apps/notestutorial/js/notestutorial2.js"></script>

Usually there is the way to add the following in the html header, e.g.:
<script src="/nextcloud/apps/notestutorial/js/notestutorial2.js?v=2019090212345"></script>

This "should" act as some kind of cachebuster to force the client to load the newest .js files from the server.. But that style is not supported with the nextcloud app framework.

Here is the way this is declared in Nextcloud App Framework main.php:

<?php
script('notestutorial', 'notestutorial');
script('notestutorial', 'notestutorial2');
?>

How can i achieve my goal to let the users get the updated js files (and html..) after the nextcloud app was updated via increasing the version number in info.xml?

I'm thankful for any hint :-)

Migration not working

Depending on the exexcution method with full 'Version'-Classname or without, its either

php ./occ migrations:execute notestutorial Version000000Date20181013124731

In MigrationService.php line 396:

Version Version000000Date20181013124731 is unknown.

In MigrationService.php line 458:

Migration step 'OCA\NotesTutorial\Migration\Version000000Date20181013124731' is unknown

Delete button doesn't work on NC13

Delete button doesn't work on NC13

If you could repear this it would be cool :)

Best regards

node-sass is deprecated

from https://www.npmjs.com/package/node-sass:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

Wrong Link in README.md

The link to the according docs Page doesn't work.

https://docs.nextcloud.com/server/latest/developer_manual/app/tutorial.html
has to be changed into:
https://docs.nextcloud.com/server/13.0.0/developer_manual/app/tutorial.html

make composer fails

when executing make composer I get

No composer command available, downloading a copy from the web
mkdir -p 
mkdir: missing operand
Try 'mkdir --help' for more information.
Makefile:16: recipe for target 'composer' failed
make: *** [composer] Error 1

make dev-setup fail

as per readme, tried make dev-setup

me@VPS1:/var/www/html/nextcloud/apps/notestutorial$ make dev-setup                                                               
rm -rf js/*                                                                                                                           
rm: cannot remove 'js/notestutorial-main.js': Permission denied                                                                       
rm: cannot remove 'js/notestutorial-main.js.map': Permission denied                                                                   
make: *** [Makefile:60: clean] Error 1                                                                                                

so tried sudo

was8309@VPS1:/var/www/html/nextcloud/apps/notestutorial$ sudo make dev-setup                                                          
rm -rf js/*                                                                                                                           
rm -rf node_modules                                                                                                                   
No composer command available, downloading a copy from the web                                                                        
mkdir -p /var/www/html/nextcloud/apps/notestutorial/build/tools                                                                       
curl -sS https://getcomposer.org/installer | php                                                                                      
All settings correct for using Composer                                                                                               
Downloading...                                                                                                                        
                                                                                                                                      
Composer (version 1.10.10) successfully installed to: /var/www/html/nextcloud/apps/notestutorial/composer.phar                        
Use it: php composer.phar                                                                                                             
                                                                                                                                      
mv composer.phar /var/www/html/nextcloud/apps/notestutorial/build/tools                                                               
php /var/www/html/nextcloud/apps/notestutorial/build/tools/composer.phar install --prefer-dist                                        
Do not run Composer as root/super user! See https://getcomposer.org/root for details                                                  
Loading composer repositories with package information                                                                                
Installing dependencies (including require-dev) from lock file                                                                        
Nothing to install or update                                                                                                          
Package phpunit/php-token-stream is abandoned, you should avoid using it. No replacement was suggested.                               
Generating optimized autoload files                                                                                                   
21 packages you are using are looking for funding.                                                                                    
Use the `composer fund` command to find out more!                                                                                     
php /var/www/html/nextcloud/apps/notestutorial/build/tools/composer.phar update --prefer-dist                                         
Do not run Composer as root/super user! See https://getcomposer.org/root for details                                                  
Loading composer repositories with package information                                                                                
Updating dependencies (including require-dev)                                                                                         
Nothing to install or update                                                                                                          
Package phpunit/php-token-stream is abandoned, you should avoid using it. No replacement was suggested.                               
Writing lock file                                                                                                                     
Generating optimized autoload files                                                                                                   
21 packages you are using are looking for funding.                                                                                    
Use the `composer fund` command to find out more!                                                                                     
npm ci                                                                                                                                
                                                                                                                                      
> [email protected] postinstall /var/www/html/nextcloud/apps/notestutorial/node_modules/core-js                                           
> node -e "try{require('./postinstall')}catch(e){}"                                                                                   
                                                                                                                                      
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!                      
                                                                                                                                      
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:                                     
> https://opencollective.com/core-js                                                                                                  
> https://www.patreon.com/zloirock                                                                                                    
                                                                                                                                      
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)                                              
                                                                                                                                      
                                                                                                                                      
> [email protected] postinstall /var/www/html/nextcloud/apps/notestutorial/node_modules/@babel/polyfill/node_modules/core-js             
> node -e "try{require('./postinstall')}catch(e){}"                                                                                   
                                                                                                                                      
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!                      
                                                                                                                                      
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:                                     
> https://opencollective.com/core-js                                                                                                  
> https://www.patreon.com/zloirock                                                                                                    
                                                                                                                                      
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)                                              
                                                                                                                                      
                                                                                                                                      
> [email protected] postinstall /var/www/html/nextcloud/apps/notestutorial/node_modules/@nextcloud/vue/node_modules/core-js               
> node -e "try{require('./postinstall')}catch(e){}"                                                                                   
                                                                                                                                      
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!                      
                                                                                                                                      
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:                                     
> https://opencollective.com/core-js                                                                                                  
> https://www.patreon.com/zloirock                                                                                                    
                                                                                                                                      
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)                                              
                                                                                                                                      
                                                                                                                                      
> [email protected] install /var/www/html/nextcloud/apps/notestutorial/node_modules/fsevents                                            
> node-gyp rebuild                                                                                                                    
                                                                                                                                      
gyp ERR! configure error                                                                                                              
gyp ERR! stack Error: EACCES: permission denied, mkdir '/var/www/html/nextcloud/apps/notestutorial/node_modules/fsevents/build'       
gyp ERR! System Linux 5.4.0-42-generic                                                                                                
gyp ERR! command "/usr/bin/node" "/usr/bin/node-gyp" "rebuild"                                                                        
gyp ERR! cwd /var/www/html/nextcloud/apps/notestutorial/node_modules/fsevents                                                         
gyp ERR! node -v v10.19.0                                                                                                             
gyp ERR! node-gyp -v v6.1.0                                                                                                           
gyp ERR! not ok                                                                                                                       
                                                                                                                                      
> [email protected] install /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass                                          
> node scripts/install.js                                                                                                             
                                                                                                                                      
Unable to save binary /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permiss
ion denied, mkdir '/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/vendor'                                          
    at Object.mkdirSync (fs.js:757:3)                                                                                                 
    at sync (/var/www/html/nextcloud/apps/notestutorial/node_modules/mkdirp/index.js:72:13)                                           
    at Function.sync (/var/www/html/nextcloud/apps/notestutorial/node_modules/mkdirp/index.js:78:24)                                  
    at checkAndDownloadBinary (/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/scripts/install.js:114:11)           
    at Object.<anonymous> (/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/scripts/install.js:157:1)                
    at Module._compile (internal/modules/cjs/loader.js:778:30)                                                                        
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)                                                          
    at Module.load (internal/modules/cjs/loader.js:653:32)                                                                            
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)                                                                          
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)                                                                   
  errno: -13,                                                                                                                         
  syscall: 'mkdir',                                                                                                                   
  code: 'EACCES',                                                                                                                     
  path:                                                                                                                               
   '/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/vendor' }                                                       
                                                                                                                                      
> [email protected] postinstall /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass                                      
> node scripts/build.js                                                                                                               
                                                                                                                                      
Building: /usr/bin/node /var/www/html/nextcloud/apps/notestutorial/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_e
xt= --libsass_cflags= --libsass_ldflags= --libsass_library=                                                                           
gyp info it worked if it ends with ok                                                                                                 
gyp verb cli [ '/usr/bin/node',                                                                                                       
gyp verb cli   '/var/www/html/nextcloud/apps/notestutorial/node_modules/node-gyp/bin/node-gyp.js',                                    
gyp verb cli   'rebuild',                                                                                                             
gyp verb cli   '--verbose',                                                                                                           
gyp verb cli   '--libsass_ext=',                                                                                                      
gyp verb cli   '--libsass_cflags=',                                                                                                   
gyp verb cli   '--libsass_ldflags=',                                                                                                  
gyp verb cli   '--libsass_library=' ]                                                                                                 
gyp info using [email protected]                                                                                                         
gyp info using [email protected] | linux | x64                                                                                             
gyp verb command rebuild []                                                                                                           
gyp verb command clean []                                                                                                             
gyp verb clean removing "build" directory                                                                                             
gyp verb command configure []                                                                                                         
gyp verb check python checking for Python executable "python2" in the PATH                                                            
gyp verb `which` succeeded python2 /usr/bin/python2                                                                                   
gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.18                                                         
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j                                                          
gyp verb get node dir no --target version specified, falling back to host node version: 10.19.0                                       
gyp verb command install [ '10.19.0' ]                                                                                                
gyp verb install input version string "10.19.0"                                                                                       
gyp verb install installing version: 10.19.0                                                                                          
gyp verb install --ensure was passed, so won't reinstall if already installed                                                         
gyp WARN EACCES user "root" does not have permission to access the dev dir "/root/.node-gyp/10.19.0"                                  
gyp WARN EACCES attempting to reinstall using temporary dev dir "/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/.no
de-gyp"                                                                                                                               
gyp verb tmpdir == cwd automatically will remove dev files after to save disk space                                                   
gyp verb command install [ '--node_gyp_internal_noretry', '10.19.0' ]                                                                 
gyp verb install input version string "10.19.0"                                                                                       
gyp verb install installing version: 10.19.0                                                                                          
gyp verb install --ensure was passed, so won't reinstall if already installed                                                         
gyp verb install version not already installed, continuing with install 10.19.0                                                       
gyp verb ensuring nodedir is created /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/.node-gyp/10.19.0              
gyp WARN install got an error, rolling back install                                                                                   
gyp verb command remove [ '10.19.0' ]                                                                                                 
gyp verb remove using node-gyp dir: /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/.node-gyp                       
gyp verb remove removing target version: 10.19.0                                                                                      
gyp verb remove removing development files for version: 10.19.0                                                                       
gyp WARN install got an error, rolling back install                                                                                   
gyp verb command remove [ '10.19.0' ]                                                                                                 
gyp verb remove using node-gyp dir: /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/.node-gyp                       
gyp verb remove removing target version: 10.19.0                                                                                      
gyp verb remove removing development files for version: 10.19.0                                                                       
gyp ERR! configure error                                                                                                              
gyp ERR! stack Error: EACCES: permission denied, mkdir '/var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass/.node-gyp'  
gyp ERR! System Linux 5.4.0-42-generic                                                                                                
gyp ERR! command "/usr/bin/node" "/var/www/html/nextcloud/apps/notestutorial/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbo
se" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="                                                    
gyp ERR! cwd /var/www/html/nextcloud/apps/notestutorial/node_modules/node-sass                                                        
gyp ERR! node -v v10.19.0                                                                                                             
gyp ERR! node-gyp -v v3.8.0                                                                                                           
gyp ERR! not ok                                                                                                                       
Build failed with error code: 1                                                                                                       
npm ERR! code ELIFECYCLE                                                                                                              
npm ERR! errno 1                                                                                                                      
npm ERR! [email protected] postinstall: `node scripts/build.js`                                                                        
npm ERR! Exit status 1                                                                                                                
npm ERR!                                                                                                                              
npm ERR! Failed at the [email protected] postinstall script.                                                                           
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.                                    
                                                                                                                                      
npm ERR! A complete log of this run can be found in:                                                                                  
npm ERR!     /root/.npm/_logs/2020-09-07T01_33_55_880Z-debug.log                                                                      
make: *** [Makefile:29: npm-init] Error 1                                                                                             

Thanks

Confusing wording in app description!

Is it now an owncloud or nextcloud app?

the wording in the description is somewhat confusing......
regards, hitam4450

Dead tutorial link (Readme.md)

Hello,

Tutorial link doesn't work in Readme?md.

Thanks !

Template file not found: notestutorial-main

I've been trying to learn to develop a Nextcloud app. I tried to go through with the steps but on my Nextcloud 19 instance following this tutorial always results in a broken app right after the database migration. Then I tried to download the finished app from this repo, but when I import the app I get the following error:

I suspect this is because the nextcloud app generator only supporting apps up to version 15 and old apps not working on version 19. Am I doing something wrong?

Nextcloud version: 19.0.1

Eror: Could not download app notestutorial

I'm having an error when I clone this repo and enable the plugin

{
  "reqId": "-----",
  "level": 3,
  "time": "2021-03-24T12:57:20+00:00",
  "remoteAddr": "-----",
  "user": "SunnyLo",
  "app": "settings",
  "method": "POST",
  "url": "/settings/apps/enable",
  "message": {
    "Exception": "Exception",
    "Message": "Could not download app notestutorial",
    "Code": 0,
    "Trace": [
      {
        "file": "/var/www/nextcloud/apps/settings/lib/Controller/AppSettingsController.php",
        "line": 445,
        "function": "downloadApp",
        "class": "OC\\Installer",
        "type": "->",
        "args": [
          "notestutorial"
        ]
      },
      {
        "file": "/var/www/nextcloud/lib/private/AppFramework/Http/Dispatcher.php",
        "line": 218,
        "function": "enableApps",
        "class": "OCA\\Settings\\Controller\\AppSettingsController",
        "type": "->",
        "args": [
          [
            "notestutorial"
          ],
          []
        ]
      },
      {
        "file": "/var/www/nextcloud/lib/private/AppFramework/Http/Dispatcher.php",
        "line": 127,
        "function": "executeController",
        "class": "OC\\AppFramework\\Http\\Dispatcher",
        "type": "->",
        "args": [
          {
            "__class__": "OCA\\Settings\\Controller\\AppSettingsController"
          },
          "enableApps"
        ]
      },
      {
        "file": "/var/www/nextcloud/lib/private/AppFramework/App.php",
        "line": 157,
        "function": "dispatch",
        "class": "OC\\AppFramework\\Http\\Dispatcher",
        "type": "->",
        "args": [
          {
            "__class__": "OCA\\Settings\\Controller\\AppSettingsController"
          },
          "enableApps"
        ]
      },
      {
        "file": "/var/www/nextcloud/lib/private/Route/Router.php",
        "line": 302,
        "function": "main",
        "class": "OC\\AppFramework\\App",
        "type": "::",
        "args": [
          "OCA\\Settings\\Controller\\AppSettingsController",
          "enableApps",
          {
            "__class__": "OC\\AppFramework\\DependencyInjection\\DIContainer"
          },
          {
            "_route": "settings.AppSettings.enableApps"
          }
        ]
      },
      {
        "file": "/var/www/nextcloud/lib/base.php",
        "line": 993,
        "function": "match",
        "class": "OC\\Route\\Router",
        "type": "->",
        "args": [
          "/settings/apps/enable"
        ]
      },
      {
        "file": "/var/www/nextcloud/index.php",
        "line": 37,
        "function": "handleRequest",
        "class": "OC",
        "type": "::",
        "args": []
      }
    ],
    "File": "/var/www/nextcloud/lib/private/Installer.php",
    "Line": 403,
    "CustomMessage": "--"
  },
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36",
  "version": "21.0.0.18"
}

no compatible version with NC22.2.0 message

Hi,
I get this message from NC :
Nextcloud 22.2.0
A new version is available: Nextcloud 22.2.2
1 app has no compatible version for this Nextcloud version available
Apps missing compatible version
Notes Tutorial ↗

Why this?
what to do to remove this message?
Your answer is important because I'm getting the same message with an app I'm trying to develop.

Add krankerl configuration

'make test' fails out-of-the-box

After a fresh clone of the project and after running make compose, I can't get unit tests to work. Since this is my first go at building an app, I'm completely lost for what to do next.

./vendor/phpunit/phpunit/phpunit -c phpunit.xml
PHP Warning:  require_once(/var/www/nextcloud/apps/app-tutorial/tests/../../../tests/bootstrap.php): Failed to open stream: No such file or directory in /var/www/nextcloud/apps/app-tutorial/tests/bootstrap.php on line 3
PHP Fatal error:  Uncaught Error: Failed opening required '/var/www/nextcloud/apps/app-tutorial/tests/../../../tests/bootstrap.php' (include_path='.:/usr/share/php') in /var/www/nextcloud/apps/app-tutorial/tests/bootstrap.php:3
Stack trace:
#0 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/Util/FileLoader.php(66): include_once()
#1 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/Util/FileLoader.php(54): PHPUnit\Util\FileLoader::load()
#2 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/TextUI/Command.php(1126): PHPUnit\Util\FileLoader::checkAndLoad()
#3 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/TextUI/Command.php(922): PHPUnit\TextUI\Command->handleBootstrap()
#4 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/TextUI/Command.php(202): PHPUnit\TextUI\Command->handleArguments()
#5 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/src/TextUI/Command.php(194): PHPUnit\TextUI\Command->run()
#6 /var/www/nextcloud/apps/app-tutorial/vendor/phpunit/phpunit/phpunit(98): PHPUnit\TextUI\Command::main()
#7 {main}
  thrown in /var/www/nextcloud/apps/app-tutorial/tests/bootstrap.php on line 3
make: *** [Makefile:70: test] Error 255

PHP Unittests Fail

When I Clone the Repository and run the Unittests, i get the following error:

PHP Warning:  require_once(installdir/app-tutorial/tests/../../../tests/bootstrap.php): failed to open stream: No such file or directory in installdir/app-tutorial/tests/bootstrap.php on line 3
PHP Fatal error:  require_once(): Failed opening required 'installdir/app-tutorial/tests/../../../tests/bootstrap.php' (include_path='.:/usr/share/php') ininstalldir/app-tutorial/tests/bootstrap.php on line 3

Are there any prerequisites for running the Unittests?
What is going on with the Bosstrap.php? Why does it require itself but from 3 Directories up?
How Can I get the Unittests to run?

Im trying to develop a Nextcloud App and I can only run the unnitests via Github Actions, which makes debugging very tedious because I have to push every time.

This app doesn't compatible with NC14

unfortunately, I couldn't run this app with the last stable version of NextCloud

cs fixer configuration is not loaded

For me the php CS fixer template is not loaded / used because it is not named correctly.
To get it work I have to rename .php_cs.dist to .php-cs-fixer.dist.php.

Do not include js in the repository

This tutorial should be used to develop apps that will most likely not be shipped with the server. So there's no need to include the compiled js.

We should avoid including the js in the repo when possible because:

• It leads to conflicts on rebases that would otherwise be smooth.
• It requires rebuilding the js as a production build for every pull request.
• It requires additional consistency checks in ci to ensure js is updated.
• It increases the repo size significantly.

Turn this repo into a template repo

Template repos can be used to seed new repos. Seems useful here.

Only needs a setting to be toggled: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository

Id content is already used in the server template

https://github.com/nextcloud/server/blob/c10317f7f9f53a4de464915f754896eed7f1ee6c/core/templates/layout.user.php#L125 already makes use of the id content.

Make sure to have a unique id and to replace the correct dom element when mounting the vue app.

Get file owner from FileId

Hi,

My app need to get the owner of the file, how can i get it with the file id ?

I found this way but it’s deprecated :

 use OC\Files\Filesystem;
$path = Filesystem::getPath($fileid);
$info = Filesystem::getFileInfo($path);

Thanks for your help !

build-js failed due to absence of dependancies like webpack, vue-loader, etc...

I clone the repository to the NextCloud server that was configured by this link. When I Run make setup-dev all thins are ok but when I run make build-js I am encountering with this error:

webpack --node-env development --progress

sh: 1: webpack: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] dev: webpack --node-env development --progress
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/navid/.npm/_logs/2022-01-17T19_17_30_482Z-debug.log
make: *** [Makefile:36: build-js] Error 1

when I install Webpack manually many other packages raise the absence error. Is there any straightforward solution to solve this issue?

Could not download app notestutorial

not compatible with last version ??