Trying to connect React and Java resulted in browser showing a blank page

Question

I have been following tutorial by Spring about using Boot and React together (I have limited experience with React and JavaScript): https://spring.io/guides/tutorials/react-and-spring-data-rest/

I have finished the set-up phase, API is working, java-side is probably working as well, but the localhost only returns a blank page (React doesn't hook to the element in DOM).

I have a minimal knowledge of webpack. I have followed the tutorial step-by-step (but of course might have made an error alogn the way). I have modified pom.xml and see node folder in the target folder.

The tutorial mentions that "JavaScript developers typically use npm to build up a package.json file like the one below" and attaches the code, but doesn't specify location for this file.

I have created this package.json, located in the root of the project:

{
  "name": "spring_rest_react",
  "version": "0.0.1",
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rest": "^1.3.1"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js is in the same location with following code copied from the tutorial:

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',      
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

I think that I missed something with the webpack. The tutorial says that it should be "defined", but doesn't describe how or where exactly.

I would really appreciate pointing out the error I am doing. I have always used create-react-app until now, this is the first time I am trying to connect it to the Java and I am a bit lost.

Answer 1

This problem arises, because of the default settings of webpack.config.js which you can find under

{YOUR_PROJECT_DIRECTORY}/node_modules/react-scripts/config/webpack.config.js

find the property const shouldUseRelativeAssetPaths and change the value from

const shouldUseRelativeAssetPaths = publicPath === './'

to

const shouldUseRelativeAssetPaths = publicPath === '.'.

Rebuild your project, and the issue will most probably be fixed.

Answer 2

He tells you to add

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
</plugin>

but in fact if you look at the github archive there is a parent pom.xml. If you don't use that, you really need to add

                        <plugin>
                                <groupId>com.github.eirslett</groupId>
                                <artifactId>frontend-maven-plugin</artifactId>
                                <version>1.9.1</version>
                                <configuration>
                                        <installDirectory>target</installDirectory>
                                </configuration>
                                <executions>
                                        <execution>
                                                <id>install node and npm</id>
                                                <goals>
                                                        <goal>install-node-and-npm</goal>
                                                </goals>
                                                <configuration>
                                                        <nodeVersion>v12.14.0</nodeVersion>
                                                        <npmVersion>6.13.4</npmVersion>
                                                </configuration>
                                        </execution>
                                        <execution>
                                                <id>npm install</id>
                                                <goals>
                                                        <goal>npm</goal>
                                                </goals>
                                                <configuration>
                                                        <arguments>install</arguments>
                                                </configuration>
                                        </execution>
                                        <execution>
                                                <id>webpack build</id>
                                                <goals>
                                                        <goal>webpack</goal>
                                                </goals>
                                        </execution>
                                </executions>
                        </plugin>

also, there are the javascript modules src/main/js/client.js and src/main/js/api/* that you need to get out of the github archive.