Я хочу просмотреть свои страницы React в браузере. В качестве веб-сервера я использую Spring
Загрузочный. Контроллер веб-сервера выглядит так:
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";
}
}
Мой файл рабочей сборки реагирования вызывается из файла index.html.
В /src/main/resources/templates/index.html файлах содержится
<!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>
Файл реагирующей рабочей сборки находится в> src / main / static / build / static / js / main.3a7ae2a8.chunk.js
Постройте эту программу с Gradel. Файл build.gradle выглядит следующим образом:
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
}
После того, как я запустил программу командой $ gradle bootRun
и введите localhost: 8080 в браузере, затем браузер отобразит пустую страницу
Я получаю следующее сообщение об ошибке в окне консоли:
GET http://localhost:8080/static/build/static/js/main.3a7ae2a8.chunk.js net :: ERR_ABORTED 404
В браузере index.html выглядит следующим образом:
<!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>
Как мне отобразить компоненты React в браузере?