Not able to set up development environment for Moodle Mobile 2

Not able to set up development environment for Moodle Mobile 2

由Sarath P發表於
Number of replies: 12
Plugin developers的相片

Hi everyone. I am trying to set up a development environment for Moodle Mobile 2. I followed the exact steps as mentioned in this page: https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2

When I run npm run setup, I am getting many errors. Please find the attachment below.

Following are the steps I did:

1. Installed Git

2. Installed chromium

3. Installed nvm setup for windows (https://github.com/coreybutler/nvm-windows/releases)

4. npm cache clean --force

5. npm install -g cordova@8.1.2 ionic

npm WARN deprecated superagent@4.1.0: Please note that v5.0.1+ of superagent removes User-Agent header by default, therefore you may need to add it yourself (e.g. GitHub blocks requests without a User-Agent header).  This notice will go away with v5.0.2+ once it is released.

C:\Program Files\nodejs\cordova -> C:\Program Files\nodejs\node_modules\cordova\bin\cordova

C:\Program Files\nodejs\ionic -> C:\Program Files\nodejs\node_modules\ionic\bin\ionic

+ ionic@5.4.6

+ cordova@8.1.2

added 834 packages from 577 contributors in 93.775s

6. npm install -g gulp

npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size

C:\Program Files\nodejs\gulp -> C:\Program Files\nodejs\node_modules\gulp\bin\gulp.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\gulp\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

7. npm install --global --production windows-build-tools (As administrator on cmd)

8. git clone https://github.com/moodlehq/moodlemobile2.git moodlemobiledirectory

9. cd moodlemobiledirectory

10. git checkout integration

11. npm run setup

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! node-sass@4.11.0 postinstall: `node scripts/build.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the node-sass@4.11.0 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!     C:\Users\sarat\AppData\Roaming\npm-cache\_logs\2019-11-21T05_16_46_759Z-debug.log

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! moodlemobile@3.8.0 setup: `npm install && npx cordova prepare && npx gulp`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the moodlemobile@3.8.0 setup 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!     C:\Users\sarat\AppData\Roaming\npm-cache\_logs\2019-11-21T05_16_46_973Z-debug.log

Thanks in Advance.

評比平均分數：Useful (1)
In reply to Sarath P

Re: Not able to set up development environment for Moodle Mobile 2

由Sarath P發表於
Plugin developers的相片
Can anyone please help me to solve this issue?
評比平均分數： -
In reply to Sarath P

Re: Not able to set up development environment for Moodle Mobile 2

由Olalekan Adeniyi發表於
Hi Sarath,

check and install the lastest npm by doing this: npm install -g npm@latest

then do this: npm rebuild node-sass

Let me know the outcome.

Regards
評比平均分數： -
In reply to Olalekan Adeniyi

Re: Not able to set up development environment for Moodle Mobile 2

由Sarath P發表於
Plugin developers的相片
Hi Olalekan,
Thanks for your response. I tried running 'npm run setup' and ended up with many errors. Then like you suggested, I installed the latest npm by :
1. npm install -g npm@latest
2. npm rebuild node-sass

The output is given below:

Output:

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>npm install -g npm@latest
npm ERR! code EEXIST
npm ERR! path C:\Program Files\nodejs\npm.cmd
npm ERR! Refusing to delete C:\Program Files\nodejs\npm.cmd: is outside C:\Program Files\nodejs\node_modules\npm and not a link
npm ERR! File exists: C:\Program Files\nodejs\npm.cmd
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\sarat\AppData\Roaming\npm-cache\_logs\2019-12-04T13_05_17_578Z-debug.log

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>npm rebuild node-sass

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>

Please find the attached log.
評比平均分數： -
In reply to Sarath P

Re: Not able to set up development environment for Moodle Mobile 2

由Gil Silva發表於
Hi, i had tons of problems setting a dev environment with moodle in the end it worked and i was able to work and deploy the app. few tips :
- Knowing or having some experience with node.js, angular and ionic will save your time.
- Most changes you need to do can be done changing only few config files. read the code and back track the variables to some sort of config.
Now to help you with your problem. the log seems self explanatory :
got it from :
https://stackoverflow.com/questions/46541371/npm-err-refusing-to-delete-code-eexist

"Delete the node_modules directory completely.
Then run npm install again."

there is this folder inside the project called node_modules try deleting it.

that second option might work also :
"cd %ProgramFiles%\nodejs
ren npm.cmd npm2.cmd
ren npm npm2
npm2 install npm@latest -g"

so that is if the npm.cmd is the problem. just find the program and rename it. and then try installing it again using "npm2 install ..."
評比平均分數： -
In reply to Gil Silva

Re: Not able to set up development environment for Moodle Mobile 2

由Sarath P發表於
Plugin developers的相片
Hi Silva. Thanks for your response.
1. I removed node_modules and renamed npm.cmd to npm2.cmd.
2. I had to change the npx.cmd and npx to npx2.cmd and npx2 also.
After performing the above steps I run 'npm install -g npm@latest'

Please find the output below :

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>npm install -g npm@latest
C:\Program Files\nodejs\npm -> C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
C:\Program Files\nodejs\npx -> C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js
+ npm@6.13.2
updated 1 package in 52.733s

After this, I run the 'npm run setup' command under the project's root folder and ended up with different error, which I didn't understand.

Then I tried starting the chromium-browser from the command line.


C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>ionic serve --browser chromium
> npm.cmd run ionic:serve:before

> moodlemobile@3.8.0 ionic:serve:before C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory
> npx gulp

[22:50:58] Using gulpfile ~\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory\gulpfile.js
[22:50:58] Starting 'default'...
[22:50:58] Starting 'lang'...
[22:50:58] Starting 'config'...
[22:50:59] Finished 'lang' after 525 ms
[22:50:59] Finished 'config' after 702 ms
[22:50:59] Finished 'default' after 706 ms
> npm.cmd run ionic:serve -- --address localhost --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser[npm] > moodlemobile@3.8.0 ionic:serve C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory
[npm] > npx gulp watch & npx ionic-app-scripts serve -b --devapp --address=0.0.0.0 "--address" "localhost" "--port" "8100" "--livereload-port" "35729" "--dev-logger-port" "53703" "--nobrowser"
[npm] [22:51:02] Using gulpfile ~\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory\gulpfile.js
[npm] [22:51:02] Starting 'watch'...
[INFO] Waiting for connectivity with npm...
[INFO] Waiting for connectivity with npm...
[INFO] Waiting for connectivity with npm...
[INFO] Waiting for connectivity with npm...

Please find the attached log report

評比平均分數： -
In reply to Sarath P

Re: Not able to set up development environment for Moodle Mobile 2

由Gil Silva發表於

i had the same very error. here is the solution (i literally wrote it down since i was thinking about adding this to a tutorial of some sort. gathering all the info i collected here and in other places) : 

//to run under windows :

run : npx gulp watch

//then on another terminal run :

npx ionic-app-scripts serve -b --devapp --address=0.0.0.0

//then just open the adress that will pop up on the terminal

PS: there is probably a way to do this on a single terminal but i dont know how.

------------this might be of interest : -----------------

 front end styling:

configconstants.ts

-----

//to build (the ionic build is just a bunch of js it will not run on itself on a mobile device) :

npm run ionic:build -- --prod

//to create the project on android (this will create the ambient to build the apk)

ionic cordova platform remove android

ionic cordova platform add android

//to build apk:

//Follow the instructions on the  android (probably creating a key and installing stuff) then : 

//go to android studio and import the project under resources/android.


Some file structure notes:

 src: is the place you are going to work.

www: is the ionic build (this will run on the brouser also)

resources/android 

resources/ios 

are the places you will point to create the final/debug builds


-------

here is the thread about this issue : 

https://moodle.org/mod/forum/discuss.php?d=391372

評比平均分數： -
In reply to Gil Silva

Re: Not able to set up development environment for Moodle Mobile 2

由Gil Silva發表於
sorry the proper path to the app projects after you make the ionic build are :

platforms/android

platforms/ios
評比平均分數： -
In reply to Gil Silva

Re: Not able to set up development environment for Moodle Mobile 2

由Sarath P發表於
Plugin developers的相片
Hi Silva, Sorry for the late reply and Thanks for the steps.

Please find the following output when I run 'npx gulp watch' inside the project root directory

C:\Users\sarat>cd C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>npx gulp watch
[17:02:15] Using gulpfile ~\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory\gulpfile.js
[17:02:15] Starting 'watch'...

Its been in this state for a couple of minutes.

The following is the output when I run 'npx ionic-app-scripts serve -b --devapp --address=0.0.0.0' on another terminal

Output:

C:\Users\sarat>cd C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>npx ionic-app-scripts serve -b --devapp --address=0.0.0.0
internal/modules/cjs/loader.js:895
throw err;
^

Error: Cannot find module 'C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory\node_modules\@ionic\app-scripts\bin\ionic-app-scripts.js'
[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:892:15)[39m
[90m at Function.Module._load (internal/modules/cjs/loader.js:785:27)[39m
[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1143:12)[39m
[90m at internal/main/run_main_module.js:16:11[39m {
code: [32m'MODULE_NOT_FOUND'[39m,
requireStack: []
}

C:\Users\sarat\Desktop\Moodle Mobile App Development Environment\moodlemobiledirectory>
評比平均分數： -
In reply to Sarath P

Re: Not able to set up development environment for Moodle Mobile 2

由Gil Silva發表於
hi, from stackoverflow (https://stackoverflow.com/questions/44381358/error-cannot-find-module-ionic-app-scripts/45711976)

they think it might be some incompatibility. please check :
the angular version and the ionic version.

ionic -v
(mine is 5.4.4)

ng --version

mine is :
-------------------------------------------------------------
Angular CLI: 8.3.9
Node: 12.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.9 (cli-only)
@angular-devkit/build-optimizer 0.0.35
@angular-devkit/core 8.3.9 (cli-only)
@angular-devkit/schematics 8.3.9 (cli-only)
@schematics/angular 8.3.9 (cli-only)
@schematics/update 0.803.9 (cli-only)
rxjs 5.5.11
typescript 2.6.2
webpack 3.12.0
----------------------------------------------------
評比平均分數： -
In reply to Gil Silva

Re: Not able to set up development environment for Moodle Mobile 2

由Ketan Deore發表於

Hi ,Gil Silva

I use the moodle mobile custom app through Git hub repository we can customize the files so I customize app and I build the app using Phone gap build for generating apk file but when I try to generate apk file I got error for update Corodova CLI 9.0.0,

Moodle mobile app 2.x use Corodova 6.5.0 but now it is not accepted when we build apk file on Phone gap.

I install Moodle 3.8 version so I want custom Moodle mobile app 3.x which I can create apk file on phone gap


Please suggest and tell me step by step what I can do for creating apk file for Moodle 3.8

評比平均分數： -
In reply to Ketan Deore

Re: Not able to set up development environment for Moodle Mobile 2

由Gil Silva發表於
the step by step was stated before.
about the phonegap i never used it (and could you please tell me why are people using it? is it better than android studio in some way? ). i built the apk on android studio, you just have to point to the project folder "/platform/android/" and build the apk. oh also you will need to set the keys to the app if you already did it you are set. i had a issue that i could not solve on the terminal there is something called graddle, and when i build it on the android studio it updates the gradle files and it builds it.

i will tell you the logic :

first you will have to build the ionic build think it as a multiple purpose build, then you will have to populate the project folder you will want to build to. so if you need it to create a folder for android it will be like :

first you build the ionic build with :
npm run ionic:build -- --prod

then you populate the project folder you need to. if its android you do :

to clear the old android project:
ionic cordova platform remove android

to add the project using the build you just created :
ionic cordova platform add android

now you are set to move to your app to build the apk. you might have problems with graddle i think and i bumped into a solution that worked for me (the android one).
評比平均分數： -