A little Python module helping to use Django and React on a single port during development and production
Project description
logicore-django-react
A little Python module helping to use Django and React on a single port during development and production
Serves as a foundation for logicore-forms-django project, but can be used without it
Running Django and React on a single port during development
TODO: Motivation
Usage from scratch: starting a Django + React project for development
- Install Django and start the project
mkvirtualenv django_react_project1 # Or venv etc
python3 -m pip install Django
django-admin.py startproject django_react_project1
cd django_react_project1
# Configure database, etc and commit
Now you have fresh Django! Check it works:
python manage.py runserver
and stop the development server.
- Make a React for-development installation (inside a Django folder), called
frontend
. Then, commit the changes and eject (we need it all):
create-react-app frontend
git add --all :/ && git commit -m "added frontend"
cd frontend
yarn eject
git add --all :/ && git commit -m "ejected frontend"
- Install
logicore_django_react
and make use of it from your Django project:
pip install -U logicore_django_react
(-U
is required to ensure to get latest version)
Add to urls.py
:
from logicore_django_react.urls import top, bottom
urlpatterns = [
# ...
]
urlpatterns = top + urlpatterns + bottom
Which will add necessary views for React to work via Django:
top
— serves hot-reload hooks and static filesbottom
— global (aka match-all,.*
) view, that just serves HTML template that includes React
The latter (HTML template) might be overridden by changing
the LOGICORE_DJANGO_REACT_TEMPLATE
setting, which is by default set to
logicore_django_react/home.html
filename.
Please see source of a corresponding template file as an example.
- Either:
- create your main app in Django (e.g. called
main
) - or add non-app templates and static folders
to prepare for React build bundles (templates and static files) to be saved into and remember it for the next step:
python manage.py startapp main # and add to INSTALLED_APPS
mkdir main/templates/ # here, "react" folder will automatically be added later
mkdir main/static/ # here, "react" folder will automatically be added later
or
# add "my_global_templates" to TEMPLATE_DIRS
mkdir my_global_templates/ # here, "react" folder will automatically be added later
# add "my_global_static" to STATICFILES_DIRS
mkdir my_global_static/ # here, "react" folder will automatically be added later
Hint: gitkeep the templates/static folders created
- Make modifications to
frontend
sub-project:
- in frontend/config/env.js — replace:
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
by
WDS_SOCKET_PORT: 3000,
This will make React project's built-in websocket to the right port — where the React's server is and not e.g. 8000.
- In
frontend/scripts/start.js
comment outopenBrowser
command. Before:
openBrowser(urls.localUrlForBrowser);
after:
//openBrowser(urls.localUrlForBrowser);
which doesn't open a browser at port 3000
, 'cause we don't want direct output
of React's dev server (it will be got by Django instead).
- make the following modifications to
frontend/scripts/build.js
file (to make build process also integrate with Django):- Add to the beginning:
const rimraf = require('rimraf');
const mkdirp = require('mkdirp');
- and also, install that modules (inside your
frontend
folder):
yarn add -D rimraf mkdirp
- before the first
.catch(...)
statement in the file, prepend the following extra step:
.then(function () {
const filename = __dirname + '/../build/asset-manifest.json';
const chunks = {};
JSON.parse(fs.readFileSync(filename)).entrypoints.map(e => {
let ext = e.split('.');
ext = ext[ext.length - 1];
if (!chunks[ext]) chunks[ext] = [];
chunks[ext].push(e.replace('static/', '/static/react/'));
});
const appBase = __dirname + '/../../main/';
const templates = {
css: url => `<link rel="stylesheet" type="text/css" href="${url}" />`,
js: url => `<script type="text/javascript" src="${url}"></script>`,
}
for (let [k, v] of Object.entries(templates)) {
const html = chunks[k]?.map(v).join('');
const fileDir = `${appBase}templates/react/`;
mkdirp.sync(fileDir);
fs.writeFileSync(`${fileDir}bundle_${k}.html`, html);
}
const srcDir = __dirname + '/../build/static/';
const destDir = appBase + 'static/react/';
console.log(`will remove dir ${destDir}`);
rimraf.sync(destDir);
fs.copySync(srcDir, destDir, { overwrite: true }, function (err) {
if (err) {
console.error(err);
} else {
console.log(chalk.green("copy assets to build: success!"));
}
});
})
and check that the path __dirname + '/../../main/
(the appBase
) points exactly to where your
location for auto-generated (during the build) templates and static files is.
This example is given for storing the files inside the folders of an app called main
.
- gitignore the auto-generated folders of yours:
main/templates/react/**
main/static/react/**
- Add files and commit — now you should have ready-to-go setup for developing and deploying Django + React project on a single port!
Project details
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
Hashes for logicore-django-react-1.0.0.dev11.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 7d44f3a8d30cbf8c8e16c7623ffbc8e47bace688d413a574a0a7ee3965463774 |
|
MD5 | f14e4d6cb934bdf79c542b9d5ac6571e |
|
BLAKE2b-256 | 3636493df872155c421b685138fc759ecb856183611a884c22d4586191b964e0 |
Hashes for logicore_django_react-1.0.0.dev11-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | a16bcbdd1ce1dc7e040c88d87024bdcf8cefab6017af402a99f26aefa5188f34 |
|
MD5 | 9dc8d11b0e2f3ebcd7cc1c177c81e654 |
|
BLAKE2b-256 | 4be2aec8887dbbe9c1ee8b87e631d5c46c89efd1d242020d06dfc02145686bed |