# Early preview of public ports!

**URL:** <https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911>\
**Category:** General\
**Tags:** feature\
**Created:** [September 13, 2024, 11:47pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911 "2024-09-13T23:47:59Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/kirupa/32/4_2.png) [@kirupa](https://community.firebasestudio.dev/u/kirupa)\
**Post date:** [September 13, 2024, 11:47pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/1 "2024-09-13T23:47:59Z")

</div>

Hi everybody - we shipped an early preview of our support for public ports. I recorded a quick video on how you can use it:

[![](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/4/44fed3510e63cb79b42e42ac1ade2a5f2a901a29.jpeg "Very early preview of public ports in Project IDX! 🔥") ](https://www.youtube.com/watch?v=z2l4yH-TwHQ)

Please share your feedback. We are going to add some UI next to make it easier to toggle your ports public or private, so stay tuned for that.

If you would like to share this on Twitter / X, I also [made a post here](https://x.com/kirupa/status/1834740111789244496).

(cc @treeder )

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![essayoub](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/essayoub/32/162_2.png) [@essayoub](https://community.firebasestudio.dev/u/essayoub)\
**Post date:** [September 18, 2024, 3:19am UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/2 "2024-09-18T03:19:34Z")

</div>

I’ve been waiting for this feature to be released publicly. Thanks

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 24, 2024, 4:05pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/3 "2024-09-24T16:05:26Z")

</div>

Finally got a chance to try this and while it looks like it works in a browser (ie: incognito mode), there are CORS issues if using it from a frontend.

![image](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/8/8894172fc9e3dad6e73ce440076d56dadcb75445.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/kirupa/32/4_2.png) [@kirupa](https://community.firebasestudio.dev/u/kirupa)\
**Post date:** [September 24, 2024, 8:27pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/4 "2024-09-24T20:27:30Z")

</div>

Oh, interesting. Can you please file a bug ([https://issuetracker.google.com/issues/new?component=1379083&template=1836320](https://issuetracker.google.com/issues/new?component=1379083&template=1836320))? That will help make sure it gets looked at quickly.

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 24, 2024, 8:52pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/5 "2024-09-24T20:52:21Z")

</div>

One thing to keep in mind is whatever server you’re running, its defaults may not include CORS headers, so you may need to modify your server configuration to enable CORS

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 24, 2024, 9:06pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/6 "2024-09-24T21:06:05Z")

</div>

We’re setting the right CORS headers, the exact same code running on GitHub Codespaces works. Even running our frontend on IDX and the backend on Codespaces works.

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 24, 2024, 10:13pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/7 "2024-09-24T22:13:07Z")

</div>

Oh shoot, in that case yes please file a bug!

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 25, 2024, 1:46pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/8 "2024-09-25T13:46:12Z")

</div>

Just weighing in further that I tested with a simple Node.js app and CORS headers seemed to work fine, so more details about your setup would be very helpful.

Here are my steps to validating that CORS did work:

1. Create a new Node.js Express workspace with the “hello world” option: [idx.google.com/new/express](http://idx.google.com/new/express)

2. Make the preview public using the new “Make Preview Public” button under the link icon in the web preview (as Node is serving on the preview port, `9000`). For now we also expose the raw “Update Public Ports” command (will go away soon)

3. Observe that while cURL in the terminal returns the ‘hello world’ HTML as expected:

4. Now enable CORS for the Express server by installing the `cors` package:

5. Now observe that `curl` returns the ‘hello world’ HTML as expected, and `await fetch` (from above) also returns the HTML, as expected.

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 25, 2024, 2:20pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/9 "2024-09-25T14:20:31Z")

</div>

First, I hope you don’t remove the update ports command and expect people to use the web preview to do it. I don’t use it and I suspect others won’t either.

Second, did you actually make a second workspace to do the fetch from? Doesn’t sound like it from your description.

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 25, 2024, 4:30pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/10 "2024-09-25T16:30:21Z")

</div>

Hey there!

Re #1: I should’ve clarified — there’s also a little lock icon (see [this other post](https://community.firebasestudio.dev/t/connecting-backend-to-frontend-from-different-ide/2022/5) for a screenshot) that’ll let you mark any other port with a running server as public too (not just the preview port).

Re #2: Great point, I just tried that (unauthenticated `fetch` from the web preview) and it DOES work. So I do think there’s something else going on in your workspace, that we need to troubleshoot 🙂

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 25, 2024, 5:18pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/11 "2024-09-25T17:18:41Z")

</div>

Maybe try it from the second project not in the web preview, run the app and try it from Chrome separately.

Again, this works everywhere else except IDX.

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 25, 2024, 5:37pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/12 "2024-09-25T17:37:48Z")

</div>

And just so you know what we’re using for cors settings, Go project:

```auto
r.Use(cors.New(cors.Options{
		AllowedOrigins: []string{"*"},
		AllowedMethods: []string{"HEAD", "GET", "POST", "PUT", "PATCH", "DELETE"},
		AllowedHeaders: []string{"*"},
		AllowCredentials: false,
		MaxAge: 3600,
	}).Handler)

```

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 25, 2024, 5:59pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/13 "2024-09-25T17:59:37Z")

</div>

Hrm, I tried that exact `cors` go package configuration and it still seemed to work for me.

A couple things that’d be helpful:

- Which port # are you exposing?
- Which container commit or permanent tag are you on?
  - To find this, open the IDX panel on the left (_Focus on Project IDX View_ in the command palette), click the _Support_ icon, and look at the menu on top. Hopefully it should be something like `924e7d` (container commit) and `cool-noyce-93` (permanent tag)

- Is there anything notable about your Google account (e.g. part of a Google Workspace organization, etc), or are you logging in with a plain ol’ Gmail/etc account?

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 25, 2024, 6:14pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/14 "2024-09-25T18:14:29Z")

</div>

- 8080

![image](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/0/0844a26ce719dbcb81cd16744c4911f1b4dc77d7.png)

- Using personal account for IDX, just regular gmail

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 25, 2024, 6:20pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/15 "2024-09-25T18:20:29Z")

</div>

Hm, yeah that all looks right, and I verified in my own workspace that switching from the preview port to 8080 still works.

Apologies that things aren’t working and thanks for trying this out… I think the next step is to [file a bug in our tracker](https://issuetracker.google.com/issues/new?component=1379083&template=1836320). also /cc @Chandra\_Sekhar\_Pydi in case you have ideas

---

<div class="post-metadata">

**Author:** ![treeder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/treeder/32/215_2.png) [@treeder](https://community.firebasestudio.dev/u/treeder)\
**Post date:** [September 26, 2024, 12:29pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/16 "2024-09-26T12:29:02Z")

</div>

So I created two new projects to try this from scratch and figured out this happens only on POST requests.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/5/5587db0fee5d677c359caead98d2ff4531b7e644.png)

Top one works, bottom one doesn’t.

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [September 26, 2024, 1:37pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/17 "2024-09-26T13:37:21Z")

</div>

Found the problem! Thanks so much for helping us identify it. In short, one of our proxies is removing CORS headers (e.g. `Access-Control-Allow-Origin`) in the HTTP response for the browser’s OPTIONS request (aka “preflight”, which are used for POST requests).

I haven’t found a good workaround yet, but we’ll follow up in [the bug you filed](https://issuetracker.google.com/issues/369331504) (thank you!). Hopefully this is something we can resolve shortly.

**EDIT** : I updated the bug title and added repro steps, will now follow up with our infra teams on this.

---

<div class="post-metadata">

**Author:** ![kirupa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/kirupa/32/4_2.png) [@kirupa](https://community.firebasestudio.dev/u/kirupa)\
**Post date:** [September 26, 2024, 7:06pm UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/18 "2024-09-26T19:06:17Z")

</div>

Thanks @treeder and @romannurik for helping get to the bottom of this.

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [October 6, 2024, 1:46am UTC](https://community.firebasestudio.dev/t/early-preview-of-public-ports/1911/19 "2024-10-06T01:46:32Z")

</div>

Hey folks, while we’re hard at work addressing the CORS issue above, I also wanted to call out that we also have a new easy way to make the port running your web previews public:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/0/09785cb65c12f325d626e39db674b466a1fa35ca.png)

1. Open the _Share Preview Link_ menu in the web preview toolbar

2. Select _Make Preview Public_

3. The icon will change to a yellow globe ![image](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/9/9b63a0c3199189b4567d9874c2b62832a0e37f92.png) indicating it’s public

4. Click to open up the menu again and _Remove Public Access_ when you want to turn it off.

Also a reminder that ports are only accessible when your workspace is active, so this isn’t really intended as a web hosting solution — but it’s a great way to quickly share your app with a teammate for feedback!