Deployed full stack project on Render but React project is not fetching api endpoint correctly?

Question

I have a Java Springboot/React project I deployed on Render - Springboot for backend, React for frontend. I deployed my Springboot project on Render through DockerHub since Render doesn't have the backend environment to deploy Java specifically. Springboot project is also deployed as Web Service, and React project as Static Site. The deploy for both are 'successful' and live, as said in the logs.

However, the frontend page says NOT FOUND, and console log says error 404, so it is not fetching the api endpoint correctly. Site(https://movie-gold-v1.onrender.com/)

This is the Springboot ROOT: https://movie-gold-v2.onrender.com/
And this is the List of movies in JSON: https://movie-gold-v2.onrender.com/api/v1/movies

So the React project wants to communicate with the backend and fetch the movies to display it in all of its glory.

Here is my front-end code:

App.js

import { useEffect, useState } from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import api from './api/axiosConfig';
import Layout from './components/Layout';
import Header from './components/header/Header';
import Home from './components/home/Home';
import NotFound from './components/notFound/NotFound';
import Reviews from './components/reviews/Reviews';
import Trailer from './components/trailer/Trailer';


function App() {

  const [movies, setMovies] = useState();
  const [movie, setMovie] = useState();
  const [reviews, setReviews] = useState([]);

  const getMovies = async () =>{
    
    try
    {
      const response = await api.get("/api/v1/movies");
      // const response = await api.get("https://movie-gold-v2.onrender.com/api/v1/movies");

      setMovies(response.data);

    } 
    catch(err)
    {
      console.log(err);
    }
  }

  const getMovieData = async (movieId) => {
     
    try 
    {
        const response = await api.get(`/api/v1/movies/${movieId}`);
        // const response = await api.get(`https://movie-gold-v2.onrender.com/api/v1/movies/${movieId}`);

        const singleMovie = response.data;

        setMovie(singleMovie);

        setReviews(singleMovie.reviews);
        

    } 
    catch (error) 
    {
      console.error(error);
    }

  }

  useEffect(() => {
    getMovies();
  },[])

axiosConfig.js

import axios from 'axios';

export default axios.create({
    // baseURL:'http://localhost:8080',
    baseURL: 'https://movie-gold-v2.onrender.com',
});

Java Springboot
MovieController.java

@RestController
@CrossOrigin(origins = "https://movie-gold-v1.onrender.com")
@RequestMapping("/api/v1/movies")
public class MovieController {

    @Autowired
    private MovieService service;

    @GetMapping
    public ResponseEntity<List<Movie>> getMovies() {
        List<Movie> movies = service.findAllMovies();
        return new ResponseEntity<>(movies, HttpStatus.OK);
    }

    @GetMapping("/{imdbId}")
    public ResponseEntity<Movie> getSingleMovie(@PathVariable String imdbId) {
        Optional<Movie> movie = service.findMovieByImdbId(imdbId);
        if (movie.isPresent()) {
            Movie fetchedMovie = movie.get();
            List<Review> reviews = fetchedMovie.getReviews(); // Update the field name
            // Process the fetched movie and reviews as needed
            return new ResponseEntity<>(fetchedMovie, HttpStatus.OK);
        } else {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
    }

}

Troubleshooting
I know for sure it has something to do with the api endpoints because that is how the movies are supposed to be rendered and because they aren't, the url might not be correct?
So in the functions listed below, you can see I tried to list the api.get urls in two different ways(one of each are commented out):

const getMovies = async () =>{
    
    try
    {
      const response = await api.get("/api/v1/movies");
      // const response = await api.get("https://movie-gold-v2.onrender.com/api/v1/movies");

      setMovies(response.data);

    } 
    catch(err)
    {
      console.log(err);
    }
  }

  const getMovieData = async (movieId) => {
     
    try 
    {
        const response = await api.get(`/api/v1/movies/${movieId}`);
     // const response = await api.get(`https://movie-gold-v2.onrender.com/api/v1/movies/${movieId}`);

Both didn't work, so perhaps I wasn't stating the baseUrl in axiosConfig.js correctly? I listed it both ways:

https://movie-gold-v2.onrender.com,

https://movie-gold-v2.onrender.com/api/v1/movies
Both also didn't seem to work...

I made sure DockerHub is updated with the latest image tag and container. I also made sure front-end code is updated and contains all of the files. I made sure to fetch latest commit as well whenever I made changes.
My env file is correct and in my Web Service backend project on Render as a 'Secret File'
Both projects work in sync together and are perfect locally, just a deployment issue on my end
CORS issue isn't listed, so I don't think that's a problem
I did GET requests on Postman and they work fine

I also want to note that the Java project root url is this:

But the list of movies in JSON format is: https://movie-gold-v2.onrender.com/api/v1/movies
I don't know if that affects anything but just wanted to point that out.
Also that root label url is the whiteLabel error page

If anyone can check out the code with fresh eyes and see what's up, that'd be awesome. Thank you!

I also don't know where the option to change plain text in the Code format to actual code here, sorry!

Deployed full stack project on Render but React project is not fetching api endpoint correctly?

0 Answers0