Early preview of public ports!

[kirupa]

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

Very early preview of public ports in Project IDX! 🔥

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.

(cc @treeder )

Cheers,
Kirupa

[essayoub]

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

[treeder]

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.

[kirupa]

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

[romannurik]

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

[treeder]

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.

[romannurik]

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

[romannurik]

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

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:

   $ curl https://9000-therestoftheurl
   

   Opening up the DevTools in a browser tab and trying to fetch:

   await fetch("https://9000-therestoftheurl").then(r => r.text())
   

   throws a CORS exception, as expected.

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

   $ npm install cors
   

   and add it to the Express server:

   ...
   const cors = require('cors');
   app.use(cors());
   ...
   

   Upon saving, the server should restart automatically (the template uses nodemon).

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

[treeder]

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.

[romannurik]

Hey there!

Re #1: I should’ve clarified — there’s also a little lock icon (see this other post 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

[treeder]

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.

[treeder]

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

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

[romannurik]

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?

[treeder]

• 8080

• Using personal account for IDX, just regular gmail

[romannurik]

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. also /cc @Chandra_Sekhar_Pydi in case you have ideas

[treeder]

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

Top one works, bottom one doesn’t.

[romannurik]

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 (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.

[kirupa]

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

[romannurik]

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:

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 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!