How to make a different proxy in development mode and in production mode in React

Viewed 129

I have a proxy for development mode in my package.json in my React app to fetch the local server:

"proxy": "http://localhost:3004"

I would like to have a proxy for production mode which will have as baseURL:

"proxy": "https://exercice-generate-random-ideas.herokuapp.com"

How can I tell React to use either of these when fetching if I'm in development or production mode?

useEffect(() => {
        const getIdeas = async () => {
            try {
                const response = await fetch("/api/ideas")
                const data = await response.json()
                setIdeasArray(data)
            } catch (err) {
                console.error('getIdeas error: ', err, err.stack)
            }
        }
        getIdeas()
    }, [])
0 Answers
Related