Part 1 tutorial does not mention how to bootstrap/inject React into the project

[asiupt]

I am following the Do-It-Yourself version of the tutorial and the Part 1 tutorial does not mention how to bootstrap/inject React into the project.

I have included "frontend-maven-plugin" in my pom.xml and updated my project. Upon running, localhost:8080/api displays the correct JSON data, as expected. HOWEVER, localhost:8080 displays a blank page. Therefore, React components are not working.

I cannot see package.json or webpack.config.js in my class path.

Please tell me how to include React components so the tables can be displayed.

[samuelpucat]

i got it working plugin setup like this:

<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>

[marcelovidigal]

I had a series of problems, mainly with the webpack, and also with the client rest.js. I believe that a more detailed explanation of rest clients, other options, and especially rest.js client would help. Anyway, in the end, after a lot of struggle, I fixed as in the previous answer, however, not directly, nor even in the first attempt, I can't explain why. What I did initially: I deleted the target folder, used the following code in pom.xml, and finally ran the command line ./mvnw clean install and then ran ./mvnw spring-boot:run. I looked at the log, and finally there were no npm installation errors, and no webpack errors at all. In a complementary way I had to change some lines in the app.js, specifically when using client.js rest client, which also had errors. After all this, I decided to delete the target folder again, and see if the simple update of the pom.xml file, with the addition of the plugin, as in the code, would work, and to my surprise it worked normally.

In pom.xml <plugins> I use this code:

            <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.18.2</nodeVersion>
                            <npmVersion>6.14.5</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>

In app.js I use this code, replacing done with then :

    componentDidMount() {
        client({method: 'GET', path: '/api/resource'}).then(response => {
            this.setState({resources: response.entity._embedded.resources});
        });
    }

In package.json I use the latest version for each dependency:

    "dependencies": {
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "rest": "^2.0.0"
    },
    "scripts": {
        "watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "@babel/preset-react": "^7.10.4",
        "babel-loader": "^8.1.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12"
    }

[liposo]

@asiupt react is installed by npm install executed from: `

npm install

 <goals>
     <goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>

` it will install all depenencies described in the package.json.

The package.json or webpack.config.js you need to create the files by yourself or you can run npm init Creating a package.json file, for webpack.config.js there is also an option to generate it using webpack-cli

[benhunter]

This pull request: https://github.com/spring-guides/tut-react-and-spring-data-rest/issues/128 should resolve issues with pom.xml related to frontend-maven-plugin and React.

[edtbl76]

I have the same problem. When visiting localhost:8080, I get a page with the word "index". The React components aren't rendered.

[edtbl76]

Nope. Found the issue. @marcelovidigal had the right idea swapping out done() for then() (You also have to change the devtools in the webpack.config.js to a Webpack 5 compliant option. 'eval-source-map' worked for me.