How to Deploye a Flask App with NPM Modules on Heroku

How to Deploye a Flask App with NPM Modules on Heroku

Learn how to deploye a Flask App with NPM Modules on Heroku. Learn how to deploy a Flask application to Heroku. 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.

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: how 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Python Developers

Are you looking for experienced, reliable, and qualified Python developers? If yes, you have reached the right place. At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, our full-stack Python development services...

Hire Python Developers India

Looking to build robust, scalable, and dynamic responsive websites and applications in Python? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, we constantly endeavor to give you exactly what you need. If you need to...

Basic Data Types in Python | Python Web Development For Beginners

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.

Top Python Development Companies | Hire Python Developers

After analyzing clients and market requirements, TopDevelopers has come up with the list of the best Python service providers. These top-rated Python developers are widely appreciated for their professionalism in handling diverse projects. When...

Learn Flask - Python Web Development - Flask Crash Course For Beginners

Learn Flask - Python Web Development - Flask Crash Course For Beginners, in this video we are going to talk about about different concepts in flask. Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.