Перше додаток на Spring Boot + ReactJS

В житті кожного Java розробника може наступити момент, коли нічого не залишається, як використовувати в своєму додатку ReactJS. Якщо, звичайно, не AngularJS. Ви довго пручалися, але цей момент настав і треба щось робити. Ви чули, що є Node.JS, що він уміє бути web-сервером, але це вже через чур. У вас буде кошерний Spring Boot. На жаль, пошук в гугл здатний дуже заплутати. Багато різних гайдів, всі оперують різними версіями реакта і супутніх засобів. Даний гайд описує процес створення найпростішого Spring Boot + ReactJS програми, простий та приємний.

Підготовка середовища розробки
Спочатку треба завантажити і встановити Node.js. При установці (потрібна наявність адміністративних прав) важливо переконатися, що встановлюється npm і прописуються системні шляху. У випадку Windows з'являється «Node.js command prompt», в інших OS напевно теж щось таке з'являється. Запускаємо його. Якщо ви працюєте без доступу до інтернету (це дуже не зручно, але так буває), ви можете вказати нехай до локального npm-сховища; їм цілком може бути ваш корпоративний Nexus. Для цього в командному рядку виконайте команду

npm config set registry http://ваш_npm_репозиторий

Далі ми будемо робити класичне maven-додаток. Оскільки стаття призначена насамперед Java-програмістів, розповідати як це робити, і що вказувати в pom.xml, щоб вийшло Spring Boot додаток, я не буду. Створіть папку src\main\resources\static (далі просто static). Перейдіть в консолі в неї, і ініціалізувати node-додаток, виконавши команду npm init. В інтерактивному режимі вам буде запропоновано ввести основні параметри вашої програми (назва, автор тощо). По завершенні роботи з'явиться файл static\package.json, його можна завжди поміняти вручну. Перед виконанням подальших кроків вкрай бажано оновити менеджер пакетів npm до актуальної версії. Для цього в консолі виконайте команду

npm install npm@latest -g

Підключіть залежності, які вам потрібні. Вони діляться на дві категорії, основні та розробницькі — останні не потраплять у поставляється збірку. Мінімальний набір для нашого прикладу такий:

  1. Основні:

    npm install react requirejs react-dom rest --save

  2. Розробницькі:

    npm install babel-loader babel-core webpack webpack-dev-server babel-preset-stage-0 babel-plugin-transform-regenerator babel-preset-es2015 babel-preset-react --save-dev
В результаті оновиться файл static\package.json і створиться папка static\node_modules. Цю папку треба додати .gitignore. Також її слід виключити з складання ресурсів maven'а:

<build>
<resources>
<resource>
<fs>src/main/resources</directory>
<excludes>
<exclude>static/node_modules/**/*.*</exclude>
</excludes>
</resource>
</resources>
</build>

Створення каркаса програми
Про те, як писати програми на ReacJS цілком доступно написано в автентичному керівництві від Facebook. Кажучи зовсім коротко, програмування на ReacJS зводиться до того, що ви пишете обробники, які рендерят кастомні теги в html-код.

Для початку створіть папку static\app, в ній файл app.jsx — там буде основний клас додатки. Додайте в нього наступний зміст:

import React from "react";
import ReactDom from "react-dom";

class App extends React.Component {

render() {
return <p>Hello, World!</p>
}
}
ReactDom.render(<App />, document.getElementById('react'));

Тут важливо наступне: в нашому невеликому класі використовується синтаксис JSX, використовується синтаксис ES2015 мови JavaScript. Передбачається, що на сторінці html, куди буде додано цей скрипт, є елемент з id=«react», і саме він буде замінений тегом <App />, який, у свою чергу, рендерится в сакраментальну напис. Далі створюємо файл static\index.js з наступним вмістом:

import App from './app/app.jsx';

Це буде точка входу в наш додаток. Якщо ви використовуєте Idea, і вона після цього лається, що поточна версія JavaScript не підтримує імпорти, тиснете Alt-Enter і включаєте ES6.

Нарешті, створіть файл src\mail\resources\templates\greeting.html з наступним вмістом:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8"/>
<title>Hello demo</title>
</head>
<body>
<div id="react"/>
<script src="/generated/app-bundle.js"/>
</body>
</html>

Власне це все в частині програмування. Якщо ви використовуєте Spring MVC, вам не складе труднощів зробити додаток, який покаже html. Залишилося тільки перетворити наш JSX скрипт в придатний JavaScript, і все злетить. Для цього ми будемо використовувати Webpack.

Параметри компіляції з Webpack
Використання Webpack спільно з ReactJS є поширеною практикою. Грубо кажучи, процес зводиться до того, що Webpack, використовуючи різні бібліотеки babel транслює наш код у такий, який зрозуміє браузер. При цьому нам було б дуже приємно, щоб у ньому можна було ставити брекпойнты, і не в якийсь сгенеренное не зрозумій що, а у вихідний зрозумілий JSX скрипт. На щастя, ця задача розв'язана. Для успішного виконання подальших кроків передбачається, що рекомендовані вище обов'язкові і девелоперські залежності були підключені, і ваш файл package.json в цій частині має приблизно наступний вигляд:

"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"requirejs": "^2.3.2",
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-regenerator": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"react-frame-component": "^0.6.6",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}

Важливо, що ми використовуємо Webpack2, з першим все по-іншому. Створіть файл static\.babelrc з наступним змістом (як не важко здогадатися, це конфігурація Babel):

{
"presets": ["react", "es2015", "stage-0"],
"plugins": ["transform-regenerator"]
}

Створіть файл static\webpack.config.js з наступним вмістом:

var packageJSON = require('./package.json');
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: './index.js',
output: {
path: path.join(__dirname, 'generated'),
filename: 'app-bundle.js'},
resolve: {extensions: ['.js', '.jsx']},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development")
}
})
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
devServer: {
noInfo: false,
quiet: false,
lazy: false,
watchOptions: {
poll: true
}
}
}

Зверніть увагу, що:

  1. Точкою входу є певний скрипт index.js
  2. Результат компіляції буде покладено в папку static\generated
  3. Налаштування встановлені розробницькі. Надалі має сенс використовувати профілі webpack, розділяючи конфігурації по середах dev\test\prod. За подробицями відсилаю до документації (посилання нижче)
  4. Результуючий скрипт буде називатися "/generated/app-bundle.js". Саме його ми вказали в greeting.html.
Додайте в файл package.json розділ:
"scripts": {
"build": "webpack -d"
},

Ключ "-d" означає «development», якщо використовувати -p «production», то результат буде минифицирован. В принципі, це не суттєво, на можливість дебажити це не впливає. Виконайте компіляцію, запустивши в командному рядку Node.js команду npm run build. Додайте в .gitignore npm-*.log і generated/.

Зверніть увагу, що навіть у такому мінімальної прикладі компіляція webpack займає декілька секунд (у мене до 8с). Це багато. Має сенс налаштувати автоматичну перекомпиляцию. З цією метою був раніше встановлений пакет webpack-dev-server, і додані конфігураційні параметри секції devServer. Ця задача реалізується як фоновий процес, що запускається скриптом. Щоб цей скрипт запустити, потрібно додати в секцію scripts файлу package.json елемент "«dev»: «webpack-dev-server --content-base app/»" (тут «dev» — аліас скрипта, можна використовувати будь -). Цим ми налаштовуємо процес моніторингу змін у папці app/, в якій лежить наш JSX скрипт.



Потім виконайте команду npm run dev. В результаті запуститься Node.js Express сервер, який спочатку виконає звичайну компіляцію webpack, закэширует все, що потрібно, і потім буде при кожному зміні инкрементально перекомпиливать. У цього сервера досить багато опцій, відсилаю до оригінальної документації (посилання нижче). Якщо потрібно виконувати ще які-про дії в командному рядку npm, доведеться запустити нову, ця тепер зайнята.

І тепер зовсім все. Запускаєте додаток і воно радіє світу.

І ще дещо
Для повноти картини треба згадати, що можна обійтися і без консолі. Для роботи з npm існує досить зручний maven-плагін frontend-maven-plugin. Фргмент pom-файлу з його участю наведено нижче:

Підключення плагінів maven
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>1.4.2.RELEASE</version>
</plugin>

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version > 1.0 < /version>
<configuration>
<workingDirectory>src/main/resources/static</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.9.4</nodeVersion>
<npmVersion>4.1.1</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
<npmRegistryURL>http://some_url>
</configuration>
</execution>
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>


Корисні посилання
  1. Автентичне керівництво по ReactJS
  2. Відмінний туторіал від Spring
  3. Туторіал по Webpack
  4. Конфігурування webpack-dev-server
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.