Flask-Meld-Example

[djhenderson]

I cloned Flask-Meld-Example today.

I am trying to run the example on Win10 with python 3.9.1 using Firefox Nightly and Chrome. After cloning the repo, I cd'd into the top folder of the repo, set FLASK_ENV, and executed py app.py

The form behaves as though JavaScript was not enabled, i.e., clicking on gadgets, does nothing,

I also built versions using the code in the Dec 4th blog and from the Flask-Meld repo README.md file. Neither of these worked.

Here is the entirety of the execution output:

...\Flask-Meld-Example
> py app.py
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 266-094-764
Traceback (most recent call last):
  File "C:\Program Files\Python39\lib\site-packages\gevent\_ffi\loop.py", line 270, in python_check_callback
    def python_check_callback(self, watcher_ptr): # pylint:disable=unused-argument
KeyboardInterrupt
2021-01-05T17:27:56Z

...\Flask-Meld-Example
>

I;d very much like to try this out, as I have an aversion to JavaScript.

[mikeabrahamsen]

Thanks for trying out Flask-Meld. I can't say for certain what is going on in this case. Can you open the dev tools in your browser and check for any errors?

[djhenderson]

I am using Flask-Meld 0.4.3 and Python 3.9.1. I added empty __init__.py files in all folders containing imported files, and empty intermediate folders. I also set

FLASK_DEBUG=1
FLASK_ENV=development

Here is the status as shown by git

...\Flask-Meld-Example
> git pull
Already up to date.

...\Flask-Meld-Example > git status
On branch main
Your branch is up to date with 'origin/main'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        __init__.py
        meld/__init__.py
        meld/components/__init__.py

nothing added to commit but untracked files present (use "git add" to track)

Here is the cmd console log when I run the app:

...\Flask-Meld-Example > py app.py
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 266-094-764
Traceback (most recent call last):
  File "C:\Program Files\Python39\lib\site-packages\gevent\_ffi\loop.py", line 270, in python_check_callback
    def python_check_callback(self, watcher_ptr): # pylint:disable=unused-argument
KeyboardInterrupt
2021-01-08T05:46:23Z

Output stops after Debugger PIN ... until I press ^C.

Here is the content of the Firefox Nightly console (excepting details of the 404 for favicon.ico):

Some cookies are misusing the “SameSite“ attribute, so it won’t work as expected 2
Cookie “mjx.menu” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute. mathjax-menu-cookie.js:18:34
Cookie “mjx.menu” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute. mathjax-menu-cookie.js:25
Loading module from “http://127.0.0.1:5000/static/meld/meld.js” was blocked because of a disallowed MIME type (“text/plain”). 127.0.0.1:5000
The script from “http://127.0.0.1:5000/static/meld/morphdom-umd.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type. 127.0.0.1:5000
The script from “http://127.0.0.1:5000/static/meld/socket.io.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type. 127.0.0.1:5000
GEThttp://127.0.0.1:5000/favicon.ico
[HTTP/1.1 404 NOT FOUND 15ms]

Here is the folder tree (Excluding of .git):

...\Flask-Meld-Example > tree
Folder PATH listing for volume DATA
Volume serial number is 0061006C 7CD6:FD30
D:.
├───meld
│   └───components
│       └───__pycache__
├───templates
│   └───meld
└───__pycache__

And here is the file tree (Excluding of .git):

...\Flask-Meld-Example > tree /f
Folder PATH listing for volume DATA
Volume serial number is 0061006C 7CD6:FD30
D:.
│   .gitignore
│   app.py
│   forms.py
│   README.md
│   requirements.txt
│   __init__.py
│
├───meld
│   │   __init__.py
│   │
│   └───components
│       │   counter.py
│       │   person.py
│       │   register.py
│       │   search.py
│       │   __init__.py
│       │
│       └───__pycache__
│               counter.cpython-39.pyc
│               person.cpython-39.pyc
│               search.cpython-39.pyc
│
├───templates
│   │   base.html
│   │   register_page.html
│   │
│   └───meld
│           counter.html
│           person.html
│           register.html
│           search.html
│
└───__pycache__
        app.cpython-39.pyc
        forms.cpython-39.pyc

I suspect there may be some trivial problem here that can easily be resolved. It is very possible that I am doing something obviously wrong, as I haven't used Flask in several months, mainly because I was starting to have to write too much JavaScript.

[mikeabrahamsen]

I made a Windows install to test this and am sorry to report that I was not able to reproduce this issue. I installed Python 3.9.1, created a virtual environment and ran pip install -r requirements.txt.
Then ran python app.py and navigated to localhost:5000 and everything worked as expected. I would love to help you get everything running however, the path from here is unclear. I've updated the Flask-Meld project with some recent changes that change how the project loads the static files. Can you try uninstalling the current version from your virtual environment and update to the latest Flask-Meld release. Apart from that, if you have access to another machine can you try installing and running on that so we can help narrow down the issue?

[mikeabrahamsen]

@djhenderson Do you by chance have a 32-bit python installation?

[djhenderson]

I use a 64 bit install on Win 10 Pro Version 2004

> ver

Microsoft Windows [Version 10.0.19041.746]

> py
Python 3.9.1 (tags/v3.9.1:1e5d33e, Dec  7 2020, 17:08:21) [MSC v.1927 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>

In case anyone runs into this and ends up here, I've found that the issue is with how Windows handles allowing/disallowing Javascript from running locally. This is the pertinent error that crops up in the console:

Loading module from “http://127.0.0.1:5000/static/meld/meld.js” was blocked because of a disallowed MIME type (“text/plain”). 127.0.0.1:5000

This can be worked around by adding code such as this when creating the __init__.py file of the application:

import mimetypes
mimetypes.add_type("application/javascript", ".js", True)

So for a fresh install of a Meld application, your __init__.py file should look like this:

from flask import Flask, render_template
from config import config
from flask_meld import Meld
import mimetypes # <- add this import
# from .db import db
# from app import models

# extensions
meld = Meld()


def create_app(config_name="development"):
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    # db.init_app(app)
    
    #Workaround so the JS can load on Windows
    mimetypes.add_type("application/javascript", ".js", True) # <- add this line

    meld.init_app(app)

    @app.route("/")
    def index():
        return render_template("index.html")

    return app

Note that you likely don't want to to run this as is in production, the mimetypes part would be better wrapped in an if statement that only triggers when in debug and on a Windows machine but this will at least get the app up and running. Hope this helps anyone who runs into this.