React, Express, Node, Python

Question

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.

instead of using create-react-app simply make a static index.html file and add your react code over there. That way it listens to the same port. — Adeel Imran
– Adeel Imran, Commented Feb 12, 2018 at 19:09
Although even if the server is on different port, shouldn't make any difference. But still since you asked. — Adeel Imran
– Adeel Imran, Commented Feb 12, 2018 at 19:09
I have actually completed the UI in react.. sorry I forgot to mention in the question. I've updated the question, please check. — Aakash Choubey
– Aakash Choubey, Commented Feb 12, 2018 at 19:41

Asif Ansari · Accepted Answer · 2018-02-13 19:49:56Z

1

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

Create A REST API To Consume Express App
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

answered Feb 13, 2018 at 19:49

Asif Ansari

111 silver badge1 bronze badge

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

Comments

Aakash Choubey · Accepted Answer · 2019-06-20 21:33:31Z

0

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.

answered Jun 20, 2019 at 21:33

Aakash Choubey

4364 silver badges21 bronze badges

Collectives™ on Stack Overflow

React, Express, Node, Python

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related