Use create-react-app instead of Vue for cookiecutter template #8253
Replies: 7 comments
-
it's fairly easy, I'm no reactjs pro at all and currently working on a
basic template using fastapi and react hooks.
it's inspired a lot by this aforementioned amazing cookiecutter, I will
definitely open it once I have done enough work on it.
key differences so far, mostly because I wanted to test different things:
- it uses react hooks on the frontend
- it uses sqlalchemy core, so no orm
- it doesn't leverage base images nicely on the backend, so build is slow
😭,
- it uses starlette config and backgrounds ans has no celery
- some other things I did differently like waiting for the db to be up,
etc... well
Le mer. 27 mars 2019 à 9:38 PM, Kyle Hamlin <notifications@github.com> a
écrit :
… I'm just wondering how easy it would be to drop in a create-react-app in
place of Vue for the Full Stack FastAPI and PostgreSQL cookie cutter
generator?
https://fastapi.tiangolo.com/project-generation/
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#115>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABDZPgDeHv77TahXG36T2IcKZ-jcZK_uks5va9bLgaJpZM4cOu4b>
.
|
Beta Was this translation helpful? Give feedback.
-
Right on. I was hoping I could generate that cookiecutter and simply
replace the frontend directory with a react application. What I'm really
looking for is what references the backend has to frontend and how easy it
would be to recreate with react.
…On Wed, Mar 27, 2019 at 4:53 PM euri10 ***@***.***> wrote:
it's fairly easy, I'm no reactjs pro at all and currently working on a
basic template using fastapi and react hooks.
it's inspired a lot by this aforementioned amazing cookiecutter, I will
definitely open it once I have done enough work on it.
key differences so far, mostly because I wanted to test different things:
- it uses react hooks on the frontend
- it uses sqlalchemy core, so no orm
- it doesn't leverage base images nicely on the backend, so build is slow
😭,
- it uses starlette config and backgrounds ans has no celery
- some other things I did differently like waiting for the db to be up,
etc... well
Le mer. 27 mars 2019 à 9:38 PM, Kyle Hamlin ***@***.***> a
écrit :
> I'm just wondering how easy it would be to drop in a create-react-app in
> place of Vue for the Full Stack FastAPI and PostgreSQL cookie cutter
> generator?
>
> https://fastapi.tiangolo.com/project-generation/
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <#115>, or mute the thread
> <
https://github.com/notifications/unsubscribe-auth/ABDZPgDeHv77TahXG36T2IcKZ-jcZK_uks5va9bLgaJpZM4cOu4b
>
> .
>
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#115 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEa159bjk3OFZKfa90RZyG8pW6C88RE_ks5va9pFgaJpZM4cOu4b>
.
--
Kyle Hamlin
|
Beta Was this translation helpful? Give feedback.
-
i would generate the cookiecutter and instead of replacing, I'd add a frontend2 docker service to the project, references are mainly in the docker compose and dockerfile, and in the routes I'd say. |
Beta Was this translation helpful? Give feedback.
-
Thanks for the help! |
Beta Was this translation helpful? Give feedback.
-
Yep, it should be quite straightforward. It is made to be as modular as possible. You can add a second frontend2 or replace the current one, as you prefer. The only things that you need to do to have a React Docker set up compatible with the current Vue.js one are described here: https://medium.com/@tiangolo/react-in-docker-with-nginx-built-with-multi-stage-docker-builds-including-testing-8cc49d6ec305 The most tricky part is handling authentication with JWT tokens, and redirecting to login when the token is no longer valid, etc. The current version uses Vuex, which is Vue's Redux, to store and handle that "state". Then, to handle those side effects (API communication) you can use Redux Saga or equivalent: https://redux.js.org/faq/actions#how-can-i-represent-side-effects-such-as-ajax-calls-why-do-we-need-things-like-action-creators-thunks-and-middleware-to-do-async-behavior. In Vue.js-land, it's included as part of Vuex, it's called "actions". But Vue.js's actions are comparable to "side effects" in React. What is called "actions" in React is called "mutations" in Vue.js-land. If you are already familiar with React, follow that blog post to generate the Docker set up. And you'll probably find your way easily. All that above is not that related to FastAPI, actually not even to Vue.js. It's just that handling authentication tends to be a bit messy and overlooked at the beginning, on any frontend framework you use, but once you have it set up, the rest is more easy. |
Beta Was this translation helpful? Give feedback.
-
I guess the question was answered, so I'll close this issue now. But feel free to add more comments or create new issues. |
Beta Was this translation helpful? Give feedback.
-
I'm working on something similar / more lightweight for React too that takes a lot of concepts from this repo: https://github.com/Buuntu/fastapi-react. If people want to help generalize it and submit PRs I'd be happy to collaborate on it.
|
Beta Was this translation helpful? Give feedback.
-
I'm just wondering how easy it would be to drop in a
create-react-app
in place of Vue for the Full Stack FastAPI and PostgreSQL cookie cutter generator?https://fastapi.tiangolo.com/project-generation/
Beta Was this translation helpful? Give feedback.
All reactions