Develop Reference

Issue running React App on Django server with webpack

I am building a web-application using Django as the backend and want to implement a ReactJS framework frontend. Each application that I have as of now runs properly, independently of one another. I have also implemented webpack and it appears to configure properly, as it will run my ReactJS application on the localhost. Being new to webpack (and web-development in general) I am unsure how to get React to run on the Django local server (127.0.0.1:8000). I understand from the many forums I've read through that the javascript files need to be bundled and then read into the django app. Below are the relevant files:
package.json
{
"name": "package.json",
"version": "1.0.0",
"description": "This is the private repository for the USA Baseball analytics team.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "SET NODE_ENV=development babel src -d lib",
"build-prod": "SET NODE_ENV=development babel src -d lib",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/USAB-Analytics/BaldEagle.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/USAB-Analytics/BaldEagle/issues"
},
"homepage": "https://github.com/USAB-Analytics/BaldEagle#readme",
"dependencies": {
"react": "^16.2.0",
"express": "^4.16.3",
"react-dom": "^16.4.1",
"react-sortable-hoc": "^0.8.3",
"yarn": "^1.7.0",
"react-prop-types": "^0.4.0",
"semantic-ui-react": "^0.77.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "3.0.4",
"style-loader": "^0.19.1",
"css-loader": "^0.28.10",
"jsx-loader": "^0.13.2",
"react": "^16.4.0",
"webpack": "^4.10.2",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^3.0.4",
"webpack-command": "^0.2.1",
"webpack-dev-server": "^3.1.4"
},
"keywords": []
}
webpack.config.js
var path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//var BundleTracker = require('webpack-bundle-tracker')
const port = process.env.PORT || 3000;
process.env.NODE_ENV = 'production';
module.exports = {
mode: 'development',
entry: './frontend/src/index.js',
output: {
filename: 'bundle.[hash].js'
},
devtool: 'inline-source-map',
module: {
rules: [
// First Rule
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// Second Rule
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
sourceMap: true
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: './webapp/templates/webapp/home.html',
})
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};
frontend/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './css/main.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import {HomePage} from './components/HomePage.js'
import {Bios} from './components/Bios.js'
import {Bio} from './components/Bio.js'
import {NavBar} from './components/NavBar.js'
import {TeamsList} from './components/TeamsList.js'
import {TOSBios} from './components/TOSBios.js'
import {NT18Bios} from './components/NT18Bios.js'
import {CNTBios} from './components/CNTBios.js'
import {NT15Bios} from './components/NT15Bios.js'
class App extends React.Component {
render(){
var styles = {
'marginLeft': '210px'
}
return (
<Router>
<div className="col-sm-10">
<NavBar />
<div style={styles}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/bios/:id" component={Bio} />
<Route path="/bios/" component={Bios} />
<Route path="/teams/tos/:id" component={Bio} />
<Route path="/teams/cnt/:id" component={Bio} />
<Route path="/teams/nt18/:id" component={Bio} />
<Route path="/teams/nt15/:id" component={Bio} />
<Route path="/teams/cnt/" component={CNTBios} />
<Route path="/teams/nt18/" component={NT18Bios} />
<Route path="/teams/nt15/" component={NT15Bios} />
<Route path="/teams/tos/" component={TOSBios} />
<Route path="/teams/" component={TeamsList} />
</Switch>
</div>
</div>
</Router>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
webapp/templates/webapp/home.html
<!-- {% extends "webapp/header.html" %} -->
{% load render_bundle from webpack_loader %}
<html>
<head>
<meta charset="UTF-8">
<title>React with Django</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

These shouldn't be running on the same server. If you are looking to connect them you should be able to create config files and say if production the url I hit is xx.com/users otherwise if it is development it is localhost:8000/users. Why would you need both to run on the same server?

We use django-webpack-loader to render our webpack bundles in a django template (for a Vue app but it's the same fundamental idea).

You've configured your webpack for development mode. It means that you run the webpack development server. But you need to build your front-end application into a bundle and then use this bundle for your server side. Just remove the devServer section. Also, you can erase this process.env.NODE_ENV = 'production'; and change the mode to production. This operation will set your process.env.NODE_ENV to production(https://webpack.js.org/concepts/mode/).
If you need to test your app in development mode you can add proxy to package.json with the address of your back-end and run front and back separately.
Solution:
Add an npm command:
"build:prod": "<your_build_command> && mv <output_path>/index.html <path_to_backend>/<app_name>/templates && mv <output_path>/* <path_to_backend>/static"
Add this to your Django app settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

React index.html rendered but react component does not

i couldn't figure out why ReactDOM does't render my simple component but seems to keep and render just the plain index.html
package.json
{
"name": "client2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "babel-node buildScripts/server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.8.3",
"webpack-dev-middleware": "^3.1.3"
},
"babel": {
"presets": [
"es2015",
"react"
],
"env": {
"presets": [
"react-hmre"
]
}
}
}
webpack.config.dev.js
import webpack from 'webpack'
import path from 'path'
const HtmlWebpackPlugin = require('html-webpack-plugin');
export default {
devtool: 'inline-source-map',
entry: [
path.resolve(__dirname, 'src/index.js')
],
output: {
path: path.resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js'
},
module:{
rules:[
{test: /\.js$/ , loader:'babel-loader', exclude: '/node_modules/'},
{test: /\.jsx$/ , loader:'babel-loader', exclude: '/node_modules/'}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
]
}
buildScript/server.js
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import config from '../webpack.config.dev';
const compiler = webpack(config);
/* var express = require('express')
var path = require('path') */
const port = 8081;
const app = express();
app.listen(port, function (error) {
if(error) {
console.log(error);
}
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../src/index.html'));
});
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(){
super();
console.log("App Hello")
}
render(){
return(
<div>
<h1>Howdy from React!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hey!</title>
</head>
<body>
<div id="root"></div>
<h1>Hello World!</h1>
</body>
</html>
The only response i get is
With no logs from my index.js react "App".
I've been trying several solutions, none happened aside from my express server not working. What might be the problem here ? Thank you very much !

As I wrote in comment, you should include your js
<html lang="en">
<head>
<title>Hey!</title>
</head>
<body>
<div id="root"></div>
<h1>Hello World!</h1>
<script src="/bundle.js"></script>
</body>
</html>

Your html file needs to link to bundle.js
<script src="/bundle.js"></script>

Thanks for Leo Odishvili and Ben West for helping above - the answer is really adding <script src="/bundle.js"></script> to the index.html
The only change was to
change /bundles.js to "./webservice_entrypoint/bundle.js"as webservice_entrypoint would be the url path to my react app.
Thanks everyone !

Also you can check the "html-webpack-plugin" and add the plugin to the "plugins" configuration of the webpack.config.js, this will allow you to use any template html file from inside your src directly and bundle it in the dist/ folder with the included script tag already compiled and added. It is really an useful plugin.

Unable to setup a webpack+react+jquery+bootstrap project

My project is compiled correctly. But I get this error in the console whenever I load the webpage :
bundle.4bc8d06487c51394a532.js:71 Uncaught Error: Module build failed: SyntaxError: Unexpected token (31:4)
[0m [90m 29 | [39m
[90m 30 | [39m[33mReactDOM[39m[33m.[39mrender(
[31m[1m>[22m[39m[90m 31 | [39m [33m<[39m[33mProvider[39m store[33m=[39m{createStoreWithMiddleware(reducers)}[33m>[39m
[90m | [39m [31m[1m^[22m[39m
[90m 32 | [39m [33m<[39m[33mApp[39m [33m/[39m[33m>[39m
[90m 33 | [39m [33m<[39m[33m/[39m[33mProvider[39m[33m>[39m
[90m 34 | [39m [33m,[39m document[33m.[39mquerySelector([32m'.container'[39m))[33m;[39m[0m
at Object.106 (bundle.4bc8d06487c51394a532.js:71)
at __webpack_require__ (bundle.4bc8d06487c51394a532.js:20)
at 106 (bundle.4bc8d06487c51394a532.js:63)
at bundle.4bc8d06487c51394a532.js:66
Here are my main files :
webpack.config.js
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const extractSass = new ExtractTextPlugin({
filename: "styles.css",
});
const VENDOR_LIBS = [
'react', 'lodash', 'redux', 'react-redux', 'react-dom', 'react-input-range', 'redux-form', 'redux-thunk'
];
module.exports = {
entry: {
bundle: './src/index.js',
vendor: VENDOR_LIBS
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
},
{
test: /\.(scss)$/,
use: extractSass.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", // Used for Bootstrap JavaScript components
jQuery: "jquery", // Used for Bootstrap JavaScript components
Tether: 'tether',
Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
}),
extractSass
] };
.babelrc
{
"presets": ["babel-preset-env", "react"]
}
package.json
{
"name": "app-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build": "webpack",
"serve": "webpack-dev-server"
},
"repository": "",
"author": "Edgar KAMDEM",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"jquery-ui-dist": "^1.12.1",
"lodash": "^4.17.4",
"mxgraph": "^3.8.0",
"popper.js": "^1.12.9",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-input-range": "^1.2.2",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.9",
"precss": "^2.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.7"
}
}
index.js
// Bootstrap dependencies
window.$ = window.jQuery = require('jquery') // required for bootstrap
window.Popper = require('popper.js') // required for tooltip, popup...
import 'bootstrap'
// import '../scss/main.scss' import it in prod
import './index.scss' // include bootstrap css file with own modifications
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4)
// use tooltip and popover components everywhere
$(function (){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app test</title>
<link rel="stylesheet" type="text/css" href="build/styles.css">
<link rel="stylesheet" href="external/jqueryui-ruler/css/jquery.ui.ruler.css">
</head>
<body >
<header >
</header>
<!-- Begin page content -->
<div role="main" class="container">
</div>
<footer>
</footer>
<script src="build/bundle.4bc8d06487c51394a532.js"></script>
<script src="build/vendor.b97aa871a1eeaedf871a.js"></script>
</body>
</html>
app.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div style="font-size: 40px">React simple starter</div>
);
}
}
It's supposed to display "React simple starter" on the html page, but it doesn't.
Please help and let me know if you want to see other files
PS: I'm very new with webpack

Try adding babel-preset-env and babel-preset-react to your devDependencies and remove babel-preset-es2015:
yarn add -d babel-preset-env babel-preset-react or npm install -D babel-preset-env babel-preset-react
And change your .babelrc :
{
"presets": [
["react"],
["env"]
],
}
Edit:
Try creating your redux store like this:
const store = createStore(reducers) //assuming reducers is your combined reducers
...
<Provider store={store}>
Instead of :
const createStoreWithMiddleware = applyMiddleware()(createStore);
...
<Provider store={createStoreWithMiddleware(reducers)}>

The error in OP seems to indicate that the code from index.js ended up in encoded format in corresponding bundle. Are you sure the index.js is using proper characters on or after line with code const createStoreWithMiddleware = applyMiddleware()(createStore); ?

how to run run --history-api-fallback inside of webpack

let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
I am using reactjs router and in tutorials, they majority tell you to write
--history-api-fallback for the router to work
let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
{
"name": "pr_v1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server/index.js & webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"dotenv": "^4.0.0",
"express": "^4.15.4",
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"request": "^2.82.0",
"webpack": "^3.5.5"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {Router, Route, browserHistory} from 'react-router';
import App from './Components/App.jsx';
const store = createStore(Reducer, applyMiddleware(thunk));
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/user' component={App}/>
</Router>
,document.getElementById('root'));
I am new to react-router and i am trying to get the --history-api-fallback to work. Tutorials say to put it in the build of the json file, but i do not have a build script. I am thinking that maybe it should be somewhere is the webpack config file. I am not sure. My question is where can i insert --history-api-fallback so that it works.

For webpack dev sever, you just need to add webpack dev config. This is going to work in your dev environment.
devServer:
{
historyApiFallback: true
},

Webpack unexpected token in JS file

I'm learning react and flux, and in lesson 1 the tutorial has failed me.
This tutorial immediately breaks on 'npm start' with the following errors:
ERROR in ./src/js/main.js
Module parse failed: /Users/me/Projects/egghead-flux/src/js/main.js Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:16)
at Parser.pp$4.raise (/Users/me/Projects/egghead-flux/node_modules/acorn/dist/acorn.js:2221:15)
It doesn't seem to understand ReactDOM.render(<App />, document.getElementById('main')); I assume parsing the JSX <App /> part is failing.
Has anyone encountered this issue before? Removing / reinstalling node modules does nothing. Is there some setup step missing from the video?
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('main'));
App.js
import React from 'react';
export default class App extends React.Component {
render(){
return <h1>Flux</h1>
}
}
webpack.config.js
module.exports = {
entry: './src/js/main.js',
output:{
path:'./dist',
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
inline: true,
contentBase: './dist'
},
module: {
loaders: [
{
test: '/\.jsx?$/',
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:{
presets: ['es2015', 'react']
}
}
]
}
}
package.json
{
"name": "egghead-flux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"flux": "^3.1.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}

Turns out:
test: '/\.jsx?$/',
should be:
test: /\.jsx?$/,
Dammit.