React/FastAPI Boilerplate in Docs?

[Buuntu]

Is your feature request related to a problem? No

I just wanted to suggest including a React/FastAPI boilerplate project I've made loosely based off of your fullstack boilerplate in the FastAPI project generation docs? I figured since so many people use React these days it could be useful to get people started with FastAPI. Here is my repo: https://github.com/Buuntu/fastapi-react.

If the docs is not the right place for it maybe in the README in the fullstack-project you have? What are your thoughts @tiangolo? It is probably not as extensive or well tested as your project but I figure it could still be useful to people. I can make a pull request if you think this is a good idea.

The solution you would like

Describe alternatives you've considered

Additional context

[andre-dasilva]

I was looking for something like this. i am trying to learn react (after angular) and it would be nice to have some boilerplate code

[F1r3Hydr4nt]

I also was hoping to use fastapi with react. This is a good start but the boilerplate code should really match that of the full Vue frontend. I have looked into this and some of the Vue code can be reused, specifically utils.ts, env.ts, api.ts, interfaces/index.ts.

A new router & store accessor are mostly all that is missing, except for the finished style of course. I guess Redux & React-Router (which are combined and synced with connected-react-router) would work, I found this boilerplate: https://github.com/EdMSL/react-typescript-boilerplate but there could be better more minimal boilerplates out there (https://github.com/JaysonChiang/react-redux-router-ts-sample for example, or https://github.com/innFactory/create-react-app-material-typescript-redux, OR https://github.com/rokoroku/react-redux-typescript-boilerplate...

Would you be interested in implementing this with me @Buuntu ? Maybe we should start simply with the connected-react-router typescript example (https://github.com/supasate/connected-react-router/tree/master/examples/typescript)... I also like this package: https://react-hook-form.com/

[Buuntu]

I also was hoping to use fastapi with react. This is a good start but the boilerplate code should really match that of the full Vue frontend. I have looked into this and lots of the Vue code can be reused, specifically utils.ts, env.ts, api.ts, interfaces/index.ts.

A new router & store accessor are mostly all that is missing, except for the finished style of course. I guess Redux & React-Router (which are combined and synced with connected-react-router) would work, I found this boilerplate: https://github.com/EdMSL/react-typescript-boilerplate but there could be better more minimal boilerplates out there (https://github.com/JaysonChiang/react-redux-router-ts-sample for example, or https://github.com/innFactory/create-react-app-material-typescript-redux, OR https://github.com/rokoroku/react-redux-typescript-boilerplate...

Would you be interested in implementing this with me @Buuntu ? Maybe we should start simply with the connected-react-router typescript example (https://github.com/supasate/connected-react-router/tree/master/examples/typescript)... I also like this package: https://react-hook-form.com/

To create a whole dashboard for user creation? I don't know if that's necessary for a boilerplate, that feels very opinionated to me. I know that's how @tiangolo's project is setup but I imagine a lot of people are just going to want to start from scratch on the frontend (I know I usually do). I think adding pgAdmin or something similar to the docker-compose and/or basic auth/user models makes sense though.

When I start a new project, I'm more interested in just getting a modern, barebones stack in place with docker-compose to easily start a project without spending hours trying to get hot reloading to work, postgresql, reverse proxy, etc. I suppose you could make more of a full-fledged app with a dashboard to start out with but then it becomes less flexible for other uses.

[F1r3Hydr4nt]

Yes it is just my opinion alright. The full-stack-fastapi-postgresql repo is well setup with Traefik etc.
The dashboard will likely be ripped right out of course, but I guess I thought your project just lacked standard webapp stuff like token auth & hitting api endpoints (login, create user) and examples of that sort of flexibility. ¯\(ツ)/¯

[Buuntu]

Yes it is just my opinion alright. The full-stack-fastapi-postgresql repo is well setup with Traefik etc.
The dashboard will likely be ripped right out of course, but I guess I thought your project just lacked standard webapp stuff like token auth & hitting api endpoints (login, create user) and examples of that sort of flexibility. ¯_(ツ)_/¯

I do think mine is missing some examples and is definitely not as complete as the Vue full stack boilerplate. Adding an auth example would be good even if it's super basic. If you want to contribute to my project I'd be glad to work with you on that.

[F1r3Hydr4nt]

I think I am going to try clone the Vue app to React in whole as a learning exercise, I like all the bells and whistles of the fullstack fastapi cookiecutter (SMTP emailing etc). I think @tiangolo has this in mind: tiangolo/full-stack-fastapi-template#64 (comment)

[Buuntu]

I think I am going to try clone the Vue app to React in whole as a learning exercise, I like all the bells and whistles of the fullstack fastapi cookiecutter (SMTP emailing etc). I think @tiangolo has this in mind: tiangolo/full-stack-fastapi-postgresql#64 (comment)

Sounds like this has already been discussed then. I might add react-admin, auth, and celery in the meantime for my own projects but good to know there is something in the works.

I imagine whatever is made will be a slightly different stack so I will continue to build out my own and see if people find it useful.

[Buuntu]

I recently added react-admin and JWT authentication, check it out: https://github.com/Buuntu/fastapi-react