CODEWITHSUNDEEP
pythonnode.jsreactjsexpresscreate-react-app
Aakash Choubey
Aakash Choubey

Reputation: 436

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.

Upvotes: 0

Views: 1038

Answers (2)

Aakash Choubey
Aakash Choubey

Reputation: 436

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.

Upvotes: 0

Asif Ansari
Asif Ansari

Reputation: 11

You can choose one the path to full fill your requirements.

  1. Create A REST API To Consume Express App
  2. SSR(Server Side Render for your React App)

Because you have used create-react-app I would personally advise you to go with Option 1, in your express app create an end-point to process a file.

In Your react-app do a fetch call with the image local URL to Upload it to your Express Server and process as you want and return a New URL of Modified Image. and Show it User On frontEnd.

In Order deploy your React-App You can use Google Firebase its free of Cost At least for hosting with FREE standard SSL.

For Sake of Ease given by Firebase, i use Firebase Function for Server-side Render, a good get started is given here https://www.youtube.com/watch?v=82tZAPMHfT4

Upvotes: 1

Related Questions