I deployed my React App but the API is not working

Question

I made a really simple react app, where I just have a search bar and it shows every movie through an API I got from omdbapi.com .I think its a WEB Api since I'm getting it from a JSON File on a web.I deployed it but the movies are not showing.They are showing in my local host though.App structure, code everything is the same as when you first create an app except app.js ofc.Npm build does not work, installing Node on the domain does not work, unless there is a method I have not tried,I'm searching all over the web but I can't find a solution or I just do not know how to search.

import { useState , useEffect } from 'react';
import MovieCard from './MovieCard';
import './App.css';
import SearchIcon from './search.svg'

const API_URL = 'http://www.omdbapi.com?apikey=********'

const App = () => {

    const [movies, setMovies] = useState([]);

    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        searchMovies('batman')
    }, []);

    const searchMovies = async (title) => {
        const response = await fetch(`${API_URL}&s=${title}`);
        const data = await response.json();

        setMovies(data.Search);
    };

    return (
        <div className='app'>
            <h1>MovieLand</h1>

            <div className='search'>
                <input 
                    placeholder='Search for moves'
                    value={searchTerm}
                    onChange={(e)=> setSearchTerm(e.target.value)}
                />
                <img 
                    src={SearchIcon}
                    alt='search'
                    onClick={()=> searchMovies(searchTerm)}
                />
            </div>

            {movies?.length > 0
                ? (
                <div className='container'>
                    {movies.map((movie) => (
                        <MovieCard movie={movie}/>
                    ))}
                </div>
                ) : (
                <div className='empty'>
                    <h2>No movies Found</h2>
                </div>
            )}
        </div>
    );
}

export default App;

Answer 1

how exactly are you deploying it? if you used create-react-app then you could just run npm run build then upload the contents of the build folder to your server

Answer 2

I am very interested about the:

Npm build does not work

Can you share a little bit more about the errors you are getting.

If you are really stuck use the good'ol console.log everywhere method, especially on the fetch request and the response of it.

Answer 3

Please carefully review the wording of your question and rewrite it where appropriate. Much of it is illegible.

Above this line - setMovies(data.Search); add a console.log(data.Search); . Are the items you're expecting actually appearing here?

Finally, never have I added async code outside of a useEffect . I suppose the way you've done it would work but why not just include the code inside?