Connecting backend to frontend from different Ide

General
1

Hello.
I am a beginner in coding and I would like to know how I can connect my backend to frontend.
I coded my backend (Laravel) in vscode and my frontend (flutter) in vscode.
I was wondering if I it’s possible to connect the two?

2

Are you asking how to expose it as an API in vs code?? Or how to import the projects into idx??

3

Yeah . To expose it as an api

4

Well typically you would serve the backend over http in localhost and make http request to the backend localhost from the frontend

5

Hey folks, while the simplest solution is to work on your FE and BE in one workspace, we did just launch the ability to make some of your ports publicly accessible, which is another way to do this.

  1. Open the “Project IDX” panel in the left (you can use the “Focus on Project IDX View” command from the command palette)
  2. Expand the “Backend Ports” section at the bottom
  3. Find your backend’s port # (e.g. 8080)
  4. Click the little lock icon:
    image
  5. Take note of the disclaimer (that anyone with the URL will have access to your server on that port) and press “Switch to Public”. Once it’s public, it should look like this:
    image
    image570×536 38.1 KB
  6. You can then click the copy icon in the same row as the port # to grab the publicly accessible URL for your running server, and use that in your FE.
4 Likes
6

How can one now use it in the frontend?

7

Just like you would any other URL, e.g. if the URL you copy is 8080-idx-abc.cluster-def.cloudworkstations.dev you could use it e.g. as part of a fetch call:

let backendUrl = "https://8080-idx-abc.cluster-def.cloudworkstations.dev";
let foo = await fetch(backendUrl).then(r => r.json());
console.log(foo);

You’ll also need to make sure whatever server you’re using on the backend is CORS-aware.

1 Like
8

Hey folks, we’ve added docs here:

1 Like