I want to browse my React pages in the browser. As a web server I use Spring Boot. The web server controller looks like this:
package com.steinko.reactspringboottutorial.webserver;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@Controller
public class HomeController {
private final Logger log = LoggerFactory.getLogger(HomeController.class);
@RequestMapping("/" )
String index(HttpServletRequest request) {
log.info("Request Mapping");
log.info(request.toString());
return "index";
}
}
My react production build file is called from the index.html fiel I the /src/main/resources/templates/index.html files contains
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Todo fronend</title>
<script type="text/javascript" th:src="@{../../static/build/static/js/main.3a7ae2a8.chunk.js}"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
The react production build file is placed in >src/main/static/build/static/js/main.3a7ae2a8.chunk.js Build this program with Gradel. The build.gradle file looks like this:
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:2.1.4.RELEASE")
}
}
plugins {
id 'java'
id 'org.springframework.boot' version '2.1.5.RELEASE'
id "com.moowork.node" version "1.3.1"
}
apply plugin: 'io.spring.dependency-management'
group = 'com.steinko.reactspringboottutorial.webserver'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
developmentOnly
runtimeClasspath {
extendsFrom developmentOnly
}
}
repositories {
mavenCentral()
}
test {
useJUnitPlatform()
}
sourceSets {
main {
resources {
srcDirs = [
'src/main/resources',
'src/main/static'
]
}
}
}
ext {
set('springCloudVersion', "Greenwich.SR1")
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.cloud:spring-cloud-gcp-starter'
implementation 'org.springframework.cloud:spring-cloud-starter-sleuth'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation 'org.junit.jupiter:junit-jupiter-api:5.3.1'
testImplementation 'org.junit.jupiter:junit-jupiter-params:5.2.0'
testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.3.1'
}
dependencyManagement {
imports {
mavenBom "org.springframework.cloud:spring-cloud-dependencies:${springCloudVersion}"
}
}
node {
/* gradle-node-plugin configuration
https://github.com/srs/gradle-node-plugin/blob/master/docs/node.md
Task name pattern:
./gradlew npm_<command> Executes an NPM command.
*/
// Version of node to use.
version = '10.16.0'
// Version of npm to use.
npmVersion = '6.9.0'
// If true, it will download node using above parameters.
// If false, it will try to use globally installed node.
download = false
}
After I have started the program with the command with the $gradle bootRun and entered a localhost:8080 in the browser then the browser display a blank page I get the following error message in the console window : GET http://localhost:8080/static/build/static/js/main.3a7ae2a8.chunk.js net::ERR_ABORTED 404 In the browser the index.html look looks like this:
<!DOCTYPE html> <html> <head lang="en">
<meta charset="UTF-8"/>
<title>Todo fronend</title>
<script type="text/javascript" src="../../static/build/static/js/main.3a7ae2a8.chunk.js"></script> </head> <body>
<div id="root"></div>
</body> </html>
How do I manage to display the React components in the browser?
最佳答案
I have found the solution I have to move the build/static/js/ from src/main/static/build/static/js/ to >/src/main/resources/static/build/static/js Then I had to compy the src/main/javascript/public/index.html to >src/main/resources/templates/index.html and I had to edit the loading of the build files to
<script th:src="@{build/static/js/2.f61826be.chunk.js}" type = "text/JavaScript"></script>
<script th:src="@{build/static/js/main.3a7ae2a8.chunk.js}" type = "text/JavaScript"></script>
关于reactjs - 如何使用Spring Boot Web服务器在浏览器中显示我的React生产版本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56563880/