DEV Community

How to Serve a React Single-Page App with Django

Zach Taylor on September 21, 2020

TL;DR This article has been updated for Django 4, React 18 and Webpack 5. You can download the finished code from my GitHub repository. ...
Read full post
Collapse
 
svandegar profile image
Seraphin Vandegar •

Hey, thanks for the article, that really helped me!

I had to bump the webpack-bundle-tracker version to 1.0.0 because of a breaking change in the python package webpack_loader specifically made to match the v1 of the js lib (you see the nice circle here :o).

Collapse
 
mfsi profile image
mfsi-shubhankar •

thanks man!

Collapse
 
ckot profile image
Scott Silliman •

Hi Zack, Great Post! I ended up having to add

publicPath: "static/frontend/"
Enter fullscreen mode Exit fullscreen mode

to the config passed to the BundleTracker constructor in my webpack.config.js

by default my webstat-stats.json was being generated with:

"publicPath": "auto"
Enter fullscreen mode Exit fullscreen mode

which got prepended as

chunks: {
   frontend:  [{ ...
      publicPath: "autofrontend-<HASH>.js",
    ...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ckot profile image
Scott Silliman •

I just compared your package.json to mine, and perhaps this has to do with running:
npm install --save-dev webpack webpack-cli (without specifing versions) installed: 

"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
Enter fullscreen mode Exit fullscreen mode

several months ago, but running it today installed

"webpack": "^5.15.0",
"webpack-cli": "^4.3.1"
Enter fullscreen mode Exit fullscreen mode

? Just a guess

Collapse
 
zachtylr21 profile image
Zach Taylor •

I just tested this and yes, it looks like with the new versions of webpack and webpack-cli, the use of publicPath is required to make Django serve the bundle at the correct url. I've updated the article and the GitHub repo. Thanks for pointing this out!

Collapse
 
sbalasa profile image
Santhosh Balasa •

Thanks but it fails:

14:08 ~/rapyd (main)$ npm run dev

> rapyd@1.0.0 dev /home/rapyd/rapyd
> webpack --config webpack.config.js --watch --mode development

[webpack-cli] SyntaxError: Invalid regular expression: /(\p{Uppercase_Letter}+|\p{Lowercase_Letter}|\d)(\p{Uppercase_Letter}+)/: Invalid escape
    at pathToArgumentName (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:66:4)
    at addFlag (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:170:16)
    at traverse (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:243:21)
    at traverse (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:299:23)
    at traverse (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:248:24)
    at Object.getArguments (/home/rapyd/rapyd/node_modules/webpack/lib/cli.js:308:2)
    at WebpackCLI.getBuiltInOptions (/home/rapyd/rapyd/node_modules/webpack-cli/lib/webpack-cli.js:681:47)
    at loadCommandByName (/home/rapyd/rapyd/node_modules/webpack-cli/lib/webpack-cli.js:838:38)
    at Command.program.action (/home/rapyd/rapyd/node_modules/webpack-cli/lib/webpack-cli.js:1462:23)
    at Command.listener [as _actionHandler] (/home/rapyd/rapyd/node_modules/webpack-cli/node_modules/commander/index.js:922:31)

npm ERR! Linux 5.4.0-1038-aws
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
npm ERR! node v8.16.2
npm ERR! npm  v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! rapyd@1.0.0 dev: `webpack --config webpack.config.js --watch --mode development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the rapyd@1.0.0 dev script 'webpack --config webpack.config.js --watch --mode development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rapyd package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.config.js --watch --mode development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs rapyd
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls rapyd
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/rapyd/.npm/_logs/2021-06-20T14_08_07_461Z-debug.log
Enter fullscreen mode Exit fullscreen mode
Collapse
 
saiid-hc profile image
Saiid El Hajj Chehade •

Thanks for the tutorial! I had problems finding the static files too. I fixed it by

  1. changing publicPath: "static/frontend" to publicPath: "/static/frontend" in webpack.config.js.
  2. changing STATIC_URL = "static/" to STATIC_URL = "/static/".
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
cbirchby profile image
cbirchby • • Edited

Great article! Thank you for sharing.

I'm getting an error from the server console and browser console when the template is called. Has anyone come across this?

Browser Console:

GET http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js net::ERR_ABORTED 404 (Not Found)


127.0.0.1/:1 Refused to execute script from 
'http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Enter fullscreen mode Exit fullscreen mode

Server Console:

Not Found: /frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dlj profile image
Dolores Lopez Joffre •

Hi, Zach! I'm trying to figure out how to make this all work with a Typescript setup, do you have an example of the .babelrc or webpack-config.js changes I should make for it to be up and running? Thanks in advance, great post!

Collapse
 
zachtylr21 profile image
Zach Taylor •

Hey! I know it's been a while but you can find a TypeScript example here

Collapse
 
samar08 profile image
Samar • • Edited

I have followed the entire article as it is. But i am getting the below mentioned error. Does anyone know how to fix it?

django-react-starter\frontend\templates\frontend\index.html, error at line 11
Exception Value:

expected string or bytes-like object

8

9



10

11 ... render_bundle 'frontend' ..

12

13
Collapse
 
matt_b1f8ccb21f55eb profile image
matt_b1f8ccb21f55eb • • Edited

UPDATE: I did end up solving this, but I'm leaving my original message up. See below for the fix.

Hey @samar08 I'm receiving the same error. I've been trying to find a solution for a couple of days now and I'm coming up empty. I wasn't sure if it was a version thing or not. I'm using Python 3.9 and Django 4, but I tried Django 3 and had the same error. Are you using Python 3.9 or a different version? The babel and webpack versions I'm using seem to be releases from 2021 or earlier, so I don't think it's that. Have you solved it yet?

EDIT: I solved it! I had a newer version of webpack that was causing the issue. Python 3.9 and Django 4 seem to work fine so far.

pip uninstall django-webpack-loader
pip install django-webpack-loader==0.7.0

Collapse
 
dexoon profile image
Dexoon • • Edited

On 26th line of webpack.config.js redundant '},'

Collapse
 
zachtylr21 profile image
Zach Taylor •

Good catch. Fixed!

Collapse
 
theophylline profile image
Mike Qiu •

Thanks for the great post. I was wondering if you can achieve the same thing with create-react-app so that you don't have to do the webpack and babel setup?

Collapse
 
surajmeena profile image
Suraj Meena •

yeah, I am interested in knowing the same. Why is this article so complex when compared with this one. Essentially both try to achieve the same thing and atleast the latter one is tested by me and is a simpler approach

Collapse
 
Sloan, the sloth mascot
Comment deleted