I'm currently working on integrating React with Grails (2.3.11). It seems however that even the most basic setup is giving me a hard time. I've set up my file and folder structure that I have done before with past projects but my bundle.js file just doesn't seem to be want to be found. I keep getting a 404 no matter how many different times I change the path.
This is basically what happens all the time!
My package.json file:
{
"name": "react_test",
"version": "1.0.0",
"description": "Grails with React",
"main": "index.js",
"license": "MIT",
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"redux-logger": "^3.0.6",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
}
My root.gsp file that is supposed to pick up the bundle.js file and render the react code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grails with React</title>
<script src="../../../src/react/public/bundle.js"></script>
</head>
<body>
<div id="root">
<p>React broke down</p>
</div>
</body>
</html>
My Webpack file:
var webpack = require('webpack')
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/react/public');
var APP_DIR = path.resolve(__dirname, 'src/react/app');
var config = {
entry: APP_DIR + '/main.jsx',
mode : 'development',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
rules : [
{
test : [/\.jsx?$/, /\.js?$/],
exclude: /node_modules/,
include: APP_DIR,
loader : 'babel-loader',
query: {
presets: ['react', 'env']
}
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", '.jsx', '*']
}
};
module.exports = config;
Finally here's my simple starting file:
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello, World!</p>;
}
}
render(<App/>, document.getElementById('root'));
If it helps, here's my folder structure!
Any advice or help you can throw my away is greatly appreciated! I'd be willing to experiment! Thank you!
After a lot of experimentation I discovered what needed to be done. Because this is a Grails application it has be written very specifically and has to be outputted in the correct folder.
Change the script line into this:
<g:javascript src="bundle.js"></g:javascript>
Then make sure to output the bundle.js file in the web-app/js folder. This is a must. So change your webpack to this:
var BUILD_DIR = path.resolve(__dirname, 'web-app/js');
That solved it!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.