In this article, we’re going to discuss how to combine Create React App with Spring Boot to give you a single war file, so that we:

  • Can have our frontend and backend in a single war file with optimized productions build
  • And keep the benefits Create React App gives such as hot reloading

Setup

  1. Must have Java installed. Head over here to download a version.
  2. Must have Maven installed. For Mac, I used Homebrew (brew install maven), but otherwise, head here.
  3. Must have Node installed. For Mac, I used Homebrew (brew install node), but otherwise, head over here.

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. 

To get started, create an empty repo on Github and add a ReadMe, gitignore, license, etc. Then, head over to https://start.spring.io to create your Spring application and download it locally. Group and Artifact can also be anything you want them to be.

GroupId: com.react.container;      

Artifact: spring-react-combo-app

Next, unzip the downloaded project into your git directory. Commit, Commit, Commit. Your SpringReactComboAppApplication should look like this:

After we have this taken care of, we can create a basic service. We’ll call it the DadJokesController. This should be created in the same folder as the SpringReactComboAppApplication file. I’m aware this is not a proper REST API format, but let’s ignore that for now. 

In your terminal run 

Then, in your browser check http://localhost:8080/api/dadjokes . You should see the dad joke we added to our controller. 

To create your React app, just run the following in the root directory 

You can call it whatever you want. (I just called mine basic-frontend-app.)

To run the front end application: 

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.

CORS error

CORS error

The simplest way to address the issue is to have your frontend proxy any requests from port 3000 to 8080. This change will be made in your package.json file

Add the following to your frontend App.js file.

Restart the frontend, 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

Proxy config error

Proxy config error

You can now see the results of the dad jokes API call.

Now that our basic frontend and backend are complete, it’s time to create a production build and single war file. 

Under the <dependencies> add this:

Under the <plugins> section of the pom file, we will add the following commands, which will do the following things when mvn clean install is run.

  1. npm install will run with the specified version of Node.
  2. A production build of our frontend will run.
  3. We will deposit the production build.

Note: The order of your plugins is important, so make sure your node/npm install execution is before copying the build file execution.

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. 

That’s all I’ve got for now. If you would like to take a look at the repo or use it, it can be found here on my Github.



Source link

Write A Comment