Several months ago I started my journey with Spring Boot and React. Local development is a pleasure, thanks to the great framework, convenient tools and friendly environment.
I created the Spring boot starter project on Spring Initializr, and React hello world project using "create-react-app". Spring runs on localhost:8080 and react runs on port 3000. Everything seems fine until I decided to deploy my frontend and backend to Google Cloud. Even though there are bunch of tutorials online which I could follow, I spent plenty of time deploying my app and debugging failures. The world outside my localhost is harsh.
You can serve the react app locally and react-script will help you hot-loading your change, so you can get instant feedback on your code. However, it doesn't mean you should rely on the react-script for Google Cloud deployment. Here is the sad story (don't follow):
Deploy Spring jar as "api" service in App Engine (Env: java 11 standard)
Deploy plain React (without build) as "default" service in App Engine (Env: nodejs10 standard)
As a result, the "default" service returned 502 when I tried to access the webpage. The root cause behind 502 was Nginx failed to start. After checking the Nginx log, I found out the web app tried to reach 127.0.0.1, which was disallowed by the proxy service.
Then I tried to change the host to 0.0.0.0. But I couldn't find any codes or config logic to override the parameters. Things got total stuck.
Suddenly I realized that my React app should only be treated as static files, as they are just a bunch of javascript/css/html files. This means I should choose one of the web serving techniques such as "serve" or "express" for nodejs.
But hey, don't forget I have a spring boot app! Why I create another serving logic to serve only the static files? Why can't I just use Spring to serve my React app? After realizing this, I have my deployment setup:
Build React app and copy the "build" folder in src/main/resources directory
Tell Spring the folder that contains static files by:
spring.resources.static-locations=classpath:/build/Deploy spring boot on App Engine as "default" service
Now everything works perfectly.
Bonus: Local Development Tip
You can add the proxy service in your react app, so you can redirect your api path to the other service you are running locally. Put the following in your package.json file:
"proxy": "http://localhost:8080",Then React will redirect any unknown path to localhost:8080.