Для создания изоморфных приложений на React обычно используется Node.js в качестве серверной части. Но, если сервер пишется на Java, то не стоит отказываться от изоморфного приложения: в Java входит встроенный javascript движок (Nashorn), который вполне справится с серверным рендерингом HTML с помощью React.
Код приложения, демонстрирующего серверный рендеринг React с сервером на Java, находится на GitHub. В статье буду рассмотрены:
- Сервер на Java в стиле микросервиса на основе Netty и JAX-RS (в реализации Resteasy) для обработки web-запросов, с возможностью запуска в Docker.
- Dependency Injection с использованием библиотеки CDI (в реализации Weld SE).
- Сборка javascript бандла с помощью Webpack 2.
- Настройка редеринга HTML на сервере с помощью React.
- Запуск отладки с поддержкой «горячей» перезагрузки страниц и стилей с использованием Webpack dev server.
Сервер на Java
Рассмотрим создание сервера на Java в стиле микросервиса (самодостаточный запускаемый jar, не требующий использования каких-либо сервлет-контейнеров). В качестве библиотеки для управления зависимостями будем использовать стандарт CDI (Contexts and Dependency Injection), который пришел из мира Java EE, но вполне может использоваться в приложениях Java SE. Реализация CDI — Weld SE — это мощная и отлично документированная библиотека для управления зависимостями. Для CDI существует множество биндингов к другим библиотекам, например, в приложении используются CDI биндинги для JAX-RS и Netty. Достаточно в каталоге src/main/resources/META-INF создать файл beans.xml (декларация, что этот модуль поддерживает CDI), разметить классы стандартными атрибутами, инициализировать контейнер и можно инжектить зависимости. Классы, помеченные специальными аннотациями зарегистрируются автоматически (доступна и ручная регистрация).
// Стартовый метод.
public static void main(String[] args) {
// Лог JUL переводится на логирование в SLF4J.
SLF4JBridgeHandler.removeHandlersForRootLogger();
SLF4JBridgeHandler.install();
LOG.info("Start application");
// Создание CDI контейнера http://weld.cdi-spec.org/
final Weld weld = new Weld();
// Завершаем сами.
weld.property(Weld.SHUTDOWN_HOOK_SYSTEM_PROPERTY, false);
final WeldContainer container = weld.initialize();
// Создание Netty сервера для обслуживания запросов через JAX-RS, который работает с CDI контейнером.
final CdiNettyJaxrsServer nettyServer = new CdiNettyJaxrsServer();
...............
// Запуск web сервера.
nettyServer.start();
..............
// Ожидание сигнала TERM для корректного завершения.
try {
final CountDownLatch shutdownSignal = new CountDownLatch(1);
Runtime.getRuntime().addShutdownHook(new Thread(() -> {
shutdownSignal.countDown();
}));
try {
shutdownSignal.await();
} catch (InterruptedException e) {
}
} finally {
// Останов сервера и CDI контейнера.
nettyServer.stop();
container.shutdown();
LOG.info("Application shutdown");
SLF4JBridgeHandler.uninstall();
}
}
// Класс сервиса, который доступен для "впрыскивания" в другие классы
@ApplicationScoped
public class IncrementService {
..............
}
// Подключение зависимостей
@NoCache
@Path("/")
@RequestScoped
@Produces(MediaType.TEXT_HTML + ";charset=utf-8")
public class RootResource {
/**
* Подключение зависимости {@link IncrementService}.
*/
@Inject
private IncrementService incrementService;
..............
}
Для тестирования классов с CDI зависимостями используется расширение для JUnit от Arquillian.
/**
* Тест для {@link IncrementResource}.
*/
@RunWith(Arquillian.class)
public class IncrementResourceTest {
@Inject
private IncrementResource incrementResource;
/**
* @return Настроенный бандл, который будет использоваться для разрешения зависимостей CDI.
*/
@Deployment
public static JavaArchive createDeployment() {
return ShrinkWrap.create(JavaArchive.class)
.addClass(IncrementResource.class)
.addAsManifestResource(EmptyAsset.INSTANCE, "beans.xml");
}
@Test
public void getATest() {
final Map<String, Integer> response = incrementResource.getA();
assertNotNull(response.get("value"));
assertEquals(Integer.valueOf(1), response.get("value"));
}
..............
/**
* Возвращает мок для {@link IncrementService}. Используется аннотация RequestScoped:
* Arquillian использует ее для создание отдельного объекта для каждого теста.
* @return Мок для {@link IncrementService}.
*/
@Produces
@RequestScoped
public IncrementService getIncrementService() {
final IncrementService service = mock(IncrementService.class);
when(service.getA()).thenReturn(1);
when(service.incrementA()).thenReturn(2);
when(service.getB()).thenReturn(2);
when(service.incrementB()).thenReturn(3);
return service;
}
}
Обработку web запросов настроим через встроенный web-сервер — Netty. Для написания функций — обработчиков будем использовать другой стандарт, также пришедший из Java EE, JAX-RS. В качестве реализации стандарта JAX-RS выберем библиотеку Resteasy. Для соединения Netty, CDI и Resteasy используется модуль resteasy-netty4-cdi. JAX-RS настраивается с помощью класса наследника javax.ws.rs.core.Application. Обычно в нем регистрируются обработчики запросов и другие JAX-RS компоненты. При использовании CDI и Resteasy достаточно указать, что в качестве компонентов JAX-RS будут использоваться зарегистрированные в CDI обработчики запросов (помеченные аннотацией JAX-RS: Path) и другие компоненты JAX-RS, которые называются провайдерами (помеченные аннотацией JAX-RS: Provider). Более подробно о Resteasy можно узнать из документации.
public static void main(String[] args) {
...............
// Создание Netty сервера для обслуживания запросов через JAX-RS, который работает с CDI контейнером.
// Для JAX-RS используется библиотека Resteasy http://resteasy.jboss.org/
final CdiNettyJaxrsServer nettyServer = new CdiNettyJaxrsServer();
// Настройка Netty (адрес и порт).
final String host = configuration.getString(
AppConfiguration.WEBSERVER_HOST, AppConfiguration.WEBSERVER_HOST_DEFAULT);
nettyServer.setHostname(host);
final int port = configuration.getInt(
AppConfiguration.WEBSERVER_PORT, AppConfiguration.WEBSERVER_PORT_DEFAULT);
nettyServer.setPort(port);
// Настройка JAX-RS.
final ResteasyDeployment deployment = nettyServer.getDeployment();
// Регистрации фабрики классов для JAX-RS (обработчики запросов и провайдеры).
deployment.setInjectorFactoryClass(CdiInjectorFactory.class.getName());
// Регистрация класса, который нужен JAX-RS для получения информации об обработчиках запросов и провайдеров.
deployment.setApplicationClass(ReactReduxIsomorphicExampleApplication.class.getName());
// Запуск web сервера.
nettyServer.start();
...............
}
/**
* Класс с информацией об обработчиках запросов и провайдерах для JAX-RS
*/
@ApplicationScoped
@ApplicationPath("/")
public class ReactReduxIsomorphicExampleApplication extends Application {
/**
* Подключается расширение CDI для Resteasy.
*/
@Inject
private ResteasyCdiExtension extension;
/**
* @return Список классов обработчиков запросов и провайдеров для JAX-RS.
*/
@Override
@SuppressWarnings("unchecked")
public Set<Class<?>> getClasses() {
final Set<Class<?>> result = new HashSet<>();
// Из расширения CDI для Resteasy берется информация об обработчиках запросов JAX-RS.
result.addAll((Collection<? extends Class<?>>) (Object)extension.getResources());
// Из расширения CDI для Resteasy берется информация о провайдерах JAX-RS.
result.addAll((Collection<? extends Class<?>>) (Object)extension.getProviders());
return result;
}
}
Все статические файлы (бандлы javascript, css, картинки) разместим в classpath (src/main/resources/webapp), они поместятся в результирующий jar файл. Для доступа к таким файлам используется обработчик URL вида {fileName:.*}.{ext}, который загружает файл из classpath и отдает клиенту.
/**
* Обработчик запросов к статическим файлам.
* <p>Запросом статического файла считается любой запрос вида {filename}.{ext}</p>
*/
@Path("/")
@RequestScoped
public class StaticFilesResource {
private final static Date START_DATE = DateUtils.setMilliseconds(new Date(), 0);
@Inject
private Configuration configuration;
/**
* Обработчик запросов к статическим файлам. Файлы отдаются из classpath.
* @param fileName Имя файла с путем.
* @param ext Расширение файла.
* @param uriInfo URL запроса, получается из контекста запроса.
* @param request Данные текущего запроса.
* @return Ответ с контентом запрошенного файла или ошибкой 404 - не найдено.
* @throws Exception Ошибка выполнения запроса.
*/
@GET
@Path("{fileName:.*}.{ext}")
public Response getAsset(
@PathParam("fileName") String fileName,
@PathParam("ext") String ext,
@Context UriInfo uriInfo,
@Context Request request)
throws Exception {
if(StringUtils.contains(fileName, "nomin") || StringUtils.contains(fileName, "server")) {
// Неминифицированные версии не возвращаем.
return Response.status(Response.Status.NOT_FOUND)
.build();
}
// Проверка ifModifiedSince запроса. Поскольку файлы отдаются из classpath,
// то временем изменения файла считаем запуск приложения.
final ResponseBuilder builder =
request.evaluatePreconditions(START_DATE);
if (builder != null) {
// Файл не изменился.
return builder.build();
}
// Полный путь к файлу в classpath.
final String fileFullName =
"webapp/static/" + fileName + "." + ext;
// Контент файла.
final InputStream resourceStream =
ResourceUtilities.getResourceStream(fileFullName);
if(resourceStream != null) {
// Файл есть, получаем настройки кеширования на клиенте.
final String cacheControl = configuration.getString(
AppConfiguration.WEBSERVER_HOST, AppConfiguration.WEBSERVER_HOST_DEFAULT);
// Отправляем ответ с контентом файла.
return Response.ok(resourceStream)
.type(URLConnection.guessContentTypeFromName(fileFullName))
.cacheControl(CacheControl.valueOf(cacheControl))
.lastModified(START_DATE)
.build();
}
// Файл не найден.
return Response.status(Response.Status.NOT_FOUND)
.build();
}
}
Серверный рендеринг HTML на React
Для сборки бандлов при построении Java приложения можно использовать maven плагин frontend-maven-plugin. Он самостоятельно загружает и локально сохраняет NodeJs нужной версии, строит бандлы с помощью webpack. Достаточно запускать обычное построение Java проекта командой mvn (либо в IDE, которая поддерживает интеграцию с maven). Клиентский javascript, стили, package.json, файл конфигурации webpack разместим в каталоге src/main/frontend, результирующий бандл в src/main/resources/webapp/static/assets.
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<configuration>
<nodeVersion>v${node.version}</nodeVersion>
<npmVersion>${npm.version}</npmVersion>
<installDirectory>${basedir}/src/main/frontend</installDirectory>
<workingDirectory>${basedir}/src/main/frontend</workingDirectory>
</configuration>
<executions>
<!-- Установка nodejs и npm заданной версии. -->
<execution>
<id>nodeInstall</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<!-- Установка зависимостей npm из src/main/frontend/package.json. -->
<execution>
<id>npmInstall</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<!-- Сборка скриптов с помощью webpack. -->
<execution>
<id>webpackBuild</id>
<goals>
<goal>webpack</goal>
</goals>
<configuration>
<skip>${webpack.skip}</skip>
<arguments>${webpack.arguments}</arguments>
<srcdir>${basedir}/src/main/frontend/app</srcdir>
<outputdir>${basedir}/src/main/resources/webapp/static/assets</outputdir>
<triggerfiles>
<triggerfile>${basedir}/src/main/frontend/webpack.config.js</triggerfile>
<triggerfile>${basedir}/src/main/frontend/package.json</triggerfile>
</triggerfiles>
</configuration>
</execution>
</executions>
</plugin>
Чтобы настроить собственный генератор HTML страниц в JAX-RS нужно создать какой нибудь класс, создать для него обработчик с аннотаций Provider, реализующий интерфейс javax.ws.rs.ext.MessageBodyWriter, и возвращать его в качестве ответа обработчика web-запроса.
Серверный рендеринг осуществляется с помощью встроенного в Java javascript движка — Nashorn. Это однопоточный скриптовый движок: для обработки нескольких одновременных запросов требуется использовать несколько кешрованных экземпляров движка, для каждого запроса берется свободный экземпляр, выполняется рендеринг HTML, затем он возвращается обратно в пул (Apache Commons Pool 2).
/**
* Данные для отображения web-страницы.
*/
public class ViewResult {
private final String template;
private final Map<String, Object> viewData = new HashMap<>();
private final Map<String, Object> reduxInitialState = new HashMap<>();
..............
}
/**
* Обработка данных страницы, заполненных в {@link ViewResult} и отправка HTML.
* <p>
* Если в конфигурации включено использование React в качестве движка для рендеринга HTML (React Isomorphic),
* то в шаблон страницы включается контент, сформированный с помощью React.
* </p>
*/
@Provider
@ApplicationScoped
public class ViewResultBodyWriter implements MessageBodyWriter<ViewResult> {
..............
private ObjectPool<AbstractScriptEngine> enginePool = null;
@PostConstruct
public void initialize() {
// Получение настроек рендеринга.
final boolean useIsomorphicRender = configuration.getBoolean(
AppConfiguration.WEBSERVER_ISOMORPHIC, AppConfiguration.WEBSERVER_ISOMORPHIC_DEFAULT);
final int minIdleScriptEngines = configuration.getInt(
AppConfiguration.WEBSERVER_MIN_IDLE_SCRIPT_ENGINES, AppConfiguration.WEBSERVER_MIN_IDLE_SCRIPT_ENGINES_DEFAULT);
LOG.info("Isomorphic render: {}", useIsomorphicRender);
if(useIsomorphicRender) {
// Если будет использоваться рендеринг React на сервере, то создается пул
// javascript движков. Javascript однопоточный,
// поэтому для каждого запроса используется свой экземпляр настроенного движка javascript.
final GenericObjectPoolConfig config = new GenericObjectPoolConfig();
config.setMinIdle(minIdleScriptEngines);
enginePool = new GenericObjectPool<AbstractScriptEngine>(new ScriptEngineFactory(), config);
}
}
@PreDestroy
public void destroy() {
if(enginePool != null) {
enginePool.close();
}
}
..............
@Override
public void writeTo(
ViewResult t,
Class<?> type,
Type genericType,
Annotation[] annotations,
MediaType mediaType,
MultivaluedMap<String, Object> httpHeaders,
OutputStream entityStream)
throws IOException, WebApplicationException {
..............
if(enginePool != null && t.getUseIsomorphic()) {
// Используется React на сервере.
try {
// Из пула достается свободный движок javascript.
final AbstractScriptEngine scriptEngine = enginePool.borrowObject();
try {
// URL текущего запроса, нужен react-router для определения какую страницу рендерить.
final String uri = uriInfo.getPath() +
(uriInfo.getRequestUri().getQuery() != null
? (String) ("?" + uriInfo.getRequestUri().getQuery())
: StringUtils.EMPTY);
// Выполнение серверного рендеринга React.
final String htmlContent =
(String)((Invocable)scriptEngine).invokeFunction(
"renderHtml", uri, initialStateJson);
// Возврат освободившегося движка в пул.
enginePool.returnObject(scriptEngine);
viewData.put(HTML_CONTENT_KEY, htmlContent);
} catch (Throwable e) {
enginePool.invalidateObject(scriptEngine);
throw e;
}
} catch (Exception e) {
throw new WebApplicationException(e);
}
} else {
viewData.put(HTML_CONTENT_KEY, StringUtils.EMPTY);
}
// Наполнение HTML шаблона данными.
final String pageContent =
StrSubstitutor.replace(templateContent, viewData);
entityStream.write(pageContent.getBytes(StandardCharsets.UTF_8));
}
/**
* Фабрика для создания и настройки движка javascript.
*/
private static class ScriptEngineFactory extends BasePooledObjectFactory<AbstractScriptEngine> {
@Override
public AbstractScriptEngine create()
throws Exception {
LOG.info("Create new script engine");
// Используем nashorn в качестве javascript движка.
final AbstractScriptEngine scriptEngine =
(AbstractScriptEngine) new ScriptEngineManager().getEngineByName("nashorn");
try(final InputStreamReader polyfillReader =
ResourceUtilities.getResourceTextReader(WEBAPP_ROOT + "server-polyfill.js");
final InputStreamReader serverReader =
ResourceUtilities.getResourceTextReader(WEBAPP_ROOT + "static/assets/server.js")) {
// Исполнение скрипта с некоторыми функциями, которых нет в nashorn, потому что он не исполняется в браузере.
scriptEngine.eval(polyfillReader);
// Регистрация функции, которая будет рендерить HTML на сервере с помощью React.
scriptEngine.eval(serverReader);
}
// Запуск функции инициализации.
((Invocable)scriptEngine).invokeFunction(
"initializeEngine", ResourceUtilities.class.getName());
return scriptEngine;
}
@Override
public PooledObject<AbstractScriptEngine> wrap(AbstractScriptEngine obj) {
return new DefaultPooledObject<AbstractScriptEngine>(obj);
}
}
}
Движок исполняет Javascript версии ECMAScript 5.1 и не поддерживает загрузку модулей, поэтому серверный скрипт, как и клиентский, соберем в бандлы с помощью webpack. Серверный бандл и клиентский бандл строятся на основе общей кодовой базы, но имеют разные точки входа. По какой-то причине Nashorn не может исполнять минимизированый бандл (собираемый webpack с ключом --optimize-minimize) — падает с ошибкой, поэтому на стороне сервера нужно исполнять неминимизированный бандл. Для построения обоих типов бандлов одновременно можно использовать плагин к Webpack: unminified-webpack-plugin.
При первом запросе любой страницы, либо если нет свободного экземпляра движка, сделаем инициализацию нового экземпляра. Процесс инициализации состоит из создания экземпляра Nashorn и исполнения в нем серверных скриптов, загружаемых из classpath. Nashorn не реализует несколько обычных javascript функций, таких как setInterval, setTimeout, поэтому нужно подключать простейший скрипт-polyfill. Затем загружается непосредственно код, который формирует HTML страницы (так же как и на клиенте). Этот процесс не очень быстрый, на достаточно мощном компьютере занимает пару секунд, таким образом нужен кеш экземпляров движков.
// Инициализация объекта global для javascript библиотек.
var global = this;
// Инициализация объекта window для javascript библиотек, которые написаны не совсем правильно,
// они думают что всегда исполняются в браузере.
var window = this;
// Инициализация объекта ведения логов, в Nashorn нет console.
var console = {
error: print,
debug: print,
warn: print,
log: print
};
// В Nashorn нет setTimeout, выполняем callback - на сервере сразу требуется ответ.
function setTimeout(func, delay) {
func();
return 0;
};
function clearTimeout() {
};
// В Nashorn нет setInterval, выполняем callback - на сервере сразу требуется ответ.
function setInterval(func, delay) {
func();
return 0;
};
function clearInterval() {
};
Рендеринг HTML на уже проинициализированном движке происходит гораздо быстрее. Для получения HTML, сформированного React, напишем функцию renderHtml, которую поместим в серверную точку входа (srcserver.jsx). В эту функцию передается текущий URL, для обработки его с помощью react-router, и начальное состояние redux для запрошенной страницы (в виде JSON). То же самое состояние для redux, в виде JSON, помещается на страницу в переменную window.INITIAL_STATE. Это необходимо для того, чтобы дерево элементов, построенное React на клиенте, совпадало с HTML, сформированном на сервере.
Серверная точка входа js бандла:
/**
* Выполнение рендеринга HTML с помощью React.
* @param {String} url URL ткущего запроса.
* @param {String} initialStateJson Начальное состояние для Redux в сиде строки с JSON.
* @return {String} HTML, сформированный React.
*/
renderHtml = function renderHtml(url, initialStateJson) {
// Парсинг JSON начального состояния для Redux.
const initialState = JSON.parse(initialStateJson)
// Обработка истории переходов для react-router (обработка проиходит в памяти).
const history = createMemoryHistory()
// Создание хранилища Redux на основе текущего состояния, переданного в функцию.
const store = configureStore(initialState, history, true)
// Объект для записи в него результат рендеринга.
const htmlContent = {}
global.INITIAL_STATE = initialState
// Эмуляция перехода на страницу с заданным URL с помощью react-router.
match({
routes: routes({history}),
location: url
}, (error, redirectLocation, renderProps) => {
if (error) {
throw error
}
// Рендеринг HTML текущей страницы с помощью React.
htmlContent.result = ReactDOMServer.renderToString(
<AppContainer>
<Provider store={store}>
<RouterContext {...renderProps}/>
</Provider>
</AppContainer>
)
})
return htmlContent.result
}
Клиентская точка входа js бандла:
// Создание хранилища Redux.
const store = configureStore(initialState, history, false)
// Элемент в который нужно вставлять HTML, сформированный React.
const contentElement = document.getElementById("content")
// Выполнение рендеринга HTML с помощью React.
ReactDOM.render(<App store={store} history={history}/>, contentElement)
Поддержка «горячей» перезагрузки HTML/стилей
Для удобства разработки клиентской части можно настроить webpack dev server с поддержкой «горячей» перезагрузки изменившихся страниц или стилей. Разработчик запускает приложение, запускает webpack dev server на другом порту (например, настроив в package.json команду npm run debug) и получает возможность в большинстве случаев не обновлять измененные страницы — изменения применяются на лету, это касается как HTML кода, так и кода стилей. Для этого в браузере нужно перейти по ранее настроенному адресу webpack dev сервера. Сервер строит бандлы на лету, остальные запросы проксирует к приложению.
package.json:
{
"name": "java-react-redux-isomorphic-example",
"version": "1.0.0",
"private": true,
"scripts": {
"debug": "cross-env DEBUG=true APP_PORT=8080 PROXY_PORT=8081 webpack-dev-server --hot --colors --inline",
"build": "webpack",
"build:debug": "webpack -p"
}
}
Для настройки «горячей» перезагрузки нужно выполнить действия, описанные ниже.
В файле настроек webpack:
- В devtools указать module-source-map либо module-eval-source-map. При включенном module-source-map, отладочная информация включается в тело модуля — в этом случае сработают точки останова при общей перезагрузке страницы, но, при изменении страничек в средствах отладки Chrome, появляются дубли модулей, каждый со своей версией. Если включить module-eval-source-map, то не будет появления дублей, правда точки останова при общей перезагрузке страницы не будут срабатывать.
devtool: isHot // Инструменты отладки при "горячей" перезагрузке. ? "module-source-map" // "module-eval-source-map" // Инструменты отладки в production. : "source-map" - В devServer настроить отладочный сервер webpack: установить флаг «горячей» перезагрузки, указать порт сервера и указать настройки проксирования запросов к приложению.
// Настройки сервера бандлов для разработки. devServer: { // Горячая перезагрузка. hot: true, // Порт сервера. port: proxyPort, // Сервер бандлов работает как прокси к основному приложения. proxy: { "*": `http://localhost:${appPort}` } } - В entry для точки входа клиентского скрипта подключить модуль — медиатор: react-hot-loader/patch.
entry: { // Бандл для клиентского скрипта. main: ["es6-promise", "babel-polyfill"] .concat(isHot // Если используется "горячая" перезагрузка - требуется медиатор. ? ["react-hot-loader/patch"] // Стартовый скрипт клиентского скрипта. : []) .concat(["./src/main.jsx"]), // Бандл для рендеринга на стороне сервера. [isProduction ? "server.min" : "server"]: ["es6-promise", "babel-polyfill", "./src/server.jsx"] } - В output в настройке publicPath указать полный URL webpack dev сервера.
output: { // Путь для бандлов. path: Path.join(__dirname, "../resources/webapp/static/assets/"), publicPath: isHot // Сервер разработчика с "горячей" перезагрузкой (требуется задавать полный путь). ? `http://localhost:${proxyPort}/assets/` : "/assets/", filename: "[name].js", chunkFilename: "[name].js" } - В настройках загрузчика babel подключить плагины для поддержки «горячей» перезагрузки: syntax-dynamic-import и react-hot-loader/babel.
{ // Загрузчик JavaScript (Babel). test: /.(js|jsx)?$/, exclude: /(node_modules)/, use: [ { loader: isHot // Для "гарячей" перезагрузки требуется настроить babel. ? "babel-loader?plugins[]=syntax-dynamic-import,plugins[]=react-hot-loader/babel" : "babel-loader" } ] } - В настройках загрузчика стилей указать использования загрузчика style-loader. В этом случае стили будут инлайнится в javascript код. При отключенной «горячей» перезагрузки стилей (например в production) используется формирование бандла стилей с помощью extract-text-webpack-plugin.
{ // Загрузчик стилей CSS. test: /.css$/, use: isHot // При использовании "горячей" перезагрузки стили помещаются в бандл с JavaScript кодом. ? ["style-loader"].concat(cssStyles) // В production - стили это отдельный бандл. : ExtractTextPlugin.extract({use: cssStyles, publicPath: "../assets/"}) } - Подключить плагин Webpack.NamedModulesPlugin для формирования именованных модулей.
В клиентской точке входа в приложение вставить обработчик обновления модуля. Обработчик загружает обновленный модуль и запускает процесс рендеринга HTML с помощью React.
// Выполнение рендеринга HTML с помощью React.
ReactDOM.render(<App store={store} history={history}/>, contentElement)
if (module.hot) {
// Поддержка "горячей" перезагрузки компонентов.
module.hot.accept("./containers/app", () => {
const app = require("./containers/app").default
ReactDOM.render(app({store, history}), contentElement)
})
}
В модуле, где создается хранилище redux, вставить обработчик обновления модуля. Этот обработчик загружает обновленные redux-преобразователи и подменяет ими старые преобразователи.
const store = createStore(reducers, initialState, applyMiddleware(...middleware))
if (module.hot) {
// Поддержка "горячей" перезагрузки Redux-преобразователей.
module.hot.accept("./reducers", () => {
const nextRootReducer = require("./reducers")
store.replaceReducer(nextRootReducer)
})
}
return store
В самом приложении на Java нужно отключить построения бандлов через frontend-maven-plugin и использование серверного рендеринга React: теперь за построение бандлов скриптов и стилей начинает отвечать webpack dev server, он делает это очень быстро и в памяти, процессор и диск не будут нагружаться перестроением бандлов. Для отключения пересборки с помощью frontend-maven-plugin и серверного рендеринга React можно предусмотреть профиль maven: frontendDevelopment (его можно включить в IDE, которая поддерживает интеграцию с maven). При необходимости, бандлы пересобираются вручную в любой момент с помощью webpack.
Автор: complit-s
