Проблема
Вы оказались в среде Java и хотите написать интерфейс или тестовую страницу с помощью React? Вы хотите загрузить свое приложение с помощью create-react-app, но не знаете, как интегрировать его в текущие этапы сборки? Тогда это для вас!
Требования
- Плагин интерфейса Maven ( https://github.com/eirslett/frontend-maven-plugin )
- Maven 3
- приложение react
Добавьте frontend-maven-plugin в свой pom.xml
Пример pom.xml
4.0.0 com.zehethomas react-spring-example 0.0.1-SNAPSHOT jar org.springframework.boot spring-boot-starter-parent 2.0.4.RELEASE 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-maven-plugin com.github.eirslett frontend-maven-plugin 1.6 v10.0.0 6.1.0 src/main/js/frontend Install node and npm locally to the project install-node-and-npm npm install npm Build frontend npm run build org.apache.maven.plugins maven-resources-plugin Copy frontend build to target process-resources copy-resources ${basedir}/target/classes/resources ${basedir}/src/main/js/frontend/build true
Использует maven-frontend-plugin для локальной установки node и npm. После этого запускается npm install для загрузки всех зависимостей и сборки приложения с помощью npm run build
maven-resources-plugin используется для копирования сборки интерфейса в target. Важно изменить ${basedir}/build на местоположение, в котором находится ваш интерфейсный код.
Подключение приложения React к серверной части
Если вы сталкиваетесь с ошибками, это, вероятно, связано с политикой того же источника Политика того же источника .
Вы можете легко исправить это, добавив "прокси": "http://localhost:8080/" в ваш файл package.json, который проксирует маршруты к вашему бэкенду.
Пример package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080/"
}
Создайте файл .npmrc
Это необходимо, если ваша компания использует частный реестр npm для предотвращения ошибок npm 404 при извлечении зависимостей
Пример .npmrc
registry = http:/// @babel:registry = https://registry.npmjs.org/ @types:registry = https://registry.npmjs.org/
Создание и запуск приложения
Теперь вы можете запустить maven clean package для сборки react-spring-example-0.0.1-SNAPSHOT.jar который находится в вашей целевой папке.
Выполнить java -jar react-spring-example-0.0.1-SNAPSHOT.jar чтобы запустить ваше приложение.
Перейдите на localhost:8080 и ура, все готово!:>
исходный код
Вы можете найти пример проекта на github react-spring-example .
Спасибо!
Источники: Вдохновили меня написать это. Создание нового веб-приложения с помощью create-react-app и Spring Boot
Оригинал: “https://dev.to/tzehe/dev-recipes-integrate-react-frontend-in-a-java-corporate-environment-2e43”