{"id":30307259,"url":"https://github.com/fullstackwithlawrence/django_with_react","last_synced_at":"2026-04-11T05:36:02.280Z","repository":{"id":37900637,"uuid":"452872603","full_name":"FullStackWithLawrence/django_with_react","owner":"FullStackWithLawrence","description":"Hybrid Django + ReactJS Reference Project","archived":false,"fork":false,"pushed_at":"2025-07-24T16:53:49.000Z","size":737,"stargazers_count":11,"open_issues_count":10,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-11T05:57:30.876Z","etag":null,"topics":["fullstack","python","react"],"latest_commit_sha":null,"homepage":"","language":"Python","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/FullStackWithLawrence.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,"zenodo":null},"funding":{"github":"lpm0073","patreon":"FullStackWithLawrence"}},"created_at":"2022-01-27T22:58:18.000Z","updated_at":"2025-08-04T18:31:27.000Z","dependencies_parsed_at":"2025-08-11T05:57:32.814Z","dependency_job_id":"80db99f7-3ad5-4550-8dc4-b416235f3e46","html_url":"https://github.com/FullStackWithLawrence/django_with_react","commit_stats":null,"previous_names":["fullstackwithlawrence/django_with_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FullStackWithLawrence/django_with_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullStackWithLawrence%2Fdjango_with_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullStackWithLawrence%2Fdjango_with_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullStackWithLawrence%2Fdjango_with_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullStackWithLawrence%2Fdjango_with_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FullStackWithLawrence","download_url":"https://codeload.github.com/FullStackWithLawrence/django_with_react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullStackWithLawrence%2Fdjango_with_react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270837455,"owners_count":24654386,"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","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["fullstack","python","react"],"created_at":"2025-08-17T10:44:47.109Z","updated_at":"2025-12-30T21:37:06.897Z","avatar_url":"https://github.com/FullStackWithLawrence.png","language":"Python","funding_links":["https://github.com/sponsors/lpm0073","https://patreon.com/FullStackWithLawrence"],"categories":[],"sub_categories":[],"readme":"# Hybrid Django + ReactJS Reference Project\n[![hack.d Lawrence McDaniel](https://img.shields.io/badge/hack.d-Lawrence%20McDaniel-orange.svg)](https://lawrencemcdaniel.com)\n[![Built with Cookiecutter Django](https://img.shields.io/badge/built%20with-Cookiecutter%20Django-ff69b4.svg?logo=cookiecutter)](https://github.com/cookiecutter/cookiecutter-django/)\n\nLicense: MIT\n\nThis is a fully functional reference project that demonstrates a hybrid Django + ReactJS setup. After building this environment locally you can view [this example page](http://localhost:8000/app) with ReactJS running inside of Django. \n\nThe React app in this project was scaffolded with [Create React App](https://create-react-app.dev/). It is completely scalable and is wrapped inside of a Django app located in [django_with_react/djangoapps/frontend](https://github.com/lpm0073/django_with_react/tree/main/django_with_react/djangoapps/frontend). You build the React app normally, using `npm run build` or `yarn run build`. This [single view](https://github.com/lpm0073/django_with_react/blob/main/django_with_react/djangoapps/frontend/views.py) within the frontend app enables the Django templating system to automatically find and seamlessly integrate the React build's optimized js and css bundles. You have the option of using both Django urls.py as well as React Router. Additionally, you can pass data to the React app using both a traditional REST api or using the Django template context. The React build is served entirely by Django's templating system and native static asset functionality.\n\nThere are some anciliary objectives as well that bear mentioning. The local development stack consists of the following fundamental building blocks:\n\n1. **Python Virtual Environment** This project uses Python3.9 with what I consider to be the ideal set of PyPi packages for a garden variety Django project as of this writing.\n2. **Django** project that was scaffolded with [cookiecutter-django](https://github.com/cookiecutter/cookiecutter-django) and includes a fully configured implementation of [Django REST Framework](https://www.django-rest-framework.org/) that is ideally suited for serving a REST api for the ReactJS frontend.\n3. The **ReactJS** app.\n4. **Sphinx** documentation server that was also scaffolded with CookieCutter\n5. **Docker** which provides all backend services (see the list below, in this section)\n6. **HTTPS**. This project also includes documentation and an example of how to implement https in your local development environment, which is helpful for things like testing oauth.\n7. **Opinionated Code Styling Enforcement**. This project includes an example implementation of `pre-commit` with `black` and `flake8` code formatters.\n\nThe Docker backend services consist of the following:\n -  Django WSGI app server:\n    - http://localhost:8000\n    - https://django_with_react.stepwisemath.local/\n - Nginx server\n - Postgres database server: port 5432\n - Sphinx Documentation server: http://localhost:7000\n - Flower server: http://localhost:5555\n - Celery worker\n - CeleryBeat server\n\n## Quick Start\n\nDevelopment environment prerequisites:\n- Docker 20.x.x\n- Python 3.9\n- node 14.x.x\n- npm 8.x.x\n\n\n### 1. clone this repo\n```bash\ngit clone https://github.com/lpm0073/django_with_react.git\ncd django_with_react\n```\n\n### 2. Python Django Initializations\n```bash\npython -m venv venv\nsource .envs/.local/.django     # environment variables for Django as well as Docker\nsource .envs/.local/.postgres   # PostgreSQL host, db, user, pwd\nsource venv/bin/activate        # the Python virtual environment, for VS Code linting and auto code completion\npip install -r requirements/local.txt\n```\n\n### 3. ReactJS Initialization\n```bash\ncd ./django_with_react/djangoapps/frontend/\nnpm install\ncd ../../../\n```\n\n### 4. Launch Docker\n```bash\ndocker-compose -f local.yml up --build\n```\n\n### 5. Initialize Postgres\n```bash\nsudo rm -r ./db/\nmkdir ./db\nmkdir ./db/data/\nmkdir ./db/backups/\ninitdb ./db/data/\n```\n\n### 6. View the app\nhttp://localhost:8000/app\n\n\n## Better, Smarter Start\n\nThis repo is only intended to serve as a reference. You really should build your own environment, using this project as a guide.\n\n### Cookie Cutter Django Settings\n\nFollowing are my responses to the Cookie Cutter Django on-screen questionnaire.\n\n```bash\ncookiecutter https://github.com/cookiecutter/cookiecutter-django\n\n$ project_slug [django_with_react]: \n$ description [Behold My Awesome Project!]: Hybrid Django + ReactJS setup   \n$ author_name [Daniel Roy Greenfeld]: Lawrence McDaniel\n$ domain_name [example.com]: dwr.lawrencemcdaniel.com    \n$ email [lawrence-mcdaniel@example.com]: lpm0073@gmail.com\n$ version [0.1.0]: \n$ Select open_source_license: \n1 - MIT\n2 - BSD\n3 - GPLv3\n4 - Apache Software License 2.0\n5 - Not open source\n$ Choose from 1, 2, 3, 4, 5 [1]: 1\n\n$ timezone [UTC]: \n$ windows [n]: n\n$ use_pycharm [n]: n\n$ use_docker [n]: y\n$ Select postgresql_version:\n1 - 14.1\n2 - 13.5\n3 - 12.9\n4 - 11.14\n5 - 10.19\n$ Choose from 1, 2, 3, 4, 5 [1]: \n\n$ Select js_task_runner:\n1 - None\n2 - Gulp\n$ Choose from 1, 2 [1]: \n\n$ Select cloud_provider:\n1 - AWS\n2 - GCP\n3 - None\n$ Choose from 1, 2, 3 [1]: \n\n$ Select mail_service:\n1 - Mailgun\n2 - Amazon SES\n3 - Mailjet\n4 - Mandrill\n5 - Postmark\n6 - Sendgrid\n7 - SendinBlue\n8 - SparkPost\n9 - Other SMTP\n$ Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9 [1]: 2\n\n$ use_async [n]: y\n$ use_drf [n]: y\n$ custom_bootstrap_compilation [n]: n\n$ use_compressor [n]: y\n$ use_celery [n]: y\n$ use_mailhog [n]: n\n$ use_sentry [n]: y\n$ use_whitenoise [n]: y\n$ use_heroku [n]: n\n$ Select ci_tool:\n1 - None\n2 - Travis\n3 - Gitlab\n4 - Github\n$ Choose from 1, 2, 3, 4 [1]: 4\n\n$ keep_local_envs_in_vcs [y]: y\n$ debug [n]: n\n```\n\n### Setting up your local dev environment\n\n1. **Run cookiecutter-django**\n\n2. **Create a virtual environment** We're using Python 3.9x for this project. On macOS Homebrew is the best way to install specific versions of Python. Note that by using Homebrew you'll be able to safely install multiple versions of Python.\n\n\n```bash\n# check your python version\npython3.9 --version\n\ncd github/querium/stepwisemath.ai/django_with_react/\npython3.9 -m venv venv\n```\n\n3. **Launch the virtual environment**\n\n```bash\ncd github/querium/stepwisemath.ai/django_with_react/\nsource .envs/.local/.django     # environment variables for Django as well as Docker\nsource .envs/.local/.postgres   # PostgreSQL host, db, user, pwd\nsource venv/bin/activate        # the Python virtual environment, for VS Code linting and auto code completion\n```\n\n4. **Launch Docker Desktop** or a docker daemon\n\n5. **Build and launch the docker image** This will launch all backend services simultaneously, noting that these will be running from within the Docker container rather than your macOS environment. Therefore, for any of these services to be exposed outside of the Docker container they have to be explicitly mounted.\n\n```bash\ncd github/querium/stepwisemath.ai/django_with_react/\ndocker-compose -f local.yml build\ndocker-compose -f local.yml up\n```\n\n### Setting up HTTPS on local dev environment\n\nSee:\n- [Developing locally with HTTPS](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html?highlight=https#developing-locally-with-https)\n\n- [MKCERT: VALID HTTPS CERTIFICATES FOR LOCALHOST](https://words.filippo.io/mkcert-valid-https-certificates-for-localhost/)\n\n```bash\n# edit your hosts file\nvim /etc/hosts\n\n# add this near the bottom of the file\n127.0.0.1 django_with_react.local\n\n# you'll need to restart your local computer afterwards.\n```\n\nTest your connection: https://django_with_react.local/\n\n### Setting up Postgres in your local Dev environment\n\nSee this article on locally [setting up Postrgres with Docker:](https://betterprogramming.pub/how-to-run-postgresql-in-a-docker-container-on-macos-with-persistent-local-data-440e7172821e)\n\n```bash\n# from inside your project root folder. ie django_with_react/\nmkdir ./db\nmkdir ./db/data/\nmkdir ./db/backups/\ninitdb ./db/data/\n```\n\n### Docker Guide\n\nThis project relies on Docker for both the development environment in macOS as well as the deployment enivronment on AWS EC2 Ubuntu 20.04 LTS.\n\nNote the two yaml files in the root of this project, `./local.yml` and `./production.yml` containing the Docker image build specifications for all of the backend services described above.\n\n- See detailed [cookiecutter-django Docker Development documentation](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html).\n\n- Also see: https://docs.docker.com/samples/django/\n\n```bash\n# Build and launch the docker containers\ndocker-compose -f local.yml up --build\n\n# Run docker containers as a daemon\ndocker-compose -f local.yml up -d\n\n# View docker container states\ndocker-compose -f local.yml ps\n\n# View logs\ndocker-compose -f local.yml logs\n\n# command line syntax guideline\ndocker-compose -f local.yml run --rm [SERVICE] [service-specific command]\n# where [SERVICE] is one of: django, postgres, redis, node, flower, docs, celeryworker, celerybeat\n\n# Example Django commands\ndocker-compose -f local.yml run --rm django python manage.py collectstatic\ndocker-compose -f local.yml run --rm django python manage.py startapp\ndocker-compose -f local.yml run --rm django python manage.py migrate\ndocker-compose -f local.yml run --rm django python manage.py createsuperuser\ndocker-compose -f local.yml run --rm django python manage.py shell\ndocker-compose -f local.yml run --rm django python manage.py test\n\n# Example Postgres commands\ndocker-compose -f local.yml run --rm postgres psql -d django_with_react -U vyLNQFrxbTPUWjLCLMndHtYfbmrKsNYV -W\n# pwd: JVUYsywPXB3uHJocoC19mkRacYlZqR8EFNl5qjYthlkNiml4owZXfR1corVm3aAO\n```\n\n#### Trouble shooting Docker\n\nOn macOS: AirPlay Receiver listens on port 7000, which conflicts with the Sphinx Documentation\ndocker container `django_with_react_local_docs` described in local.yml.\n\nSee: https://developer.apple.com/forums/thread/682332\n\nTo resolve: disable `Airplay Receiver` in `System Prferences` / `Sharing`. Then verify that the port is available with the following\n\n```bash\n# Error response from daemon: Ports are not available: listen tcp 0.0.0.0:7000: bind: address already in use\nsudo lsof -i tcp:7000\n```\n\n### Setting Up and Integrating ReactJS\n\n\n#### Django app\n```bash\n# scaffold a new djangoapp\nmkdir ./django_with_react/djangoapps\ndocker-compose -f local.yml run --rm django python manage.py startapp frontend\nmv ./frontend ./django_with_react/djangoapps/\n\ncd ./django_with_react/djangoapps/frontend\nnode --version\nnpm --version\nnpx --version\n```\n\n#### ReactJS\n\nsee: [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html)\n\n```bash\ncd ./django_with_react/djangoapps\nnpx create-react-app frontend\nyarn run build\n```\n\n#### ReactJS Integration to Django\n\nThe following three files are the key to tightly integrating the ReactJS app to the Django templating system.\n\n- [django_with_react/djangoapps/frontend/views.py](https://github.com/lpm0073/django_with_react/blob/main/django_with_react/djangoapps/frontend/views.py)\n- [django_with_react/djangoapps/frontend/templates/index.html](https://github.com/lpm0073/django_with_react/blob/main/django_with_react/djangoapps/frontend/templates/index.html)\n- [config/settings/base.py](https://github.com/lpm0073/django_with_react/blob/main/config/settings/base.py#L338)\n#### Additional Django Settings\nThe following is added to `settings/base.py` in order to integrate static asset collection into Django templating:\n\n```Python\nFRONTEND_DIR = APPS_DIR / \"djangoapps/frontend\"\nSTATICFILES_DIRS += [\n    str(FRONTEND_DIR / \"build/static\"),\n    str(FRONTEND_DIR / \"public/assets\"),\n]\nWHITENOISE_ROOT = FRONTEND_DIR / \"build\"\n```\n#### Running\n\nThe React app runs inside of Django and therefore **does not** require a node dev server running on port 3000.\n**However, you do need to run Django's manage.py collectstatic in order to copy the ReactJS asset-manifest.json file into a location where the Django templating system can open and read it at run-time.**\n\n```bash\ndocker-compose -f local.yml up --build\ndocker-compose -f local.yml run --rm django python manage.py collectstatic\n```\nnavigate to http://localhost:8000/app/\n\n\n\n## Settings\n\nMoved to [settings](http://cookiecutter-django.readthedocs.io/en/latest/settings.html).\n\n## Basic Commands\n\n\nFor convenience, you can keep your normal user logged in on Chrome and your superuser logged in on Firefox (or similar), so that you can see how the site behaves for both kinds of users.\n\n### Type checks\n\nRunning type checks with mypy:\n\n    $ mypy django_with_react\n\n### Test coverage\n\nTo run the tests, check your test coverage, and generate an HTML coverage report:\n\n    $ coverage run -m pytest\n    $ coverage html\n    $ open htmlcov/index.html\n\n#### Running tests with pytest\n\n    $ pytest\n\n### Live reloading and Sass CSS compilation\n\nMoved to [Live reloading and SASS compilation](http://cookiecutter-django.readthedocs.io/en/latest/live-reloading-and-sass-compilation.html).\n\n### Celery\n\nThis app comes with Celery.\n\nTo run a celery worker:\n\n``` bash\ncd django_with_react\ncelery -A config.celery_app worker -l info\n```\n\nPlease note: For Celery's import magic to work, it is important *where* the celery commands are run. If you are in the same folder with *manage.py*, you should be right.\n\n### Sentry\n\nSentry is an error logging aggregator service. You can sign up for a free account at \u003chttps://sentry.io/signup/?code=cookiecutter\u003e or download and host it yourself.\nThe system is set up with reasonable defaults, including 404 logging and integration with the WSGI application.\n\nYou must set the DSN url in production.\n\n## Docker Deployment\n\nThe following details how to deploy this application. See detailed [cookiecutter-django Docker Development documentation](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html).\n\n\n## Settings\n\nMoved to [settings](http://cookiecutter-django.readthedocs.io/en/latest/settings.html).\n\n## Basic Commands\n\n### Setting Up Your Users\n\n-   To create a **normal user account**, just go to Sign Up and fill out the form. Once you submit it, you'll see a \"Verify Your E-mail Address\" page. Go to your console to see a simulated email verification message. Copy the link into your browser. Now the user's email should be verified and ready to go.\n\n-   To create an **superuser account**, use this command:\n\n        $ python manage.py createsuperuser\n\nFor convenience, you can keep your normal user logged in on Chrome and your superuser logged in on Firefox (or similar), so that you can see how the site behaves for both kinds of users.\n\n### Type checks\n\nRunning type checks with mypy:\n\n    $ mypy django_with_react\n\n### Test coverage\n\nTo run the tests, check your test coverage, and generate an HTML coverage report:\n\n    $ coverage run -m pytest\n    $ coverage html\n    $ open htmlcov/index.html\n\n#### Running tests with pytest\n\n    $ pytest\n\n### Live reloading and Sass CSS compilation\n\nMoved to [Live reloading and SASS compilation](http://cookiecutter-django.readthedocs.io/en/latest/live-reloading-and-sass-compilation.html).\n\n### Celery\n\nThis app comes with Celery.\n\nTo run a celery worker:\n\n``` bash\ncd django_with_react\ncelery -A config.celery_app worker -l info\n```\n\nPlease note: For Celery's import magic to work, it is important *where* the celery commands are run. If you are in the same folder with *manage.py*, you should be right.\n\n### Sentry\n\nSentry is an error logging aggregator service. You can sign up for a free account at \u003chttps://sentry.io/signup/?code=cookiecutter\u003e or download and host it yourself.\nThe system is set up with reasonable defaults, including 404 logging and integration with the WSGI application.\n\nYou must set the DSN url in production.\n\n## Deployment\n\nThe following details how to deploy this application.\n\n### Docker\n\nSee detailed [cookiecutter-django Docker documentation](http://cookiecutter-django.readthedocs.io/en/latest/deployment-with-docker.html).\n### Custom Bootstrap Compilation\n\nThe generated CSS is set up with automatic Bootstrap recompilation with variables of your choice.\nBootstrap v5 is installed using npm and customised by tweaking your variables in `static/sass/custom_bootstrap_vars`.\n\nYou can find a list of available variables [in the bootstrap source](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss), or get explanations on them in the [Bootstrap docs](https://getbootstrap.com/docs/5.1/customize/sass/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackwithlawrence%2Fdjango_with_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackwithlawrence%2Fdjango_with_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackwithlawrence%2Fdjango_with_react/lists"}