CODEWITHSUNDEEP
javareactjsspring-boot
Robin
Robin

Reputation: 615

Implementing Spring Boot with ReactJS

I am following this blog post to create a spring boot with reactjs project.

In order for my project to work, I noticed that I have to have both my nodejs server and my spring boot embedded tomcat server running (I used yarn start to start the react app). Will this always be the case? Does the nodejs server need to be running in order to render the spring boot response into my reactjs UI? Or can I only have my tomcat server running.

Also, I noticed that in my react app it starts on localhost:3000, whereas, my spring boot app starts on localhost:9080. And in my package.json I have proxy defined as localhost:8080. How can I have both apps be under the same host and serve port?

Upvotes: 0

Views: 2080

Answers (2)

kj007
kj007

Reputation: 6254

Follow my below steps and you would be good.

  1. In your spring boot application under application/properties do not define any port so your sprig boot can run by default to 8080 or 9080 is fine if you are ok to run on it.

  2. Create fat jar of your spring boot project

  3. deploy it to /opt/your project name on server.

  4. run you boot app with nohup java -jar jarname & or you create service for it read spring documentation to run your jar as service.

  5. it will start your app on 8090 or 8080 whatever you want.

Now lets come to your front end app which is in react.

to order to run your front end app there are couple of ways.

  1. install apache or ngnix server on your machine
  2. run yarn build which will generate your optimized files under build folder, make sure you define your app backend url.
  3. deploy all generated files under apache/ngnix root folder for ex /var/www/html

Now if you have lets say domain name example.com then your front end app can be accessible with http://www.example.com and backend apis are available at http://www.example.com:8080 make sure 8080 and 80 are allowed.

Now you think,no i want to also want my apis to be accessible by www.example.com then first make sure there context path is defined your apis so they available with base path lets say /api is your base path.

then define proxy in apache or ngnix server.

<VirtualHost *:80>
  ProxyRequests Off
  ProxyPass /api http://localhost:8080/api
  ProxyPassReverse /api http://localhost:8080/api
</VirtualHost>

Now you are good to also access your apis at www.example.com/api

Upvotes: 2

Gaspar Teixeira
Gaspar Teixeira

Reputation: 1267

@Robin, I made a project to my last company using the same technologies about 9 months ago. I put it in production before I leave and it was a successful! I have the boilerplate of this project https://github.com/gasparteixeira/springboot-reactjs-app.

Take a look at the structure. Example: For development keep using the spring boot tools and yarn start for reactjs! But when you're going to generate the jar/war be sure you have built (yarn run build) inside your react project.

Upvotes: 0

Related Questions