{"id":17178680,"url":"https://github.com/valentinogagliardi/django-rest-react-pycon","last_synced_at":"2025-04-13T16:21:54.451Z","repository":{"id":102408460,"uuid":"180766629","full_name":"valentinogagliardi/django-rest-react-pycon","owner":"valentinogagliardi","description":"🐍 Demo repo for Pycon X talk \"Decoupling Django with Django REST (and a sprinkle of React)\"","archived":false,"fork":false,"pushed_at":"2020-12-11T09:14:11.000Z","size":300,"stargazers_count":72,"open_issues_count":3,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T07:51:35.931Z","etag":null,"topics":["django","django-rest-framework","es6","heroku","javascript","python3","react"],"latest_commit_sha":null,"homepage":"https://secure-brushlands-44802.herokuapp.com/link2/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/valentinogagliardi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-11T10:11:51.000Z","updated_at":"2024-09-23T02:09:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"cadf918f-515d-40e1-9836-1662c09aa341","html_url":"https://github.com/valentinogagliardi/django-rest-react-pycon","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"0b97670dc996d4ca31472db19fed967937153681"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valentinogagliardi%2Fdjango-rest-react-pycon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valentinogagliardi%2Fdjango-rest-react-pycon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valentinogagliardi%2Fdjango-rest-react-pycon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valentinogagliardi%2Fdjango-rest-react-pycon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valentinogagliardi","download_url":"https://codeload.github.com/valentinogagliardi/django-rest-react-pycon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741849,"owners_count":21154388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-rest-framework","es6","heroku","javascript","python3","react"],"created_at":"2024-10-15T00:08:07.128Z","updated_at":"2025-04-13T16:21:54.445Z","avatar_url":"https://github.com/valentinogagliardi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# django-rest-react-pycon\n\u003e Demo repo for Pycon X talk \"Decoupling Django with Django REST (and a sprinkle of React)\"\n\n\u003cp\u003e\n  \u003ca href=\"https://twitter.com/gagliardi_vale\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Twitter: gagliardi_vale\" src=\"https://img.shields.io/twitter/follow/gagliardi_vale?style=social\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Book in progress!\n\nStay tuned on my upcoming book for Apress \"Decoupled Django\". Understand and build **decoupled Django architectures for JavaScript frontends**. Follow on [Twitter](https://twitter.com/gagliardi_vale) and [Telegram](https://t.me/valentinogagliardi/) for news and sneak peaks.\n\n## Intro\n\nThe following repo should be intended as a loose guideline for structuring your Django REST project with React. It is an evolution of [django-drf-react-quickstart](https://github.com/valentinogagliardi/django-drf-react-quickstart). The companion article [Django REST with React (Django 2.0 and a sprinkle of testing)](https://www.valentinog.com/blog/drf/) gave me the idea for proposing a talk at Pycon X Florence 2019.\n\nFor the integration with Vue, and more advanced topics, follow on [Twitter](https://twitter.com/gagliardi_vale) and [Telegram](https://t.me/valentinogagliardi/) for news and sneak peaks about the \"Decoupled Django\" book.\n\n## What's inside\n\nThis repo wants to give you two ideas for organizing a Django REST project with React. The same concepts apply to Vue. The project has two apps:\n\n1. **create-react-app_1** is a Django application containing a front-end made with create-react-app. It is a stand-alone front-end meant to be used as a single page application. The application consumes a Django REST API and uses JWT authentication. With this approach you get the best of both worlds. I did not create any model for this app, it gets the data from the API exposed by custom_webpack_conf_2/urls.py.\n\n2. **custom_webpack_conf_2** is a Django app containing an example of a custom webpack configuration. This app exposes a REST API. It's just one of the approaches for producing a bundle into a custom location (usually app_name/static/js). The application consumes a Django REST API and uses JWT authentication. The custom webpack approach does not scale well and you'll get soon in trouble when you'll want to reach for code splitting. It works fine for smaller projects though. This project uses Redux. Demo on [Heroku](https://secure-brushlands-44802.herokuapp.com/link2/).\n\n## Development\n\nInstall the dependencies:\n\n```bash\npip install -r requirements/dev.txt\n```\n\nRun the project:\n\n````bash\nexport DJANGO_SETTINGS_MODULE=\"django_rest_react.settings.dev\"; export SECRET_KEY='CHANGEME!' \npython manage.py runserver\n````\n\n## Test\n\nFor UI testing see `./custom_webpack_conf_2/src/README.md`\n\n## Coverage\n\n````bash\nexport DJANGO_SETTINGS_MODULE=\"django_rest_react.settings.dev\"; export SECRET_KEY='CHANGEME!' \ncoverage run --source='custom_webpack_conf_2' manage.py test\ncoverage report\ncoverage html\n````\n\n## Deploy on Heroku\n\n```\ngit push heroku master\n```\n\n# Abstract of the talk\n\nWith the rise of JavaScript as the lingua-franca of the web and the steady growth of libraries like React, today’s web developers can build rich and well structured frontend experiences. Pair that with Django and Django REST framework and you get the perfect combination. But it’s not all bells and whistles. What challenges are we going to face when decoupling Django with Django REST? What are the best practices? How to structure such a project? In this talk I’ll guide Django developers (both beginners and intermediate) from 0 to structuring a decoupled Django project.\n\n## Description\n\nThe goal of this talk is to give Django developers an overview of a Django REST project, paired with React, as well as the trade-offs of the decoupled approach. By the end of the talk the developer should be able to configure a new Django REST project and use a frontend library for interacting with the API.\n\n### 1. Why and when to decouple Django\n\nThere are many ways for decoupling a Django application and each one depends on the use case. In this section we’ll outline what decoupling is, why decoupling is a great approach and why sometimes it is not the right thing to do. We’ll see what the challenges of such approach are and how to deal with authentication in a decoupled context.\n\n### 2. Django REST fundamentals\n\nDjango REST framework is a Django application for exposing API endpoints from a Django project. It this section we’ll see the building blocks of a Django API app: the model, the serializer and the view. Models should not be a surprise for the audience, they come from Django. Serializers instead are provided by Django REST. We’ll also see how a Django REST view looks like and how to leverage both function based views and generic views within the project. \n\n### 3. Setting up the frontend\n\nThe key for a truly decoupled experience is a frontend for consuming and interacting with the API. In this section we’ll see how to structure a Django REST project alongside with React. We will explore two approaches: fully decoupled frontend and mixed frontend.\n\n### 4. A note on testing and closing words\n\nIn the context of a decoupled Django site we move from the typical Django tests to testing the API’s response instead. We will see how a simple API test looks like. And for the JavaScript frontend we’ll take a look at the current available tooling for functional testing.\n\nQuestions?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalentinogagliardi%2Fdjango-rest-react-pycon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalentinogagliardi%2Fdjango-rest-react-pycon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalentinogagliardi%2Fdjango-rest-react-pycon/lists"}