A little backstory on how this started. My team needed to save some on money on the infrastructure we were requesting and since most of the load for the application we wanted to build would be on the client-side rather than the service side. We decided to see if we could combine a Spring Application with a React app and serve up a single war file. Find out how to combine Create React App with Spring Boot to give you a single war file The basic idea of what Spring Boot and Create React App do. Create React App helps you start a React project very quickly. It gives you all the basic things you need to get up and running asap. Spring boot helps you start and maintain a spring application quickly and easily. Goals: Frontend and backend in a single war file with optimized productions build Keeping the benefits Create React App gives such as hot reloading Setup: Must have java installed. Head over to download a version here Must have maven installed. For Mac, I used Homebrew (brew install maven )but otherwise, head here Must have node installed. For Mac, I used Homebrew (brew install node )but otherwise, head over here * Side note: my IDE of choice is IntelliJ. When working on react code I usually switch over to VS Code. Feel Free to use what makes you feel comfortable Create an empty repo on Github and add a Read Me, gitignore, license, etc. Head over to to create your spring application and download locally. Group and Artifact can also be anything you want it to be. https://start.spring.io : e.the.awesome GroupId : spring-react-combo-app Artifact 3. Unzip the downloaded project into your git directory. Commit, Commit, Commit. Your SpringReactComboAppApplication should look like this. package e.the.awesome.springreactcomboapp; org.springframework.boot.SpringApplication; org.springframework.boot.autoconfigure.SpringBootApplication; org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
public {

	public main( [] args) {
		SpringApplication.run(SpringReactComboAppApplication.class, args);
	}

} import import import class SpringReactComboAppApplication extends SpringBootServletInitializer static void String 4. Let’s create a basic service now. We’ll call it the DadJokesController. This should be created in the same folder as SpringReactComboAppApplication file. I’m aware this is not a proper Rest API format but let’s ignore that for now. package e.the.awesome.springreactcomboapp; org.springframework.web.bind.annotation.GetMapping; org.springframework.web.bind.annotation.RestController;
@RestController
public {
    @GetMapping( )
    public dadJokes() { ;
    }
} import import class DadJokesController "/api/dadjokes" String return "Justice is a dish best served cold, if it were served warm it would be just water." 5. In your terminal run mvn spring-boot: run Then in your browser check . You should see the dad joke we added to our controller. http://localhost:8080/api/dadjokes 6. To create your React app, just run in the root directory npx create-react-app basic-frontend- app You can call it whatever you want, I just called mine basic-frontend-app 7. To run the front end application: basic-frontend- < >npm start cd app br After starting it should look like: 8. Since we want to integrate our Dad Jokes service into the frontend, first we will address proxy issues. If you’ve noticed, your service starts on localhost:8080 while the frontend starts on localhost:3000. If we try calling our service from the frontend, depending on your browser, you’ll get a CORS error. The simplest way to address the issue is to have your front end proxy any requests from port 3000 to 8080. This change will be made in your package.json file { : , : , : , : { : , : , : }, : { : , : , : , : }, : { : { : , : }
  }
} "name" "basic-frontend-app" "version" "0.1.0" "private" true "dependencies" "react" "^16.3.1" "react-dom" "^16.3.1" "react-scripts" "1.1.4" "scripts" "start" "react-scripts start" "build" "react-scripts build" "test" "react-scripts test --env=jsdom" "eject" "react-scripts eject" "proxy" "/api" "target" "http://localhost:8080" "ws" true Add the following to your frontend App.js file React, {Component} ; logo ; ; {

    state = {};

        componentDidMount() { .dadJokes()
        }

    dadJokes = {
        fetch( )
            .then( response.text())
            .then( { .setState({ : message});
            });
    };

    render() { ( <header className="App-header">
            <img src={logo} className="App-logo" alt="logo"/>
            <h3 className="App-title">{this.state.message}</h3>
            </header>
            <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        </div> import from 'react' import from './logo.svg' import './App.css' class App extends Component this => () '/api/dadjokes' => response => message this message return < = > div className "App" );
    }
}

export default App; Restart the front end and you should be good. if you happen to get this error: I deleted my package-lock.json file and node_modules folder reinstalled npm packages and ran it again 9. Your application should now look like. You can see the results of the dad jokes API call. 10. Now that our basic front end and backend is complete, it’s time to create a production build and single war file. Under the add this in <dependencies>  com.github.eirslett < > groupId </ > groupId /artifactId>
<version>1.6</ </ > dependency Under the section of the pom file, we will add the following commands which will do the following things when mvn clean install is run. <plugins> npm install with the specified version of node run a production build of our frontend deposit the production build <plugin> <artifactId>frontend-maven-plugin< version> <workingDirectory>basic-frontend-app</workingDirectory> <installDirectory>target</installDirectory> <executions> <id>install node and npm</id> <goals>
            <goal>install-node-and-npm</goal>
         </goals> <configuration>
            <nodeVersion>v8.9.4</nodeVersion>
            <npmVersion>5.6.0</npmVersion>
         </configuration> <execution> <goals> < > < d> <goal>npm</goal> <configuration> < execution> < artifactId> <execution>
         <phase>generate-resources</phase>
         <configuration>
            <target>
               <copy todir="${project.build.directory}/classes/public">
                  <fileset dir="${project.basedir}/basic-frontend-app/build"/>
               </copy>
            </target>
         </configuration>
         <goals>
            <goal>run</goal>
         </goals>
      </execution>
   </executions> com.github.eirslett < > groupId </ > groupId /artifactId>
   <version>1.6</ < > configuration </ > configuration < > execution </ > execution npm install < > id </ > id npm < > goal </ > goal /goals>
         <configuration>
            <arguments>install</ arguments </ > configuration /execution>
      <execution>
         <id>npm run build</i < > goals </ > goals run build < > arguments </ > arguments /configuration>
      </ </ > executions /plugin>
<plugin>
   <artifactId>maven-antrun-plugin</ < > executions </ > plugin Side note: order is important for your plugins so make sure your node/npm install execution is before copying the build file execution 11. After adding this, run mvn clean install  and verify that the target/classes directory contains both frontend files and java files. And you should be good to go. A final look at my . pom file So that’s all I got. If you would like to take a look at the repo or use it. It can be found here on my Github . Next up is an article on how to deploy your war file on Heroku. Look forward to it!

Fetch

Heroku

Target

Baby developer in the making

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Package Your React App with Spring Boot [A How-To Guide]

Too Long; Didn't Read

Companies Mentioned

Emmanuella

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Package Your React App with Spring Boot [A How-To Guide]

Too Long; Didn't Read

Companies Mentioned

Emmanuella

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES