Integration of React framework and Flask framework

Question

Hello I am trying to configure and integrate react with Flask framework, due to this I have edited the package.json file to add custom command for running both react frontend and flask backend.

Here is a section I edited on package.json file:

  "scripts": {
    "start": "react-scripts start",
    "start-app": "cd app && venv/bin/flask run --no-debugger",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I added start-app . When I run npm start-app It doesnt run, I get this message:

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\username\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

[email protected] C:\Program Files (x86)\nodejs\node_modules\npm

Did you mean this?
    start

I am not able to understand why its not able to get start-app. Note: I am using VS code on windows 10

Sanket Vyawahare · Accepted Answer · 2021-06-11 12:36:55Z

2

You can use Concurrently npm package. It will help you to execute your flask app from react one command only.

You can know more about this here : https://www.npmjs.com/package/concurrently

You can write in your package.json after installing concurrently as "start": "concurrently \"command1 arg\" \"command2 arg\""

answered Jun 11, 2021 at 12:36

Sanket Vyawahare

1309 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

LivingstoneM Over a year ago

So you mean inside package.json I add a line like this "start": "concurrently "start": "react-scripts start", "start-app": "cd app && venv/bin/flask run --no-debugger"" then run like this npm start ?

Sanket Vyawahare Over a year ago

First install concurrently using npm install concurrently. Then in package.json write : "start" : "concurrently \"react-scripts start\" \"cd app && venv/bin/flask run --no-debugger\""

LivingstoneM Over a year ago

Tried this and the error I get says 'venv' is not recognized as an internal or external command,

Sanket Vyawahare Over a year ago

"start" : "concurrently \"react-scripts start\" \"cd app && cd venv/bin/flask run --no-debugger\"" I guess you have to add cd before that as well.

LivingstoneM Over a year ago

Out of your help, I have figured I didnt need to have that second path of venv/bin I have removed it and running concurrently now

Aadmaa · Accepted Answer · 2021-06-11 12:11:45Z

1

You will need to have two separate projects; one for your React front end, and a totally separate Python project for your Flask API. They will communicate by HTTPS generally, so you'll set up endpoints in Flask, and call them using a library like axios on the React side.

answered Jun 11, 2021 at 12:11

Aadmaa

9427 silver badges22 bronze badges

2 Comments

LivingstoneM Over a year ago

I have created both two projects, I have flask app and react. Now I wanted to use npm to launch both since I have also set up "proxy"key at the end of package.json redirection from React to Flask

Aadmaa Over a year ago

Ahh I see. Can you try just running the Flask app separately, locally, without any references in you npm setup? Keep the proxy setting just by adding "proxy": "localhost:4000" to package.json.

Collectives™ on Stack Overflow

Integration of React framework and Flask framework

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related