Cannot Use the Moodle App in a browser

Cannot Use the Moodle App in a browser

by Joseph Rézeau -
Number of replies: 13
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi!

It's a few years since I last used the Moodle App in a browser; it used to work fine, but now I cannot connect to either my local Moodle site or my online site. I'm running Windows 11. I do need to run the Moodle App in a browser to check that my contributed plugins work fine on Mobile.

Both my local and online Moodle sites are set with the correct parameters for allowing the Moodle App connection and both are accessible from either my tablet or phone with the current Moodle App for Mobile, no problem.

I have followed the instructions at: https://moodledev.io/general/app/development/setup/app-in-browser and there are a few problems with those instructions.

  1. The doc. says "we recommend using Chromium instead of Google Chrome" Fine, but there are more than one so-called Chromium versions, which is a bit confusing. Finally remembered I had used the Canary version, and installed it. Now my Chrome-Canary version says: "Chrome is up to date Version 117.0.5852.0 (Official Build) canary (64-bit)"
  2. Then the doc. says in Windows "start chrome.exe --allow-file-access-from-files --disable-web-security --disable-site-isolation-trials --allow-running-insecure-content --no-referrers --unlimited-storage --auto-open-devtools-for-tabs --user-data-dir=~/.chromium-dev-data" If I type that in a Windows console, it throws an error message "Start-Process : Impossible de trouver un paramètre positionnel acceptant l'argument « --disable-web-security ». Au caractère Ligne:1 : 1 + start chrome.exe --allow-file-access-from-files --disable-web-securit ..."
  3. Never mind, I follow the other root, entering the list of flags in the shortcut to my Chrome-Canary on my Windows desktop, in the target, as per instructions here. Unfortunately the target properties line is too short, and the long list of flags gets truncated just after: --auto-open-devt !
  4. Never mind, I continue and open my Chrome-Canary browser with that (truncated) list of flags. I enter either the URL of my localhost Moodle site or the URL of my online Moodle course, located at https://www.rezeau.org/moodle/
  5. I get the error message "Can't connect to site We can't find the site you entered. Please check for typos or try again later. If you keep seeing this message, contact your school or learning provider. Error code: serverconnectionajax"
  6. In the browser console I get quite a few error messages, such as: see screenshot attached...
  7. What am I doing wrong? Can someone help?

Average of ratings: -
In reply to Joseph Rézeau

Re: Cannot Use the Moodle App in a browser

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
put master.apps.moodledemo.net at the end of your command line then put in your own site into the dialog etc
Average of ratings: -
In reply to Marcus Green

Re: Cannot Use the Moodle App in a browser

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Thanks for trying to help, Marcus. Actually I forgot to mention that step here:
4.- "Never mind, I continue and open my Chrome-Canary browser with that (truncated) list of flags. I enter master.apps.moodledemo.net (which redirects to https://latest.apps.moodledemo.net/login/site?showKeyboard=undefined... I enter either the URL of my localhost Moodle site or the URL of my online Moodle course".
 
Still no joy.
Average of ratings: -
In reply to Joseph Rézeau

Re: Cannot Use the Moodle App in a browser

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Could DM some account details to confirm I can login .

Average of ratings: -
In reply to Marcus Green

Re: Cannot Use the Moodle App in a browser

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Average of ratings: -
In reply to Marcus Green

Re: Cannot Use the Moodle App in a browser

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Full command line (which may not be helpful as you are on Windows but anyway...)
/snap/bin/chromium --allow-file-access-from-files --disable-web-security --user-data-dir=/tmp -allow-running-insecure-content master.apps.moodledemo.net
Average of ratings: -
In reply to Marcus Green

Re: Cannot Use the Moodle App in a browser

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Marcus,

That finally worked! Here are the details... for a Windows 11 user.

0.- On your Windows box at the root (or anywhere else) create a new directory which will be used by Chromium to store data (to avoid the error message "Google Chrome cannot read and write to its data directory:") Call it, e.g. c:\moodleapp

  1. After installing Chromium-Canary, go to the Google Chrome Canary shortcut on your Windows desktop and right-click Properties.
  2. In the Target field, it says "C:\Users\josep\AppData\Local\Google\Chrome SxS\Application\chrome.exe". Of course user will be a different name from "josep".
  3. Immediately after "C:\Users\josep\AppData\Local\Google\Chrome SxS\Application\chrome.exe", enter a space and this: --allow-file-access-from-files --disable-web-security --user-data-dir=c:\moodapp -allow-running-insecure-content master.apps.moodledemo.net
  4. Done! Now when you click that Google Chrome Canary shortcut on your Windows desktop you are taken to Moodle App demo where you can enter your Moodle site URL, then log in, etc.
  5. When Chrome Canary is launched you will see this warning "

    You are using an unsupported command-line flag: —disable-web-security. Stability and security will suffer." Disregard it. The very first time you launch it the Moodle App Demo site will take some time to appear, this is because Chrome is writing a number of files in your user-data-dir=c:\moodapp as defined previously. The following connections will be much faster.

Can someone update the doc at https://moodledev.io/general/app/development/setup/app-in-browser to make it more current?

Average of ratings: Useful (2)
In reply to Joseph Rézeau

Re: Cannot Use the Moodle App in a browser

by Angélique Dubois-Chabert -
Hi Joseph,
Thanks for this well written tutorial around this configuration !
I hate fighting with windows, you helped me a lot to set up my development environment.
Can't help but notice you're a french speaker too ! A bientôt et encore merci !
Angélique
Average of ratings: Useful (1)
In reply to Joseph Rézeau

Re: Cannot Use the Moodle App in a browser

by Abhishek Kumar -
// getting error window.openDatabase is not a function . 

ERROR TypeError: window.openDatabase is not a function

    at SQLiteDBMock.<anonymous> (sqlitedb.ts:167:52)

    at Generator.next (<anonymous>)

    at tslib.es6.js:76:1

    at new ZoneAwarePromise (zone-evergreen.js:960:1)

    at __awaiter (tslib.es6.js:72:1)

    at SQLiteDBMock.createDatabase (sqlitedb.ts:165:35)

    at SQLiteDBMock.init (sqlitedb.ts:805:29)

    at new SQLiteDB (sqlitedb.ts:194:14)

    at new SQLiteDBMock (sqlitedb.ts:30:9)

    at CoreDbProvider.getDB (db.ts:214:42)

Average of ratings: -
In reply to Abhishek Kumar

Re: Cannot Use the Moodle App in a browser

by Abhishek Kumar -
Can anyone resolve my issue . Still i didn't find any solution.
Average of ratings: -
In reply to Joseph Rézeau

Re: Cannot Use the Moodle App in a browser

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi there,

You can propose your changes yourself in github editing this file, and that way you'll appear as a contributor in the documentation: https://github.com/moodlemobile/devdocs/blob/app-docs/general/app/development/setup/app-in-browser.md

I'm not a windows user myself, so I can't test those instructions (although others seem to have confirmed that it works). But keep in mind that the latest version of Chrome will not work for now, until we fix MOBILE-4304.

Average of ratings: -
In reply to Noel De Martin

Re: Cannot Use the Moodle App in a browser

by Abhishek Kumar -
Thanks a lot Noel De Martin its work for me. But one more thing ng serve worked for me but when i run command npm start or ionic serve it failed and getting error and open serve.sh file automatically
[npm] > cross-env-shell ./scripts/serve.sh "--host=localhost" "--port=8100" "--project=app"

[ERROR] npm has unexpectedly closed (exit code 0).

 The Ionic CLI will exit. Please check any output above for error details.

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! moodlemobile@4.2.0 start: `ionic serve --browser=$MOODLE_APP_BROWSER`

npm ERR! Exit status 1

//angular version: 14.15.0
//ionic cli version: 6.20.9

I am also checking with downgrade and upgrade version of ionic 5 and 7

Average of ratings: -
In reply to Abhishek Kumar

Re: Cannot Use the Moodle App in a browser

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The app is using Angular version 10 (or version 16 in the ionic7 branch), so it looks like you're using a globally installed Angular CLI with the wrong version. We always recommend using the scripts defined in the package.json to avoid that: npm start, npm run dev:android, etc. Also, make sure to check the advice from the Troubleshooting page.

Average of ratings: -
In reply to Noel De Martin

Re: Cannot Use the Moodle App in a browser

by Abhishek Kumar -
sorry i am giving wrong information about my angular cli version
my angular cli version is 10.2.4
and ionic cli version is 6.20.9
C:\Users\Abhishek Kumar>ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/


Angular CLI: 10.2.4
Node: 14.15.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1002.4 (cli-only)
@angular-devkit/core 10.2.4 (cli-only)
@angular-devkit/schematics 10.2.4 (cli-only)
@schematics/angular 10.2.4 (cli-only)
@schematics/update
Average of ratings: -