Building web applications with the Flask framework and the inbuilt jinja template is cool but hooking your backend to a react frontend(which I beli...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for this Tutorial. I think this is overkill for what I want to do (which is a simple landing page to show my portfolio), but I got the results I needed. I've also added Chakra UI to make it look a little prettier. Thanks again Faruq!
Meh, all parts except 5 are explained more correctly and in more details in React and Flask docs, and part 5 basically say "use axios", which is not even a good advice since fetch can basically do everything that axios can do.
Hello Nino. Thanks for reading all the articles. The knowledge gained from consuming the details in the React and Flask documentation was utilized here to build projects which is a method that further makes it easy to understand the concepts. Hence the reason for the series.
Regarding the issue, you raised with 'Axios'. Developers all have different preferences for stacks/libraries right? and the use of 'Axios' in the article above doesn't mean you can't choose to use ‘fetch’ in your case.
Thank you for reading once again!!
Great Article I really learned a lot including how to use PowerShell. Now I can develop my Plotly/Dash Flask App with React. The only part missing is that for windows users the command in the package.json should be:
no?
Thank you for this! I just completed it and it worked. I ran into a depreciation inside of the .flaskenv file
FLASK_APP=base.py
FLASK_ENV=development
The variable FLASK_ENV wasn't supported anymore but the terminal recommended a working solution which was:
FLASK_APP=base.py
FLASK_DEBUGGER=true
I also ran into some issues because I placed my folders inside of the wrong folders. What ended up working for me was
Base_Directory_named_whatever
-frontend_directory
-backend_directory
and I placed all the flask stuff inside of the backend (including my virtual env)
and all of the react stuff inside of the front end.
I also had a git issue where things started to get a little bit messy. It was because I ran a git init in the wrong folder. SO i made sure that I deleted the .git filed to reset it all. Then I went into the basedirectory (the folder that contains frontend and backend) and created a git init from there.
Finally on the package.json edit. It wouldn't work for me unless I deleted the grey newline text from the images above. I added the //newline at the ends of the 2 lines we added in and it caused an error every time I tried to launch my react page. Also make sure not to forget that comma from the image because I did and it also caused a crash.
Lastly I was having a hard time getting the "start-backend" part to work correctly. It was because I had to make sure the the cd part correctly pointed to the exact location of my virtual environment. So for me it was up a directory and inside of the backend folder then to my virtual env.
something like
"start-backend": "cd ../backend && backend_env/bin/flask run --no-debugger",
The npm install axios command worked like a charm when I did it inside of my frontend directory.
Lastly the .gitignore worked great from my basedirectory. I thought to I had duplicated one because I'd found one inside of my frontend directory as well but it seems like that one has it's own automated gitignore that react creates. So I ended up with 2 total. The one you created and the one that react created.
It took about 48 hours of tinkering and making sure my paths and syntax were correct but it all worked out! I'm REALLY REALLY REALLY happy that you put this up!
My next step is to deploy it to a platform like Heroku or AWS.
Faruq,
Thank you SO MUCH!! This walkthrough was great and the pictures were a HUGE help. Also the explanations about WHY you did things helped me even more.
Sorry for the long message and I hope this helps anybody with any issues that they might have ran into.
Hy i'm trying to make this for my experience, but there something error when try 'npm run start-backend' erros is env: ‘/bin/flask’: No such file or directory and i'm using windows, thanks
Hello Bagus,
Did you install flask after creating your environment? and what did you name the environment folder (venv or env) ?
Error is because in windows file there is no /bin it is /Scripts just replace your env/bin/flask to env/Scripts/flask
Still showing the same error
THANK YOU SO MUCH ❤️
Very helpful
How would you deploy this to Heroku?