CODEWITHSUNDEEP
javascriptpythonflask
Oroshimaru
Oroshimaru

Reputation: 338

Correct way of importing in javascript while using Flask

I just started JavaScript. I wrote some code with javascript using the library: Three.js, now I wanted to do the Backend with Python. Therefore i started using Flask. So I have my index.html in the templates directory, inside my index.html i call my script.js like this:

<script type="module" src="/static/script.js"></script>

In my script.js I import three.js in the beginning like this:

import "/three.js"

The Three.js file is in the same static folder. But somehow the import doesnt work when i use Flask.

Upvotes: 0

Views: 3136

Answers (2)

Stephen.W
Stephen.W

Reputation: 2127

First of all, the 'import' statement hasn't yet widely supported by browsers, so if you really want to use it, you have to use a module bundler e.g. webpack, broswerify, to wrap all files into one big js file. However, if you are not familiar with those tools, to be honest, you have to spend many time to learn how to use them.

So I recommend you to keep things simple. For example, you can first make a copy of the library's source code and save it to your project's static folder, so that it can be served publicly. Second, you can create a HTML file, with following template: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="/static/three.js"></script>
        <script src="/static/script.js">
    </body>
</html>

P.S. this example is from Three.js offical document, with a little modification.

Since all scripts in a HTML share a same global environment, after the first <script> tag is loaded, the code in the next <script> tag can access three.js's global variable that is loaded before!

Upvotes: 1

Isuruse
Isuruse

Reputation: 46

flask is mirco framework, so you need to follow the documentation instruction on using static files.

have a look on this post

where to keep js files in Flask applications?

Upvotes: 0

Related Questions