This project demonstrates how to integrate a React frontend with a Spring Boot backend to create a NASA APOD (Astronomy Picture of the Day) API-based application.
├── Assignment2FrontEnd
│ ├── public
│ └── src
└── WebEngineeringSpringAPI
├── build
├── gradle
└── src
Assignment2FrontEnd: Contains the React frontend code.WebEngineeringSpringAPI: Contains the Spring Boot backend code.
This project demonstrates how to integrate a React frontend with a Spring Boot backend to create a NASA APOD (Astronomy Picture of the Day) API-based application.
- Navigate to the
Assignment2FrontEnddirectory. - Install dependencies using
npm install. - Place the images (e.g.,
Screenshot (162).png,Screenshot (163).png) in the appropriate directory within the React project. - Run
npm run buildto compile the React code using webpack.
- Navigate to the
WebEngineeringSpringAPIdirectory. - Develop your Spring Boot application to serve the compiled React frontend using Thymeleaf.
- Move the compiled React frontend from
Assignment2FrontEnd/buildtoWebEngineeringSpringAPI/src/main/resources/static/built. - In your Spring Boot controller, serve the
index.htmlfile located inWebEngineeringSpringAPI/src/main/resources/templatesfor all requests except API requests. - Ensure CORS is properly configured in your Spring Boot application to allow requests from the React frontend.
- Start your Spring Boot application.
- Access the application in your browser.
-
Navigate to the
Assignment2FrontEnddirectory:cd Assignment2FrontEnd -
Install dependencies:
npm install
-
Build the React project:
npm run build
-
Navigate to the
WebEngineeringSpringAPIdirectory:cd WebEngineeringSpringAPI -
Build the Spring Boot project:
./gradlew build
or
gradle build && gradle bootrun
.png)
.png)
.png)
.png)
.png)