How to deploy a SpringBoot\React Application to Heroku

Question

I am in the process of uploading an application I developed on my local PC to Heroku. It has a Springboot backend accessing a Postgresql database and a React\Axios front end.

I uploaded the source to GITHUB and created a project in Heroku and deployed from Heroku. I created the Postgresql database, deployed the Backend and Front end. The React Front end executes and paints the screen, but no data is sent from the backend. I do not think I have the proper pointers in the front end to the backend. Possibly the backend is not seeing the database. The backend did see the POSTGRESQL database locally as I tested with POSTMAN. Not sure how to test with POSTMAN with a remote database. Dataclips Query works within Heroku.

Any help with this would be appreciated.

React Front End Axios URL before:

export const USER_API_BASE_URL = "http://localhost:8080/api/v1/";

React Front End Axios URL after:

export const USER_API_BASE_URL = 
"postgres://xmmazemfflgbkj:a323bc337c559fffd0ec7029daaf60f03712cdb1df41ca8629fe8429f0a7a607@ec2-54-85-113-73.compute-1.amazonaws.com:5432/d423nfcf5dbjf7";

Spring Boot application.properties before

spring.datasource.url=jdbc:postgresql://localhost:5432/budgettool
spring.datasource.username=postgres
spring.datasource.password=admin

Spring Boot application.properties after

spring.datasource.url=postgres://xmmazemfflgbkj:a323bc337c559fffd0ec7029daaf60f03712cdb1df41ca8629fe8429f0a7a607@ec2-54-85-113-73.compute-1.amazonaws.com:5432/d423nfcf5dbjf7
spring.datasource.username=xmmazemfflgbkj
spring.datasource.password=a323bc337c559fffd0ec7029daaf60f03712cdb1df41ca8629fe8429f0a7a607

SpringBootApplication.java

contains the following
public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "PUT", "POST", "PATCH", "DELETE", "OPTIONS");
            }
        };

Heroku Log

2022-03-25T13:35:51.002170+00:00 heroku[web.1]: State changed from crashed to starting
2022-03-25T13:35:54.059594+00:00 heroku[web.1]: Starting process with command `java -Dserver.port=13204 $JAVA_OPTS -jar target/budget-backend-postsql-0.0.1-SNAPSHOT.jar`
2022-03-25T13:35:54.935490+00:00 app[web.1]: Create a Procfile to customize the command used to run this process: https://devcenter.heroku.com/articles/procfile
2022-03-25T13:35:54.959996+00:00 app[web.1]: Setting JAVA_TOOL_OPTIONS defaults based on dyno size. Custom settings will override them.
2022-03-25T13:35:54.964400+00:00 app[web.1]: Picked up JAVA_TOOL_OPTIONS: -XX:+UseContainerSupport -Xmx300m -Xss512k -XX:CICompilerCount=2 -Dfile.encoding=UTF-8 
2022-03-25T13:35:55.118429+00:00 app[web.1]: no main manifest attribute, in target/budget-backend-postsql-0.0.1-SNAPSHOT.jar
2022-03-25T13:35:55.259986+00:00 heroku[web.1]: Process exited with status 1
2022-03-25T13:35:55.302308+00:00 heroku[web.1]: State changed from starting to crashed
2022-03-25T15:25:55.884892+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=budget-program-backend.herokuapp.com request_id=69a08cfa-7635-4586-8454-5f91b4ccca8e fwd="35.136.227.81" dyno= connect= service= status=503 bytes= protocol=https
2022-03-25T15:25:56.285150+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=budget-program-backend.herokuapp.com request_id=4ad6b14b-ee7b-4dd0-9cee-ea9d7ef547a7 fwd="35.136.227.81" dyno= connect= service= status=503 bytes= protocol=https

Fixed some of the above in POM.XML

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                 <configuration>
                  <mainClass>com.places.Main</mainClass>
                 </configuration>
                 <executions>
                  <execution>
                    <goals>
                      <goal>repackage</goal>
                    </goals>
                  </execution>
                 </executions>  
            </plugin>
        </plugins>
    </build>

New error:

2022-03-25T16:38:26.078846+00:00 heroku[web.1]: Process exited with status 1
2022-03-25T16:38:26.138596+00:00 heroku[web.1]: State changed from starting to crashed
2022-03-25T16:44:21.027515+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=budget-program-backend.herokuapp.com request_id=1b4650a2-c5f4-4fb6-8300-79e7309bc9fe fwd="35.136.227.81" dyno= connect= service= status=503 bytes= protocol=https
2022-03-25T16:44:21.202166+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=budget-program-backend.herokuapp.com request_id=593e9080-71e8-4e0a-9308-8ca4ff6107d2 fwd="35.136.227.81" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

First, u can check Heroku logs on your backend application there should be an exception if the spring boot application can't access the Postgres server. If there is an exception related to accessing the SQL server you should check the JDBC connection string. I think you are missing "jdbc:" in your data source URL

"spring.datasource.url=postgres://xmmazemfflgbkj:a323bc337c559fffd0ec7029daaf60f03712cdb1df41ca8629fe8429f0a7a607@ec2-54-85-113-73.compute-1.amazonaws.com:5432/d423nfcf5dbjf7".Also you should try to test remote spring boot applications APIs with the postman durring the testing to avoid CORS issue.One more advice do not share real SQL credentional on any public website.