react tomcat

1<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
2         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
3   
4    <modelVersion>4.0.0</modelVersion>
5    <groupId>com.frugalis</groupId>
6    <artifactId>Frugalis</artifactId>
7    <version>0.0.1-SNAPSHOT</version>
8    <packaging>war</packaging>
9 
10    <properties>
11        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
12        <npm.output.directory>build</npm.output.directory>
13    </properties>
14 
15    <build>
16        <finalName>${project.artifactId}</finalName>
17        <plugins>
18            <plugin>
19                <groupId>org.apache.maven.plugins</groupId>
20                <artifactId>maven-war-plugin</artifactId>
21                <version>2.1.1</version>
22                <configuration>
23                    <webResources>
24                        <resource>
25                            <directory>${npm.output.directory}</directory>
26                        </resource>
27                    </webResources>
28                    <webXml>${basedir}/web.xml</webXml>
29                </configuration>
30            </plugin>
31 
32            <plugin>
33                <groupId>org.codehaus.mojo</groupId>
34                <artifactId>exec-maven-plugin</artifactId>
35                <version>1.3.2</version>
36                <executions>
37                    <execution>
38                        <id>npm run build (compile)</id>
39                        <goals>
40                            <goal>exec</goal>
41                        </goals>
42                        <phase>compile</phase>
43                        <configuration>
44                            <executable>npm</executable>
45                            <arguments>
46                                <argument>run</argument>
47                                <argument>build</argument>
48                            </arguments>
49                        </configuration>
50                    </execution>
51 
52                </executions>
53 
54                <configuration>
55                    <environmentVariables>
56                        <CI>false</CI>
57                        <!-- The following parameters create an NPM sandbox for CI -->
58                        <NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
59                        <NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
60                        <NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
61                    </environmentVariables>
62                </configuration>
63            </plugin>
64        </plugins>
65    </build>
66 
67    <profiles>
68        <profile>
69            <id>local</id>
70            <activation>
71                <activeByDefault>true</activeByDefault>
72            </activation>
73            <build>
74                <plugins>
75                    <plugin>
76                        <groupId>org.codehaus.mojo</groupId>
77                        <artifactId>exec-maven-plugin</artifactId>
78 
79                        <configuration>
80                            <environmentVariables>
81                                <PUBLIC_URL>http://localhost:8080/${project.artifactId}</PUBLIC_URL>
82                                <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
83                            </environmentVariables>
84                        </configuration>
85                    </plugin>
86                </plugins>
87            </build>
88        </profile>
89 
90        <profile>
91            <id>prod</id>
92            <build>
93                <plugins>
94                    <plugin>
95                        <groupId>org.codehaus.mojo</groupId>
96                        <artifactId>exec-maven-plugin</artifactId>
97 
98                        <configuration>
99                            <environmentVariables>
100                                <PUBLIC_URL>http://frugalisminds.com/${project.artifactId}</PUBLIC_URL>
101                                <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
102                            </environmentVariables>
103                        </configuration>
104                    </plugin>
105                </plugins>
106            </build>
107        </profile>
108    </profiles>
109</project>
110</span>
111

1{
2  "name": "App",
3  "version": "0.1.0",
4   "homepage":"http://localhost:8080/sampleapp",
5  "private": true,
6  "dependencies": {
7    "react": "^16.3.1"
8  },
9  "scripts": {
10    "start": "react-scripts start",
11    "build": "react-scripts build",
12    "test": "react-scripts test --env=jsdom",
13    "eject": "react-scripts eject"
14  }
15}
16

1<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
2	      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3	      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
4	      http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
5	      version="2.4">
6 
7  <display-name>frugalis</display-name>
8 
9  <error-page>
10    <error-code>404</error-code>
11    <location>/index.html</location>
12  </error-page>
13  
14</web-app>
15

1import React, { Component } from 'react';
2import {
3    BrowserRouter,
4    Link,
5    Route,
6    Switch
7} from 'react-router-dom';
8 
9import Home from './Home.jsx';
10import ContactUs from './ContactUs.jsx';
11import Blog  from './Blog.jsx';
12 
13class App extends Component {
14  render() {
15    return (
16      <div className="App">
17        <div className="App-header">
18          <h2>Welcome to React</h2>
19        </div>
20        <BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
21          <div>
22            <ul className="nav">
23              <li><Link to="/">Home</Link></li>
24              <li><Link to="/blog">Blog</Link></li>
25              <li><Link to="/contactUs">Contact Us</Link></li>
26            </ul>
27            <Switch>
28              <Route path="/blog" component={Blog}/>
29              <Route path="/contactUs" component={ContactUs}/>
30              <Route path="/" component={Home}/>
31            </Switch>
32          </div>
33        </BrowserRouter>
34      </div>
35    );
36  }
37}
38 
39export default App;
40