How do i fetch base url from .env file

Question

i am trying to connect react frontend with express backend. I have added the URL of the API in .env file and also in a constant.js file. When i use base url from constant.js, data is being fetched but when i use the base url from .env file i am getting the below error

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Can anyone explain why this is happening?

App.jsx code:

import { useEffect, useState } from 'react';
import './App.css';
import { List } from './components/List';
// import {baseUrl} from "./utils/constants"

function App() {
  const [input, setInput] = useState("")
  const [tasks, setTasks] = useState([])

  const getTasks =  async () => {
    try{
      const res = await fetch(`${process.env.REACT_APP_BASE_URL}/get`)
      const data = await res.json();
      console.log(data)
      setTasks(data.data)
    }
    catch(error){
      console.log(error)
    }
  }

  useEffect(() => {
    getTasks();
    console.log(tasks)
  },[])

  return (
    <div className="App">
      <h1>CRUD Operations </h1>

      <div className="input_holder">
        <input type="text" value={input} onChange={(e) => setInput(e.target.value)}/>
        <button type='submit'>Add Task</button>
      </div>

      <ul>
        {tasks.map( (task) => {
         return <List key={task._id} id={task._id} task={task.task} />
        })}
      </ul>
    </div>
  );
}

export default App;

.env file:

REACT_APP_BASE_URL = "http://localhost:4000/api/v1"

express code:

exports.getTask = async (req, res) => {
  try {
    const tasks = await Task.find();
    res.status(200).json({
      success: true,
      message: "All tasks fetched",
      data: tasks,
    });
  } catch (error) {
    console.log(error);
    res.status(500).json({
      success: false,
      message: "Internal server error",
    });
  }
};

Can you provide the code snippet you are using to fetch from .env file. Also provide sample of how you are declaring the props in .env file. — Mukul Bindal, Jul 01 '23 at 09:06
This error is coming in `const data = await res.json();` because it is not fetching JSON, but html. Please verify if you are using correct endpoint. Also, omit `"` in the .env file — Mukul Bindal, Jul 01 '23 at 09:14
it is fetching json only, i tested the endpoint in the browser and in postman, i am getting json only. @Zeno — Bharath Gowda, Jul 01 '23 at 09:16
Can you use console.log to print value of `${process.env.REACT_APP_BASE_URL}` and the `res` before converting it to json and update in the question — Mukul Bindal, Jul 01 '23 at 09:20
@Zeno i tried to print ```process.env.REACT_APP_BASE_URL``` on the console, the value is getting printed as undefined. so the problem is url is not being fetched from .env file — Bharath Gowda, Jul 01 '23 at 09:24
https://stackoverflow.com/questions/53237293/react-evironment-variables-env-return-undefined maybe this can help — Mukul Bindal, Jul 01 '23 at 09:28
problem solved. i had put .env in src folder instead of root folder — Bharath Gowda, Jul 01 '23 at 09:32

How do i fetch base url from .env file

0 Answers0