Issue
I've been following this tutorial and I've managed to finally get to the point I can see something correct. However, it's not displaying completely properly. When I load the webpage, I can see the title states "React App", however the webpage itself is white.
When I have a look at the developer tools, it states:
When I then have a look intellij's console, I get the following error:
2022-08-28 12:43:24.779 DEBUG 7476 --- [nio-8102-exec-3] o.s.web.servlet.DispatcherServlet : GET "/", parameters={}
2022-08-28 12:43:24.789 DEBUG 7476 --- [nio-8102-exec-3] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.jre.hireout.api.IndexController#home()
2022-08-28 12:43:24.805 DEBUG 7476 --- [nio-8102-exec-3] o.s.w.s.v.ContentNegotiatingViewResolver : Selected 'text/html' given [text/html, application/xhtml+xml, image/avif, image/webp, image/apng, application/xml;q=0.9, application/signed-exchange;v=b3;q=0.9, */*;q=0.8]
2022-08-28 12:43:24.962 DEBUG 7476 --- [nio-8102-exec-3] o.s.web.servlet.DispatcherServlet : Completed 200 OK
2022-08-28 12:43:24.987 DEBUG 7476 --- [nio-8102-exec-2] o.s.web.servlet.DispatcherServlet : GET "/static/js/main.7097d855.js", parameters={}
2022-08-28 12:43:24.998 DEBUG 7476 --- [nio-8102-exec-4] o.s.web.servlet.DispatcherServlet : GET "/static/css/main.073c9b0a.css", parameters={}
2022-08-28 12:43:25.002 DEBUG 7476 --- [nio-8102-exec-4] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [classpath [META-INF/resources/], classpath [resources/], classpath [static/], classpath [public/], ServletContext [/]]
2022-08-28 12:43:25.002 DEBUG 7476 --- [nio-8102-exec-2] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [classpath [META-INF/resources/], classpath [resources/], classpath [static/], classpath [public/], ServletContext [/]]
2022-08-28 12:43:25.007 DEBUG 7476 --- [nio-8102-exec-2] o.s.w.s.r.ResourceHttpRequestHandler : Resource not found
2022-08-28 12:43:25.008 DEBUG 7476 --- [nio-8102-exec-4] o.s.w.s.r.ResourceHttpRequestHandler : Resource not found
2022-08-28 12:43:25.008 DEBUG 7476 --- [nio-8102-exec-4] o.s.web.servlet.DispatcherServlet : Completed 404 NOT_FOUND
2022-08-28 12:43:25.008 DEBUG 7476 --- [nio-8102-exec-2] o.s.web.servlet.DispatcherServlet : Completed 404 NOT_FOUND
2022-08-28 12:43:25.017 DEBUG 7476 --- [nio-8102-exec-2] o.s.web.servlet.DispatcherServlet : "ERROR" dispatch for GET "/error", parameters={}
2022-08-28 12:43:25.017 DEBUG 7476 --- [nio-8102-exec-4] o.s.web.servlet.DispatcherServlet : "ERROR" dispatch for GET "/error", parameters={}
2022-08-28 12:43:25.022 DEBUG 7476 --- [nio-8102-exec-2] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController#error(HttpServletRequest)
2022-08-28 12:43:25.022 DEBUG 7476 --- [nio-8102-exec-4] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController#error(HttpServletRequest)
2022-08-28 12:43:25.068 DEBUG 7476 --- [nio-8102-exec-2] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Using 'application/json', given [*/*] and supported [application/json, application/*+json, application/json, application/*+json]
2022-08-28 12:43:25.068 DEBUG 7476 --- [nio-8102-exec-4] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Using 'application/json;q=0.1', given [text/css, */*;q=0.1] and supported [application/json, application/*+json, application/json, application/*+json]
2022-08-28 12:43:25.070 DEBUG 7476 --- [nio-8102-exec-4] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Writing [{timestamp=Sun Aug 28 12:43:25 BST 2022, status=404, error=Not Found, path=/static/css/main.073c9b0a (truncated)...]
2022-08-28 12:43:25.071 DEBUG 7476 --- [nio-8102-exec-2] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Writing [{timestamp=Sun Aug 28 12:43:25 BST 2022, status=404, error=Not Found, path=/static/js/main.7097d855. (truncated)...]
2022-08-28 12:43:25.139 DEBUG 7476 --- [nio-8102-exec-4] o.s.web.servlet.DispatcherServlet : Exiting from "ERROR" dispatch, status 404
2022-08-28 12:43:25.139 DEBUG 7476 --- [nio-8102-exec-2] o.s.web.servlet.DispatcherServlet : Exiting from "ERROR" dispatch, status 404
2022-08-28 12:43:25.163 DEBUG 7476 --- [nio-8102-exec-5] o.s.web.servlet.DispatcherServlet : GET "/manifest.json", parameters={}
2022-08-28 12:43:25.164 DEBUG 7476 --- [nio-8102-exec-5] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [classpath [META-INF/resources/], classpath [resources/], classpath [static/], classpath [public/], ServletContext [/]]
2022-08-28 12:43:25.167 DEBUG 7476 --- [nio-8102-exec-5] o.s.w.s.r.ResourceHttpRequestHandler : Resource not found
2022-08-28 12:43:25.168 DEBUG 7476 --- [nio-8102-exec-5] o.s.web.servlet.DispatcherServlet : Completed 404 NOT_FOUND
2022-08-28 12:43:25.171 DEBUG 7476 --- [nio-8102-exec-5] o.s.web.servlet.DispatcherServlet : "ERROR" dispatch for GET "/error", parameters={}
2022-08-28 12:43:25.172 DEBUG 7476 --- [nio-8102-exec-5] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController#error(HttpServletRequest)
2022-08-28 12:43:25.174 DEBUG 7476 --- [nio-8102-exec-5] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Using 'application/json', given [*/*] and supported [application/json, application/*+json, application/json, application/*+json]
2022-08-28 12:43:25.175 DEBUG 7476 --- [nio-8102-exec-5] o.s.w.s.m.m.a.HttpEntityMethodProcessor : Writing [{timestamp=Sun Aug 28 12:43:25 BST 2022, status=404, error=Not Found, path=/manifest.json}]
2022-08-28 12:43:25.178 DEBUG 7476 --- [nio-8102-exec-5] o.s.web.servlet.DispatcherServlet : Exiting from "ERROR" dispatch, status 404
As you can see, it doesn't seem to find the files at all. However, they're definitely there:
This is what my applications.properties file looks like so far:
# Local H2 database config
#spring.datasource.url=jdbc:h2:file:/data/db/assetregister_db; # Linux only
# Production only!
#spring.datasource.url=jdbc:h2:file:~/data/db/assetregister_db;DB_CLOSE_ON_EXIT=FALSE;AUTO_RECONNECT=TRUE
# Test Only!
spring.datasource.url=jdbc:h2:mem:test_db
spring.jpa.hibernate.ddl-auto=update
#spring.jpa.show-sql=true
spring.jpa.defer-datasource-initialization=true
spring.datasource.driver-class-name=org.h2.Driver
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console=true
spring.h2.console.path=/console
spring.datasource.username=sa
spring.datasource.password=
spring.data.rest.base-uri=/api
spring.datasource.initialization-mode=always
spring.thymeleaf.prefix=classpath://./../../../target/classes/
# App config
server.port=8102
logging.level.org.springframework.web=debug
#logging.level.org.hibernate=debug
Here's my pom.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.2</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.jre</groupId>
<artifactId>hireout</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>HireOut</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>18</java.version>
<kotlin.version>1.7.10</kotlin.version>
<frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
<node.version>v16.17.0</node.version>
<yarn.version>v1.22.0</yarn.version>
<frontend-maven-plugin.version>1.12.1</frontend-maven-plugin.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-reflect</artifactId>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-stdlib-jdk8</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.3.22</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory>
<testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<nodeVersion>${node.version}</nodeVersion>
<yarnVersion>${yarn.version}</yarnVersion>
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.outputDirectory}</installDirectory>
</configuration>
<executions>
<execution>
<id>install-frontend-tools</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
</execution>
<execution>
<id>yarn-install</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build-frontend</id>
<goals>
<goal>yarn</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>position-react-build</id>
<goals>
<goal>copy-resources</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<outputDirectory>${project.build.outputDirectory}</outputDirectory>
<resources>
<resource>
<directory>${frontend-src-dir}/build</directory>
<filtering>false</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-maven-plugin</artifactId>
<configuration>
<args>
<arg>-Xjsr305=strict</arg>
</args>
<compilerPlugins>
<plugin>spring</plugin>
</compilerPlugins>
</configuration>
<dependencies>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-maven-allopen</artifactId>
<version>${kotlin.version}</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
</project>
I'm not sure what is causing this to happen as it all looks correct... However, I must be missing something otherwise this wouldn't be happening.
EDIT:
Here is my Github repository which has the whole project on it.
Solution
Please refer this project to get your answer https://github.com/vinodhmahendra/simplilearn-phase3-2022/tree/master/14-todo-service-rest-jpa-h2 First of all your springboot project is exited with error.Make it run and if that started working with postman same url you have to pass to your react application.IF you are taking url through env variable make sure it starts with REACT_APP.
Answered By - Pradnya Kulkarni
Answer Checked By - Marilyn (JavaFixing Volunteer)