Question

Technologies:

javascript

reactjs

Tolerim

17 hours ago

What is the build time for Firebase hosting?

How can I retrieve the build time/deploy time when deploying my React + Vite project that uses Firebase hosting and authentication? I have tried using the code below in my firebase.json file to collect the build time:

"headers": [
  {
    "source": "**",
    "headers": [
      {
        "key": "Build-Time",
        "value": "$(date -u +%Y-%m-%dT%H:%M:%SZ)"
      }
    ]
  }
]

I also included a fetchData function inside a useEffect with an empty dependency array in my App.jsx component to fetch the build time from the Firebase server:

 const fetchData = async () => {
      try {
        const response = await fetch('https://simple-login-de1a6.web.app/');
        const buildTime = response.headers.get('Build-Time');
        console.log('Build Time:', buildTime);
        // Use the buildTime value in your project as needed
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchData();
  }, []);

However, this code doesn't seem to work as intended. Could someone provide suggestions or solutions to this problem?

Answers(1)

Accepted Answer

It looks like you are trying to collect the build time/deploy time of your Firebase Hosting deployment using the "headers" field in your firebase.json file and then retrieve it in your React app using a fetch call to the URL of your deployed site. The code you have shared seems correct. However, please make sure that you have deployed the updated firebase.json file to Firebase Hosting. Additionally, check whether the URL you are using in your fetch call is correct. If the issue still persists, you can try the following troubleshooting steps: - Open your site in the browser. - Open the developer console and go to the network tab. - Look for the request sent to your site and make sure that the Build-Time header is present in the response headers. - If the header is not present, then there is some issue with the firebase.json file or the deployment process. - If the header is present in the response headers, then check whether your fetch call is set up correctly.