cookiecutter-django
cookiecutter-django copied to clipboard
cookiecutter
React support through Webpack
Description
It'd be really nice to have React as a built-in option, or have documentation on how to hack it in. I see this was suggested in #466, and seems to have been merged, but I saw no option for it when running cookiecutter (it also does not appear in cookiecutter.json). I've seen ccokiecutter-webpack but it hasn't been updated in 2 years which makes me nervous.
Rationale
Lots of people prefer Webpack over Gulp. Also React is pretty good, but it's but a pain to use with Gulp. Even a working webpack setup, with no built-in react support, would be nice.
Lots of people prefer Webpack over Gulp.
True.
Also React is pretty good, but it's but a pain to use with Gulp
True.
Even a working webpack setup, with no built-in react support, would be nice.
True.
Yet...
have documentation on how to hack it in
This is a workable alternative, to my mind, write an external documentation somewhere and link it from our docs. Once again, we, the contributors and the community as a whole have yet to find a one-size-fits-all step-by-step third-party Cookiecutter Django-React integration guide -- why not to pioneer, @anchpop? :)
Just use create-web-app and build it in a new directory or even a separate repo. That's the best way, as it means you aren't dependent on us maintainers to configure Webpack for you, instead you get the best webpack people in the world doing it for you.
The same technique applies to VueJS. Just use Vue CLI instead of having a tight integration with this project.
Good recent post: https://fractalideas.com/blog/making-react-and-django-play-well-together-single-page-app-model/
https://github.com/anchpop/annotator-tots/blob/master/tutorial/howToSwitchToWebpack.md I got something working, this is how I did it. I'm no React expert so this is very likely not the best way. Pretty painless, though. Could someone take a look to see if they spot any errors?
I also explain how to set up react to work with django (which is non-obvious)
Update: I now use this, which I wrote and use in production. It is very similar to pydanny's cookiecutter-django.
Thank you @anchpop. I will definitely have a look at your setup. I been working to create this with the option of creating a "Hybrid app" (Django page as a React Component). SPAs with code splitting should make the "hybrid app" unnecessary for performance seekers.
@Afrowave I agree. I hadn't seen code splitting done well by any React Django app, this setup should theoretically make it pretty simple (don't forget it also does SSR).
There is one project for similar purposes - what separates frontend and backend https://github.com/hersonls/frango
I took it as base, and did what is more suitable for our team.
Right now I have separate directory frontend directory for frontend where everything happens
This model works very good with webpack and gulp and also provides really good separation, so we may provide access to templates / static to frontend team, without providing access to source code of backend.
Maybe you are interested to add this schema to your django template.
I actually forked this repo and added an option for react using create-react-app. Try it like this:
cookiecutter https://github.com/chopdgd/cookiecutter-django-reactjs
@caleybrock - not in the short term. I maintain that cookiecutter for fun and for some of the projects I work on at my day job. It is definitely something I would like to add support for eventually though.
Just use
create-web-appand build it in a new directory or even a separate repo. That's the best way, as it means you aren't dependent on us maintainers to configure Webpack for you, instead you get the best webpack people in the world doing it for you.The same technique applies to VueJS. Just use Vue CLI instead of having a tight integration with this project.
Well but how about if we want to use VueJS or React, not as SPAs? Just on one particular page of our Django app.
We cannot do that with separate projects.
Well but how about if we want to use VueJS or React, not as SPAs? Just on one particular page of our Django app.
If you're looking for an example of this, I just published a cookiecutter-vue-django (forked from this repo) that supports VueJS as MPA, allowing mingled usage of Django templates and Vue components.
