6 ms·

Django React Redux JWT Base Project

38 points by lfrodrigues 11y ago

kev009 11y ago
This sounds horrifying, less is more.
- elcapitan 11y ago
  At first glance I thought it was a parody and looked if both Angular and React were included.
- robertfw 11y ago
  Make things as simple as possible, but no simpler For real world projects you end up needing a fair bit of stuff. I'm using a pretty similar stack and once you are up and running the majority of it falls into the background and your day to day work generally involves working only with an easy to use top layer.
- andybak 11y ago
  Excellent. I look forward to seeing your assembly language web framework. Joking aside - I'm actually going to call you out on a throwaway, crown-pleasing comment. You'd please the crowd a lot less if you added more detail as everyone would suddenly discover their sweet spot in the 'roll your own vs re-use' wars didn't coincide with yours. It's a little like standing on a soap box and shouting "freedom!". Everyone can get behind a content-free message.
sawyerjhood 11y ago
Very niche, but if you need it this could definitely save you a few hours. I wish I had this last weekend for a hackathon where I used a stack very similar to this. I spent longer than I should have to get webpack up and running with Django.
- mrdrozdov 11y ago
  Silly question, but can't you run Django to serve your backend API, and Webpack to serve your static assets including javascript, then use an http proxy like Nginx to serve them under the same url?
  - d215 11y ago
    well for development that's a good idea. For production you don't want to have webpack serving anything, you want it compiled, right?
    - gitaarik 11y ago
      That's what I do. Webpack compiles to the static/ dir and Django serves the static files in that dir. I don't know how/why you would do it otherwise.
      - withjive 11y ago
        For fast development iterations, running webpack's own web server is used for development. Where django would instead load a custom JS endpoint in development, and use the compiled file for production. Webpack static compile each time is just way to slow— I've seen it take 60+seconds to compile.
jonesetc 11y ago
Note: JWT is JSON Web Token in this case, not Java Web Toolkit. This was very confusing to me as JWT is only mentioned in the title but not anywhere else in the README.
- pacomerh 11y ago
  right! you can't just put JWT in there. I saw that and was like...maybe we went too far? hehe
  - lfrodrigues 11y ago
    Hey, I'm the developer. I've corrected the readme. Thanks!
memonkey 11y ago
You could put all of this into Vagrant or Otto with a bash file to set up the dependencies to get it going.
gitaarik 11y ago
Not sure why the `accounts` app is included [0]. As seen from the comments [1] in the `models.py` it looks like it's from an existing project, don't think this should be in a boilerplate project. Nevertheless, nice boilerplate project :). [0] https://github.com/Seedstars/django-react-redux-jwt-base/tree/master/src/accounts https://github.com/Seedstars/django-react-redux-jwt-base/tre... [1] https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/accounts/models.py#L44 https://github.com/Seedstars/django-react-redux-jwt-base/blo...
- lfrodrigues 11y ago
  You're right. I copy pasted some code from some projects to build this generic one. A colleague will fix it in a few minutes :)
  - rahimnathwani 11y ago
    Including the 'accounts' app is actually pretty useful. Then even a newcomer to react and redux can see how the front and back end are hooked up. I'd encourage anyone to look at these files: Auth action (which depends on the accounts app and DRF): https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/static/actions/auth.js https://github.com/Seedstars/django-react-redux-jwt-base/blo... Auth Reducer (which changes redux state based on the outcome of login/logout actions): https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/static/reducers/auth.js https://github.com/Seedstars/django-react-redux-jwt-base/blo...
    - deleted 11y ago
      [deleted]
chiliap2 11y ago
Does this render all the React content server-side first? I wasn't able to figure out from an initial glance through the files.
- lfrodrigues 11y ago
  No it does not, it serves a index.html with react/css.
- ivan_ah 11y ago
  No. I was looking for that too. Some prior work on that front is: https://github.com/markfinger/python-webpack https://github.com/markfinger/python-webpack --- requires a node.js server to run in tandem. Tried it a couple of months ago, and worked, but not sure how it will handle lots of load...
  - lfrodrigues 11y ago
    This was exactly our analysis. Since most of our apps don't need to be isomorphic/universal we didn't pursue this avenue.
jdimov9 11y ago
Ugh! Blah. Spit.
- andybak 11y ago
  Which particular religious faction involved in this are you railing against?
tom_usher 11y ago
Great work, I've been enjoying using this exact stack recently - this has definitely taught me a few things. The main thing I'm still trying to get my head round with React/Redux/Router is where in the lifecycle to do data fetching - I noticed you're doing it in componentWillMount, when the React docs suggest componentDidMount, and I've seen others do it in various other ways with no clear indication what the 'best practice' approach is.
- pergomes 11y ago
  I understand your thoughts and normally we follow the React docs suggestions for generic components. We place data fetching code in componentWillMount in those cases we want to win some time, but if it's not the case I would recommend to place it in componentDidMount as React docs suggests.
hiphipjorge 11y ago
What would be the best way to include some form of web sockets server/realtime pub-sub into this á la Socket.io? What's the best way to do this in Django? I feel this is an important component of any new modern web project, but it seems to be ignored here.
- 0172 11y ago
  Take a look at https://github.com/andrewgodwin/channels https://github.com/andrewgodwin/channels

38 points by lfrodrigues 11y ago

kev009 11y ago

This sounds horrifying, less is more.

elcapitan 11y ago
At first glance I thought it was a parody and looked if both Angular and React were included.
robertfw 11y ago
Make things as simple as possible, but no simpler For real world projects you end up needing a fair bit of stuff. I'm using a pretty similar stack and once you are up and running the majority of it falls into the background and your day to day work generally involves working only with an easy to use top layer.
andybak 11y ago
Excellent. I look forward to seeing your assembly language web framework. Joking aside - I'm actually going to call you out on a throwaway, crown-pleasing comment. You'd please the crowd a lot less if you added more detail as everyone would suddenly discover their sweet spot in the 'roll your own vs re-use' wars didn't coincide with yours. It's a little like standing on a soap box and shouting "freedom!". Everyone can get behind a content-free message.

sawyerjhood 11y ago

Very niche, but if you need it this could definitely save you a few hours. I wish I had this last weekend for a hackathon where I used a stack very similar to this. I spent longer than I should have to get webpack up and running with Django.

mrdrozdov 11y ago
Silly question, but can't you run Django to serve your backend API, and Webpack to serve your static assets including javascript, then use an http proxy like Nginx to serve them under the same url?
- d215 11y ago
  well for development that's a good idea. For production you don't want to have webpack serving anything, you want it compiled, right?
  - gitaarik 11y ago
    That's what I do. Webpack compiles to the static/ dir and Django serves the static files in that dir. I don't know how/why you would do it otherwise.
    - withjive 11y ago
      For fast development iterations, running webpack's own web server is used for development. Where django would instead load a custom JS endpoint in development, and use the compiled file for production. Webpack static compile each time is just way to slow— I've seen it take 60+seconds to compile.

jonesetc 11y ago

Note: JWT is JSON Web Token in this case, not Java Web Toolkit. This was very confusing to me as JWT is only mentioned in the title but not anywhere else in the README.

pacomerh 11y ago
right! you can't just put JWT in there. I saw that and was like...maybe we went too far? hehe
- lfrodrigues 11y ago
  Hey, I'm the developer. I've corrected the readme. Thanks!

memonkey 11y ago

You could put all of this into Vagrant or Otto with a bash file to set up the dependencies to get it going.

gitaarik 11y ago

Not sure why the `accounts` app is included [0]. As seen from the comments [1] in the `models.py` it looks like it's from an existing project, don't think this should be in a boilerplate project. Nevertheless, nice boilerplate project :). [0] https://github.com/Seedstars/django-react-redux-jwt-base/tree/master/src/accounts https://github.com/Seedstars/django-react-redux-jwt-base/tre... [1] https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/accounts/models.py#L44 https://github.com/Seedstars/django-react-redux-jwt-base/blo...

lfrodrigues 11y ago
You're right. I copy pasted some code from some projects to build this generic one. A colleague will fix it in a few minutes :)
- rahimnathwani 11y ago
  Including the 'accounts' app is actually pretty useful. Then even a newcomer to react and redux can see how the front and back end are hooked up. I'd encourage anyone to look at these files: Auth action (which depends on the accounts app and DRF): https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/static/actions/auth.js https://github.com/Seedstars/django-react-redux-jwt-base/blo... Auth Reducer (which changes redux state based on the outcome of login/logout actions): https://github.com/Seedstars/django-react-redux-jwt-base/blob/master/src/static/reducers/auth.js https://github.com/Seedstars/django-react-redux-jwt-base/blo...
  - deleted 11y ago
    [deleted]

chiliap2 11y ago

Does this render all the React content server-side first? I wasn't able to figure out from an initial glance through the files.

lfrodrigues 11y ago
No it does not, it serves a index.html with react/css.
ivan_ah 11y ago
No. I was looking for that too. Some prior work on that front is: https://github.com/markfinger/python-webpack https://github.com/markfinger/python-webpack --- requires a node.js server to run in tandem. Tried it a couple of months ago, and worked, but not sure how it will handle lots of load...
- lfrodrigues 11y ago
  This was exactly our analysis. Since most of our apps don't need to be isomorphic/universal we didn't pursue this avenue.

jdimov9 11y ago

Ugh! Blah. Spit.

andybak 11y ago
Which particular religious faction involved in this are you railing against?

tom_usher 11y ago

Great work, I've been enjoying using this exact stack recently - this has definitely taught me a few things. The main thing I'm still trying to get my head round with React/Redux/Router is where in the lifecycle to do data fetching - I noticed you're doing it in componentWillMount, when the React docs suggest componentDidMount, and I've seen others do it in various other ways with no clear indication what the 'best practice' approach is.

pergomes 11y ago
I understand your thoughts and normally we follow the React docs suggestions for generic components. We place data fetching code in componentWillMount in those cases we want to win some time, but if it's not the case I would recommend to place it in componentDidMount as React docs suggests.

hiphipjorge 11y ago

What would be the best way to include some form of web sockets server/realtime pub-sub into this á la Socket.io? What's the best way to do this in Django? I feel this is an important component of any new modern web project, but it seems to be ignored here.

0172 11y ago
Take a look at https://github.com/andrewgodwin/channels https://github.com/andrewgodwin/channels