В этой статье мы поговорим о том, как объединить приложение Create React с Spring Boot, чтобы получить единый файл войны, чтобы мы:
- Может иметь наш фронтенд и бэкэнд в едином файле войны с оптимизированной сборкой производств
- И сохраняйте преимущества, которые дает приложение Create React, такие как горячая перезагрузка
Настроить
- Должна быть установлена Java. Зайдите сюда, чтобы скачать версию.
- Должен быть установлен Maven. Для Mac я использовал Homebrew (
brew install maven), но в противном случае, голова здесь . - Должен быть установлен Node. Для Mac я использовал Homebrew (
brew install node), но в остальном, над головой сюда .
Примечание : моя IDE — IntelliJ. При работе над кодом реакции я обычно переключаюсь на VS Code. Не стесняйтесь использовать то, что заставляет вас чувствовать себя комфортно.
Для начала создайте пустой репозиторий на Github и добавьте ReadMe, gitignore, лицензию и т. Д. Затем перейдите по адресу https://start.spring.io, чтобы создать приложение Spring и загрузить его локально. Группа и Артефакт также могут быть чем угодно.
GroupId : com.react.container;
Артефакт : весна-реакция-комбо-приложение
Затем распакуйте загруженный проект в вашу директорию git. Фиксация, фиксация, фиксация Ваше SpringReactComboAppApplication должно выглядеть так:
Джава
xxxxxxxxxx
1
пакет ком . реагировать . контейнер ;
2
импорт орг . пружинная рама . загрузки . SpringApplication ;
3
импорт орг . пружинная рама . загрузки . автоконфигурация . SpringBootApplication ;
4
импорт орг . пружинная рама . загрузки . Интернет . сервлет . поддержка . SpringBootServletInitializer ;
5
6
открытый класс SpringReactComboAppApplication extends SpringBootServletInitializer
7
{
8
public static void main ( String [] args ) { SpringApplication . run ( SpringReactComboAppApplication . class , args );
9
}
10
}
После того, как мы позаботимся об этом, мы сможем создать базовую услугу. Мы назовем это DadJokesController. Это должно быть создано в той же папке, что и файл SpringReactComboAppApplication. Я знаю, что это не правильный формат REST API, но давайте пока проигнорируем это.
Джава
xxxxxxxxxx
1
пакет ком . реагировать . контейнер ;
2
импорт орг . пружинная рама . Интернет . привязывать . аннотация . GetMapping ;
3
импорт орг . пружинная рама . Интернет . привязывать . аннотация . RestController ;
4
5
открытый класс DadJokesController {
6
( "/ api / dadjokes" )
7
public String dadJokes () {
8
return "Ausome content ждет вас" ;
9
}
10
}
В вашем терминале бегите
Оболочка
xxxxxxxxxx
1
mvn spring-boot: беги
Затем в вашем браузере проверьте http: // localhost: 8080 / api / dadjokes . Вы должны увидеть шутку папы, которую мы добавили в наш контроллер.
Чтобы создать приложение React, просто запустите следующее в корневом каталоге
Оболочка
xxxxxxxxxx
1
npx create-response-app basic-frontend-app
Вы можете называть это как хотите. (Я только что назвал мое приложение basic-frontend .)
Чтобы запустить приложение переднего плана:
Оболочка
xxxxxxxxxx
1
cd basic-frontend-app <br> npm start
Поскольку мы хотим интегрировать наш сервис Dad Jokes в интерфейс, сначала мы рассмотрим проблемы с прокси. Если вы заметили, ваша служба запускается на localhost: 8080, а интерфейс запускается на localhost: 3000. Если мы попытаемся позвонить в наш сервис из внешнего интерфейса, в зависимости от вашего браузера, вы получите ошибку CORS.
Самый простой способ решить эту проблему — это иметь у вашего внешнего прокси-сервера любые запросы от порта 3000 до 8080. Это изменение будет внесено в ваш файл package.json.
JSON
xxxxxxxxxx
1
{
2
"name" : "basic-frontend-app" ,
3
"версия" : "0.1.0" ,
4
"частный" : правда ,
5
"зависимости" : {
6
«реагировать» : «^ 16.3.1» ,
7
«Реакция-Дом» : «^ 16.3.1» ,
8
«response-scripts» : «1.1.4»
9
},
10
"сценарии" : {
11
"start" : "response-scripts start" ,
12
"build" : "build-scripts build" ,
13
"test" : "test-scripts test --env = jsdom" ,
14
"eject" : "реагировать на скрипты"
15
},
16
"прокси" : {
17
"/ api" : {
18
"target" : "http: // localhost: 8080" ,
19
"ws" : правда
20
}
21
}
22
}
Добавьте следующее в ваш файл App.js веб- интерфейса .
JavaScript
xxxxxxxxxx
1
импортировать React , { Component } из 'response' ;
2
импортировать логотип из ./logo.svg ;
3
import './App.css' ;
4
Класс App расширяет Компонент {
6
состояние = {};
8
componentDidMount () {
10
это . dadJokes ()
11
}
12
dadJokes = () => {
14
fetch ( '/ api / dadjokes' )
15
, затем ( ответ => ответ . текст ())
16
, тогда ( сообщение => {
17
это . setState ({ сообщение : сообщение });
18
});
19
};
20
render () {
22
возврат (
23
< div className = "App" >
24
< header className = "App-header" >
25
< img src = { logo } className = "App-logo" alt = "logo" />
26
< h3 className = "Название приложения" > { это . состояние . сообщение } < / h3>
27
< / header>
28
< p className = "App-intro" >
29
Для того, чтобы получить начало , редактировать < код > SRC / App . JS < / code> и сохранить, чтобы перезагрузить.
30
< / p>
31
< / div>
32
);
33
}
34
}
35
приложение по умолчанию для экспорта ;
Перезапустите интерфейс, и вы должны быть хорошими. Если вы получили эту ошибку, я удалил свой файл package-lock.json и папку node_modules, переустановил пакеты npm и снова запустил его
Теперь вы можете увидеть результаты вызова API "Папа шутки".
Теперь, когда наши базовый интерфейс и бэкэнд готовы, пришло время создать производственную сборку и единый файл войны.
Под <зависимости> добавьте это:
Джава
xxxxxxxxxx
1
<! - https : //mvnrepository.com/artifact/com.github.eirslett/frontend-maven-plugin ->
2
< зависимость >
3
< groupId > ком . Github . eirslett </ groupId >
4
< artifactId > frontend - maven - плагин </ artifactId >
5
< версия > 1.6 </ версия >
6
</ зависимость >
В разделе <plugins> файла pom мы добавим следующие команды, которые будут выполнять следующие действия при mvn clean installзапуске.
npm installбудет работать с указанной версией Node.- Будет запущена производственная версия нашего интерфейса.
- Мы сдадим производственную сборку.
XML
xxxxxxxxxx
1
< плагин >
2
< groupId > com.github.eirslett </ groupId >
3
< artifactId > frontend-maven-plugin </ artifactId >
4
< версия > 1.6 </ версия >
5
< конфигурация >
6
< workingDirectory > basic-frontend-app </ workingDirectory >
7
< installDirectory > target </ installDirectory >
8
</ configuration >
9
< казни >
10
< исполнение >
11
< id > установить узел и npm </ id >
12
< цели >
13
< goal > install-node-and-npm </ goal >
14
</ цели >
15
< конфигурация >
16
< nodeVersion > v8.9.4 </ nodeVersion >
17
< npmVersion > 5.6.0 </ npmVersion >
18
</ configuration >
19
</ выполнение >
20
< исполнение >
21
< id > npm install </ id >
22
< цели >
23
< цель > нпм </ цель >
24
</ цели >
25
< конфигурация >
26
< arguments > install </ arguments >
27
</ configuration >
28
</ выполнение >
29
< исполнение >
30
< id > npm run build </ id >
31
< цели >
32
< цель > нпм </ цель >
33
</ цели >
34
< конфигурация >
35
< arguments > запустить сборку </ arguments >
36
</ configuration >
37
</ выполнение >
38
</ казни >
39
</ plugin >
40
< плагин >
41
< artifactId > maven-antrun-plugin </ artifactId >
42
< казни >
43
< исполнение >
44
< фаза > генерировать ресурсы </ фаза >
45
< конфигурация >
46
< цель >
47
< copy todir = "$ {project.build.directory} / classes / public" >
48
< fileset dir = "$ {project.basedir} / basic-frontend-app / build" > </ fileset >
49
</ copy >
50
</ target >
51
</ configuration >
52
< цели >
53
< цель > бежать </ цель >
54
</ цели >
55
</ выполнение >
56
</ казни >
57
</ plugin >
Примечание : порядок ваших плагинов важен, поэтому убедитесь, что ваш узел / npm выполняется перед копированием файла сборки.
После добавления запустите mvn clean installи убедитесь, что каталог target / classes содержит как файлы внешнего интерфейса, так и файлы java. И тебе должно быть хорошо идти.
Это все, что у меня есть сейчас. Если вы хотите посмотреть репозиторий или использовать его, его можно найти здесь, на моем Github.