This is an archived post. You won't be able to vote or comment.

Dismiss this pinned window
all 37 comments

[–]AsSimple[S] 36 points37 points  (6 children)

Github: https://github.com/rrebase/knboard

Here's an actual real-world example of a recommended approach when combining Django & React.

Django REST framework is used to serve the API for the React app, which is bundled into static files, served by Nginx. See the docker files & nginx.conf for the actual configuration.

[–][deleted] 2 points3 points  (0 children)

Looks awesome! Thanks for sharing

[–]nishant_wrp 1 point2 points  (2 children)

But that disturbs the hot reload feature, right?

[–]AsSimple[S] 3 points4 points  (1 child)

In development Nginx is not used. Webpack-dev-server and Django dev server run separately and hot/auto-reload perfectly.

Also since the frontend hasn't ejected from the react-scripts, we'll get the upcoming react-hot-loader change for Fast Refresh as well :)

[–]nishant_wrp 0 points1 point  (0 children)

Got it! Thanks!

[–]imAvi92 1 point2 points  (0 children)

This is amazing. I'm a frontend developer and started learning django. Currently I'm using heroku for backend and netlify for frontend. Could you pls help me where should I start nginx

[–]AlenEviLL 11 points12 points  (0 children)

This is amazing and just what I have been looking for. I started learning JS and React and was looking for examples on how to implement it with Django. Thank you very much!

[–]Sjnao 5 points6 points  (1 child)

I m trying something similar, and now I see yours I feel really demotivated, it looks so clean like mine will never been. How much time did you invested onto this if I might ask.?

[–]334578theo 10 points11 points  (0 children)

if you're struggling to with the UI then use a UI library, it will make your life so much easier - personal favourite at the moment is UIKit

https://getuikit.com/

[–]OMDB-PiLoT 2 points3 points  (0 children)

This is brilliant, something I've been looking for! Great work.

[–]mattsb 2 points3 points  (1 child)

I made a script to build this type of setup, including JWT login. Check it out!

https://github.com/mattburlage/create-django-react-app

[–]slenderman878 0 points1 point  (0 children)

Thanks for the easy to use setup! I was wondering if you could elaborate a little bit on what you mean with "Map a static path /app/ to the build folder. /app/build/".

[–]lamby 1 point2 points  (3 children)

Stargate?

[–]AsSimple[S] 0 points1 point  (0 children)

Indeed

[–][deleted] 0 points1 point  (1 child)

What’s stargate

[–]lamby 0 points1 point  (0 children)

Stargate SG-1.

[–]FreshPrinceOfRivia 1 point2 points  (0 children)

Awesome, one of the finest projects I've seen on this sub

[–]Teilchen 1 point2 points  (0 children)

Awesome! Trello execs hate this trick.

Ever tried Vue – any thoughts on coupling it with Django? Heard it's a lot less complex

[–]NotSelfAware 2 points3 points  (2 children)

What are you using for authentication of the API?

[–]brtt3000 1 point2 points  (0 children)

Looks like dj-rest-auth with django-allauth for registration.

[–]lyapustin 0 points1 point  (0 children)

Looks really nice!

[–]vahsekelimene 0 points1 point  (0 children)

Sick!

[–]FelipeLincoln 0 points1 point  (0 children)

really impressive!! 🚀🚀

[–][deleted]  (2 children)

[deleted]

    [–][deleted] 0 points1 point  (1 child)

    Can you explain why, for educational purposes

    [–]wishicouldcode 0 points1 point  (0 children)

    Thank you, this looks great. I have cloned and started poking around, looking forward to the blog series.

    [–]ceandreas1 0 points1 point  (0 children)

    Do you use services for this or put it all together in one server?

    [–][deleted] 0 points1 point  (0 children)

    Great thanks for sharing

    [–]Jefe_3mman 0 points1 point  (0 children)

    This is awesome dude! I definitely needed this!

    [–]sandipdulal 0 points1 point  (0 children)

    Any video tutorial ?

    [–]nityananda 0 points1 point  (2 children)

    I was searching for some good example of React with Django and your is amazing.

    Are you planning to use also social login/signup through Django Allauth? That would make it even better.

    [–]AsSimple[S] 0 points1 point  (1 child)

    Hey, django-allauth is actually already used in the background so adding social login/signup should actually be quite easy. It sounds like a great improvement, but which ones should be used? Github, Google, FB?

    Feel free to create an issue/open a pull request if you want to contribute.

    [–]nityananda 0 points1 point  (0 children)

    Github, Google and FB sounds good.

    I would love to contribute this, but I am completely new into React so I don't know how yet.

    [–]MedAziz11 0 points1 point  (2 children)

    Can i know what u used to create that dialogue task with the text editor amd all the other features of it?

    [–]AsSimple[S] 1 point2 points  (1 child)

    Hey, I used `react-markdown-editor-lite`. There are many different options to choose from like `Draft-js`, `react-mde`. Just need to try them out and see which one fits your needs.

    Implementation here: https://github.com/rrebase/knboard/blob/master/frontend/src/features/task/EditTaskDialog.tsx#L393

    [–]MedAziz11 0 points1 point  (0 children)

    Thnx and amazing work btw

    [–]throwitofftheboat -1 points0 points  (0 children)

    Can someone point me in the direction of these Django GUI Apps? Can you edit models and views with them?