Search code examples
pythonnode.jsreactjsexpresscreate-react-app

React, Express, Node, Python


So I have a python script that processes an image. I have tested python integration with Node running on express server and I am able to get what I want. I can read the file from a folder with the path provided.

Then I went ahead and separately learnt using Multer with Express for Image uploads.

And I started making a simplistic UI with create-react-app. The UI is almost complete, so I think I want to stick to it. The folder structure is the default with a components folder under src. Adding express to App.js gives me Critical Dependency Error.

So where I am stuck now is - How should I integrate all this? I want to use Multer on the form submit. But create-react-app works on a separate server of its own I guess and doesn't let express app listen.

My end goal is to ask the user for a file, process it and display the output. Should I be even aiming for Multer? Is it possible to run my python script on the user's side such that it reads the path on the user's system, reads the image and gives the output. I don't really want to get into Django or Flask. I would be deploying this in the future.


Solution

  • Since the stack was as such, the right way to do this that worked for me was to use Flask in Python as the backend. My create-react app uses Multer to get the file, posts it to server. Upon receiving the file, the server runs my python script to process the image as it should, and returns the output.

    The webapp is live here and here's the code.