Use create-react-app instead of Vue for cookiecutter template

[kyle-hamlin]

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/

[euri10]

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> .

[kyle-hamlin]

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

[euri10]

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.

[kyle-hamlin]

Thanks for the help!

[tiangolo]

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.

[tiangolo]

I guess the question was answered, so I'll close this issue now. But feel free to add more comments or create new issues.

[Buuntu]

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.

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/