use create react app with django
Project description
django-create-react-app
This app helps us to integrate the react in django project through create react app template. This app works both in dev and production mode of the react.
Quick start
Install
pip install django-create-react-app
Add "create_react_app" to your INSTALLED_APPS setting like this::
INSTALLED_APPS = [
...
'create_react_app',
]
Settings Configuration
Add Build Directory in the Settings
yarn build or npm run build
This creates the build directory inside the react folder. Add this build directory in the django settings e.g
REACT_BUILD_DIRECTORY = os.path.join(BASE_DIR, 'app', 'react', 'build')
Add create react app configuration into your settings::
CREATE_REACT_APP = {
'DEFAULT': {
'BUNDLE_DIR_NAME': REACT_BUILD_DIRECTORY,
'FRONT_END_SERVER': "http://localhost:3000/",
'is_dev': False,
}
}
Use it in your templates ::
{% load react_bundle_loader %}
<html>
<head>
{% render_bundle_css %}
</head>
<body>
....
{% render_bundle_js %}
</body>
</head>
Add Below code for Collectstatic Finder to find the build folder ::
STATICFILES_DIRS = (
os.path.join(REACT_BUILD_DIRECTORY, 'static'),
)
#Adding Multiple React Apps inside django Project
CREATE_REACT_APP = {
'DEFAULT': {
'BUNDLE_DIR_NAME': CLIENT_FRONTEND_BUILD,
'FRONT_END_SERVER': "http://localhost:3000/",
'is_dev': True,
},
'ADMIN': {
'BUNDLE_DIR_NAME': ADMIN_FRONTEND_BUILD,
'FRONT_END_SERVER': "http://localhost:3001/",
'is_dev': True,
},
}
Rendering react admin app inside templates ::
{% load react_bundle_loader %}
<html>
<head>
{% render_bundle_css ADMIN %}
</head>
<body>
<div id="root"></div>
{% render_bundle_js ADMIN %}
</body>
</head>
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Close
Hashes for django-create-react-app-0.8.2.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 405e9ecee2353470e8620a1ea72de351450c9cccef1ddfb51fa1d0b8e4a64d43 |
|
| MD5 | ee7a1a2c42fedffbc626290029ed7d2a |
|
| BLAKE2b-256 | eb030a4edf74c579368c3484d9fc26585132aad8bfe59b6360465eb1ea049f6a |
Close
Hashes for django_create_react_app-0.8.2-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 197d45c263539ea3c9cc184bc7391ddebb32c2ff1abf66c8fee68c7ff6cf9ded |
|
| MD5 | edc514129b78eb20f2909b41793ae8d9 |
|
| BLAKE2b-256 | a8afa65c933eb959492908713bdeeda8261098b2d0f9e9732de58a10b700c21c |
