Build a Simple CRUD App with Python, Flask, and React

Build a Simple CRUD App with Python, Flask, and React

Create a CRUD (create, read, update, and delete) application using Python, Flask, and React.

Dan Mulholland

Thank you for this detailed tutorial, much appreciated.

I found I was missing installation of flask-cors:


pipenv install flask-cors==3.0.7

and also there was no particular instruction to place your okta domain with https:// in front or to use your client id for the Login component:


issuer=“https://dev-276301.oktapreview.com” // {yourOktaDomain}
client_id=“0oajejknylm5lr0Nn0h7” // {yourClientId}

Waldemar Enns

Hello, thank you for the nice tutorial!

One question:
Now the Octa Middleware handles the Auth-Check but that means, that the Flask API itself is not protected against unauthenticated requests, right? So i could just use the API with curl requests from the shell, without being authenticated, right?

And how could i implement such a protection in the Flask Application?

Thank you :slight_smile:

https://media2.giphy.com/me…

Peter S

I created this example few months ago for the good people of flask-jwt-extended component. It should work just fine with octa. https://github.com/vimalloc…

however… login_required decorator is in front of every of the flask endpoints. it means that invalid token will trigger unauthorized response instead of providing the data.

mwei

very nice

Francesco Pegoraro

Hi,

great tutorial! Thanks!

I am having an hard time understanding this line here:

FLASK_APP=$PWD/app/http/api/endpoints.py FLASK_ENV=development pipenv run python -m flask run --port 4433

I am on windows and it doesnt work, what should it do?

Natasha Bieber

Thanks for providing the excellent piece of content. I think the content covered in the article is quiet impressive and brilliantly conveyed. Very nice blog. Appreciate your efforts. https://bit.ly/2RHSivk

AleRV

stop using windows should work

Julian Rubin

I have a problem in the same part, but on Mac.
ERROR: unknown command “run” , Someone can help me?

Sushma Ramakrishna

Thank you for the tutorial. It was a good learning experience

Allen Ellis

Hi, thanks for the tutorial!

I’m new to react/python (coming from PHP)… but I notice that after following this tutorial, my project directory weighs in at 333MB. Is that standard for this kind of development? How would I write an appropriate .gitignore to ignore all of the various Python and npm dependencies we installed?

Thanks!

Edit: nevermind, looking inside your linked Github repo is helpful. Total size there is just a few hundred KB, and I see a .gitignore was generated at some point inside the http/app directory for the node files.

Edit: learning now about npm’s “build” functionality which I guess just extracts whatever libraries we actually used for this project. It creates a build folder which is just a few hundred kb. My heart rate is coming back down haha

Matt Raible

The node_modules directory in your project won’t be part of your final production code. It just contains code to build your React app. If you run npm run build, it’ll compile your React app to the build directory and that’ll contain all the code you need for production.

Sarah

Hi! Great tutorial, this is really useful for me as I work on learning more web-focused Python. I noticed this link no longer works: https://github.com/oktadeve…. Do you all have the example repo somewhere we could reference? It’d be handy for troubleshooting mine. :slight_smile: Thanks!

Matt Raible

Hello Sarah,

This repo was private for some reason. I made it public so you should be able to access it now. Thanks for the heads up!

Mat

Hello
I have a Syntaxt error invalid property id on line 210 in main.chunck which seems to be Home.js on reset_repo.
Have you any idea ?
Regards

Pablo Felgueres

hey Matt, running the tutorial the Login component throws an invalid hook call. I’m not expert on React but trying to debug it seems you’d want to convert that component into a functional one. I’d be great if you posted an updated version of the Login as a functional component! thanks!

Matt Raible

Hello Pablo,

We typically don’t refactor old posts to cover technologies they didn’t use at the time. The good news is we published Build a Simple React Application Using Hooks about a month ago.

Pablo Felgueres

thanks!

Chad Viergever

The delete kudos/update kudos functionality is not working for me. Any thoughts?

Stephen Bradshaw

posting your error helps people help you. post your error.