How do I set up a React + Flask Replit?

Question:

I am trying to set up a React + Flask Replit backend as a example, since we have a much larger project that we want to start migrating to React. I think I’ve gone most of the way there, but I can’t figure out how to set up Typescript so it properly infers the types. Right now, all the tsx files have red imports, and most of the JSX elements are covered in red in the other file.

I think I have everything I need in the .replit and .replit.nix files, so I am not sure what I am missing here. Could somebody help me with the last step?

Repl link/Link to where the bug appears:

.replit - Flask + React TS - Replit

Screenshots, links, or other helpful context:

Hey @mrakgr , welcome to the forums!
I found this article that may come in handy:
Guide To Using Typescript With React | Simplilearn.
Hope this helps!

The problem isn’t that I don’t know how to use Typescript with React, on my local machine, I’d just use Vite to create a React TS project. But on Replit, after I do that, it is not looking at the library type definitions in the right place for some reason. Replit itself is the problem in this instance.

There is a template React TS project that does it right, but that gives me no insight into how add it to my Flask install. I think Replit is hiding some options from me, or maybe setting up Node incorrectly, but I do not have access to those settings.

Hey @NateDhaliwal, welcome to the community!

I recommend just moving your React app into a different Repl. Too much work to put them in the same one for no reason in my opinion.

1 Like