Я создал приложение реагирования и использую перезарядки для отображения графика. Я запускаю его с npm start и все отлично работает. Теперь я хочу развернуть его на кота. Я использую exec-maven-плагин для этого. Когда я развертываю сгенерированный файл войны, браузер показывает ошибки: ../static/js/...chunk.js загружен, но MIME-тип ("text / html") не является допустимым MIME-типом JavaScript. Это происходит для всех файлов, таких как: static / js / ... chunk.js.
Другие ошибки: Не удалось загрузить из источника ../static/js/..chunk.js.
Я следовал этому уроку: https://www.megadix.it/blog/create-react-app-servlet/
Это сработало на tomcat, но когда я пробую это с перезарядками, я получаю ошибки.
Мой пакет. Json
{
"name": "frontend_tomcat",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"recharts": "^1.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-plugin-recharts": "^1.2.0"
}
}
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<!--
Adapted from:
https://gist.github.com/phillipgreenii/7c954e3c3911e5c32bd0
-->
<modelVersion>4.0.0</modelVersion>
<groupId>it.megadix</groupId>
<artifactId>frontend_tomcat</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<npm.output.directory>build</npm.output.directory>
</properties>
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<!-- Standard plugin to generate WAR -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.1.1</version>
<configuration>
<webResources>
<resource>
<directory>${npm.output.directory}</directory>
</resource>
</webResources>
<webXml>${basedir}/web.xml</webXml>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<executions>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Default Lifecycle' -->
<execution>
<id>npm install (initialize)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>initialize</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Clean Lifecycle' -->
<execution>
<id>npm install (clean)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>pre-clean</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build (compile)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>compile</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
</configuration>
</execution>
</executions>
<configuration>
<environmentVariables>
<CI>true</CI>
<!-- The following parameters create an NPM sandbox for CI -->
<NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
<NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
<NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>local</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://localhost:8080/${project.artifactId}</PUBLIC_URL>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>prod</id>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://my-awesome-production-host/${project.artifactId}</PUBLIC_URL>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>
App.js
import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,BarChart, Bar, Label
} from 'recharts';
export default class Example extends React.Component{
render(){
const data = [
{
name: '10:00', SmartMeter1: 0, SmartMeter2: 2400,
},
{
name: '10:30', SmartMeter1: 600, SmartMeter2: 1398,
},
{
name: '11:00', SmartMeter1: 1000, SmartMeter2: 1398,
},
{
name: '11:30', SmartMeter1: 1100, SmartMeter2: 2500,
},
{
name: '12:00', SmartMeter1: 1200, SmartMeter2: 1398,
},
{
name: '12:30', SmartMeter1: 1500, SmartMeter2: 2450,
},
{
name: '13:00', SmartMeter1: 1900, SmartMeter2: 9800,
},
{
name: '13:30', SmartMeter1: 2000, SmartMeter2: 3908,
},
{
name: '14:00', SmartMeter1: 2200, SmartMeter2: 4800,
},
{
name: '14:30', SmartMeter1: 2350, SmartMeter2: 3800,
},
{
name: '15:00', SmartMeter1: 2400, SmartMeter2: 4300,
},
];
return (
<LineChart
title = "Tagesverbrauch"
width={800}
height={500}
data={data}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis unit=" Uhr" dataKey="name" tick={{ fill: 'white' }}>
</XAxis>
<YAxis unit="kWh" tick={{ fill: 'white' }}/>
<Tooltip />
<Line name="Smart Meter 1" type="monotone" dataKey="SmartMeter1" stroke="#f59f4a" strokeWidth={2} activeDot={{ r: 8 }} />
</LineChart>
);
}
}