38

I have a small Flask app which currently sources jQuery and highlight.js from external servers. I'd like to make these local dependencies which I pull in via NPM.

What is the standard practice for this? Should I create package.json file in the same directory as my static and templates directories and serve node_modules as a separate static dir ala this question?

I'm packaging and distributing my app using pip, so any solution needs to be compatible with that.

Community
  • 1
  • 1
danvk
  • 15,863
  • 5
  • 72
  • 116
  • 1
    Have you seen [fantastic](http://www.fanstatic.org/en/latest/intro.html)? It's not the last word in package management for JS (like webjars I don't think it's 100% there yet), but it might make things easier. – Sean Vieira Jul 01 '14 at 20:26
  • @SeanVieira , good advice! The package flask_fanstatic (https://pypi.org/project/Flask-Fanstatic/) makes it even easier. Also, there's no need for many package managers, pip alone can do it. – LRMAAX Nov 17 '18 at 12:04

3 Answers3

57

Go to your static folder and there initialize your npm project.

cd flask_app/static
$ npm init

after installing and saving npm packages you can serve them like this:

<script src="{{ url_for('static', filename='node_modules/toastr/toastr.js')}}"></script>

credits to: https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9

a2k
  • 594
  • 5
  • 5
  • 1
    Is there any different in doing the `? – BruceWayne Aug 23 '18 at 20:56
  • 1
    @BruceWayne using url_for allows yo to separate your real project structure from the actual static endpoint being served by Flask. You can get more info in this question: https://stackoverflow.com/questions/27234593/setting-up-static-folder-path-in-flask See that Flask docs also recommend to do this: http://flask.pocoo.org/docs/1.0/patterns/jquery/#loading-jquery – Akronix Mar 23 '19 at 08:08
  • as long as front end libraries and technologies keep changing with the wind... this will for sure be the best answer since now **Bower** is deprecated... – Ordiel May 29 '19 at 02:15
  • Isn't webpack made to support this? – Ndrslmpk Jun 18 '22 at 11:31
0

You need Bower and you already have NPM. This is all you need to achieve what you want.

Basically, you will have to create a package.json in the root to install Bower using NPM. Then you will have to create a bower.json to define what all libraries you need, example jQuery.

Then your flow will be like:

npm install
bower install

This will basically install bower for you and the other frontend libraries you defined in bower.json.

All bower components will go into a directory called bower_components in your root. This is where all your installed bower packages will reside. You can use these packages inside your templates now.

Also see this to make sure that bower's packages are installed in your static or assets folder which you want to serve.

Community
  • 1
  • 1
vaidik
  • 2,191
  • 1
  • 16
  • 22
  • 3
    The answer to my question was basically "Have you heard of Bower". :) – danvk Jul 02 '14 at 19:35
  • 3
    This is not a good answer to the question. Some packages, like angular2, will not support bower and only NPM, so an answer is still needed on how to get Flask serving up node_modules during development – John Wheeler Feb 14 '16 at 21:32
  • 6
    This answer might have been correct in 2014, but in 2018 you really shouldn't be using Bower anymore, the project is deprecated and will probably stop functioning somewhere in the future. Go with a `package.json` and `npm`, as indicated in @a2k's answer. – Husky May 16 '18 at 14:31
  • Bower is no longer a thing so I've changed the accepted answer. – danvk Jun 10 '19 at 16:56
0

maybe a bit late for the answer, but the easiest way to do it is by doing this:

sudo npm install bower
echo "bower_components/" >> .gitignore
bower install -S (here goes whatever you want)
npm init

Then you fill out the prompt, and you'll have a few new files:

  • bower.json, which is generated by bower to manage dependencies. Using bower install -S (your dependency) will update this file with your new dependencies.
  • package.json, created by npm to manage your project and npm dependencies
  • node_modules, the things you installed with npm
  • bower_components/ which is where all of your front end dependencies live.
corvid
  • 10,733
  • 11
  • 61
  • 130