Simplify development with public ports in Firebase Studio

July 1, 2025

With Firebase Studio, it’s common to utilize workspaces as sources for APIs or web servers. The public ports feature in Firebase Studio helps connect your frontend to your backend more easily and facilitates sharing to gather feedback. You can specify a particular port for broad public access, which makes backend services accessible without mandatory authentication. This significantly simplifies full-stack development, enabling your frontend applications to access backend services without requiring any code changes.

For instance, if you’re developing a web application with a React frontend and a Node.js Express backend, making your backend port public lets your React frontend to fetch data directly from the Express API using the public URL. This facilitates seamless integration and testing without frontend code modifications.

How to make a backend port public

When your backend application is running in Firebase Studio, it typically operates on a specific port found in the Firebase Studio tab on the Activity Bar.

To make this port public:

Go to the Firebase Studio tab (Ctrl+',Ctrl+', or Cmd+',Cmd+' on MacOS).
Scroll down to Backend Ports.
Next to the port number you want to open, click the lock icon to make the port public.

After the port is open to the public, the icon will change to a globe symbol, and you can click this to remove public access.
You can then open the newly-public URL in a new tab and view its complete URL in your browser: from the Actions column, click Open in a new window.

Public ports remain accessible as long as your workspace is active.

Access from the frontend

After making your backend port public, your frontend application can directly communicate with the backend using the generated public URL. An example URL might look like https://3000-idx-nodejs-1736921651745.cluster-y5qn7andqbhuisvzejdefmihmk.cloudworkstations.dev/.

Beyond API services, public ports can also be used to make your web application previews public. This is incredibly convenient for sharing your frontend with others to gather quick feedback or facilitate testing.

To share your main web application preview, first click the Make Preview Public button in the web preview toolbar.

Once you have done that, the icon will then change to a yellow globe, indicating public access. With just a click, you can now quickly share your frontend for feedback or testing without requiring a complex setup

Sample code: Backend and frontend integration

You can use the following code to set up a sample frontend and backend with CORS enabled in Firebase Studio, demonstrating the power of public ports for seamless integration.

Backend (Node.js with Express)

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors());

app.get('/', (req, res) => {
   res.json({ message: `Hello ` + req.query.name });
});

const port = parseInt(process.env.PORT || '3000');
app.listen(port, () => {
 console.log(`listening on port ${port}`);
});

In this example, the cors middleware is used to enable Cross-Origin Resource Sharing (CORS), which lets your frontend (even if hosted on a different domain or port) to access resources from this backend.

Frontend (Simple HTML with Javascript)

<!DOCTYPE html>
<html>
<head>
 <title>Frontend</title>
</head>
<body>
 <h1>Frontend</h1>
 <div id="message"></div>

 <script>
   fetch('https://your-backend-public-url?name=User', {
     method: 'GET'
   })
     .then(response => {
       if (!response.ok) {
           throw new Error('Network response was not ok (' + response.status + ')');
       }
       return response.json();
     })
     .then(data => {
       document.getElementById('message').innerText = data.message;
     })
     .catch(error => {
       console.error('Error fetching data:', error);
       document.getElementById('message').innerText = 'Error: ' + error.message;
     });
 </script>
</body>
</html>

This frontend code fetches data from your backend server. Remember to replace https://your-backend-public-url with the actual public URL of your backend.

Give public ports a try!

Visit Firebase Studio to try out the public ports feature, and start sharing your app previews with others with simplified access to backend ports in Firebase Studio!

The Firebase Blog