A React bridge for Django
Project description
Django React Bridge
Think at Create React App but for Django
Installation
pip install django-react-bridge
Configuration
Add react_bridge to the installed apps:
INSTALLED_APPS = (
# ...
'react_bridge',
)
Add the react components context processor:
TEMPLATES = [
{
# ...
'OPTIONS': {
'context_processors': [
# ...
'react_bridge.context_processors.react_components',
],
},
},
]
Configure react bridge:
REACT_BRIDGE_JS_CONFIG = {
# Should use yarn or npm? default: True
'use_yarn': True,
# Path of your npm_command or yarn command according to use_yarn default: yarn
'npm_command': '/bin/path/to/my/yarn/or/npm',
# Path of package json where js is installed default: None your should configure your own
'package_json_path': os.path.join(BASE_DIR, 'js'),
# Path of bundler output default: package_json_path + '/static/build'
'output_path': os.path.join(BASE_DIR, 'static/build'),
# Url where the bundler output is server default: '/static/build/'
'output_url': '/static/build/',
# Webpack entry: https://webpack.js.org/configuration/entry-context/#entry
# default: package_json_path + '/src/index.js'
'entry': os.path.join(BASE_DIR, 'js/src/index.js'),
# Webpack resolve: https://webpack.js.org/configuration/resolve/#resolve
# default: None
'resolve': {
'alias': {
'@components': os.path.join(BASE_DIR, 'shared/components'),
}
},
}
# Use js bridge in dev mode
REACT_BRIDGE_DEV = True
To use django-react-bridge in non standard paths you should
include your top static in your STATICFILES_DIRS or your can change
output_path according to your staticfile configuration.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
To install al required node packages needs to run django-react-bridge run:
python manage.py jsinit path/to/my/js/project
This commands install all for you and when finished print on console a base
REACT_BRIDGE_JS_CONFIG with adjusted path related to initial given project path.
Usage
Inside your entry javascript file:
import React from 'react'
import ReactDOM from 'react-dom'
import { registerComponents } from 'django-react-bridge'
import MyComponent from './MyComponent'
registerComponents({
React,
ReactDOM,
components: {
// Register here yuor components
MyComponent,
}
})
Inside your Django template:
{% load react_bridge %}
<html>
<head>
{% react_head_tags %}
</head>
<body>
{% render_component "MyComponent" in_tag='div' myPropA='a' myPropB='b' %}
{% react_body_tags %}
</body>
</html>
Multi bundle set up:
If you need to split your app in multiple bundles:
REACT_BRIDGE_JS_CONFIG = {
'entry': {
'frontend': os.path.join(BASE_DIR, 'front/src/index.js'),
'admin': os.path.join(BASE_DIR, 'admin/src/index.js'),
}
}
Then in your template you need to pass the bundle name when render related tags:
{% load react_bridge %}
<html>
<head>
{% react_head_tags 'admin' %}
</head>
<body>
{% react_body_tags 'admin %}
</body>
</html>
Commands
NOTE:
Before run these commands you should run jsinit to install al relative
packages needed to run js build tools.
jsdevserver
Start dev server on port 9000.
You should have REACT_BRIDGE_DEV = True.
python manage.py jsdevserver
jsbuild
Build your js and realted assets according to your REACT_BRIDGE_JS_CONFIG.
python manage.py jsbuild
jsinit
Init a js project at given path.
python manage.py jsinit path/to/my/js/project
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
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django-react-bridge-0.2.0.tar.gz.
File metadata
- Download URL: django-react-bridge-0.2.0.tar.gz
- Upload date:
- Size: 8.4 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.2.0 pkginfo/1.5.0.1 requests/2.24.0 setuptools/49.6.0 requests-toolbelt/0.9.1 tqdm/4.48.2 CPython/3.7.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
380611ffca87ce8c9239e0c88947b0f48263789be0ddf5e5ac20e93cb0a51095
|
|
| MD5 |
ae7459e3451d2d043a472499d9fb09bc
|
|
| BLAKE2b-256 |
0051c6eacc5496137268cb471f240bb863f794ca0075d05a23cd1137f059b82e
|
File details
Details for the file django_react_bridge-0.2.0-py3-none-any.whl.
File metadata
- Download URL: django_react_bridge-0.2.0-py3-none-any.whl
- Upload date:
- Size: 13.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.2.0 pkginfo/1.5.0.1 requests/2.24.0 setuptools/49.6.0 requests-toolbelt/0.9.1 tqdm/4.48.2 CPython/3.7.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
b4f678657a46d6e1e1d19022d3c3be4a1daca3e3766226f72acfa09ba18bb652
|
|
| MD5 |
13448e3e09cb61913367160bf4df8989
|
|
| BLAKE2b-256 |
ed657199e0ad98af0fd73bc2d108dcf7eaf168b9862fcc6b1c0490ce000ebc30
|
