Flask + NPM + Heroku = ?

Introduction

Let’s say you are making a website with a Flask backend and suddenly you find that it’s necessary to use a JavaScript package/module for your project. Maybe you’re doing this to give your website a bit more interaction, or you’re working with a module that’s not available as a CDN. That leaves you with the option of using the Node Package Manager (NPM). Normally, you would cast npm init on the root directory of your web development project and install your wanted modules with npm install <package>, if it weren’t for Flask (just kidding- Flask is awesome in so many different ways).

If you tried doing so, you’ll ultimately fail with unresolvable JavaScript errors, or the HTML not linking properly with your NPM module. Jokes aside, the pressing question still remains: h**ow might one go about this?** This article aims to answer this quandry.

**Important Note:**This short tutorial assumes that you’re familar with Flask, NPM, and Heroku, and already have a Flask app deployed on Heroku.

The Trick

If you’re familiar with Flask, you should know that a bare-bones directory structure for a (very) simple web app should look something like this:

/<your_flask_proj_directory>/
├── app.py (or __init__.py)
├── requirements.txt
├── venv (python_environment)
│   └── ...
├── static
│   ├── css
│   │   └── styles.css
│   └── img
│       ├── img1.jpg
│       └── img2.png
└── templates
    ├── layout.html
    ├── index.html
    └── about.html

The key to this dilemma is to use your /static folder. It’s simple: run npm init on your static folder and install your NPM modules on that directory.

#web-development #python #javascript #heroku #flask