How to use SPA (React) and Ocelot together?

[gkumar1234]

SPA (React) and Ocelot not working together

Ocelot always respond with the SPA default page and does not call the downstream.

I saw one old issue and tried the same. Now i get 404 error always. Since it was posted long back thought to check if any solution now.
#606

Also wanted to have one website for both API and SPA instead of two.

Version:17.0.0
Platform: . NET5.0 Create React App template.

Appreciate inputs.

[Arcalise08]

You don't want to have your gateway serving static files. the gateway should be setup for the most part, then left alone.

You'll have your gateway link to a separate project which is what serves your react project. The routes would look similar to the following.

    {
      "DownstreamPathTemplate": "/{everything}",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 3000
        }
      ],
      "UpstreamPathTemplate": "/{everything}",
    },

and your backend project routes will look like this

    {
      "DownstreamPathTemplate": "/api/users/{everything}",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 3001
        }
      ],
      "UpstreamPathTemplate": "/api/users/{everything}",
    },

[raman-m]

@gkumar1234
We recommend to split your traffic into 2 gateways as @Arcalise08 said.

• Backend For Frontends instance
• APIs instance

If you try do everything using one Ocelot instance then you will be confused and define wrong routes, with possible conflicts.

Finally,

Use 2 Ocelot instances.
But pay attention, for BFF scenario Ocelot doesn't support all frontend features! For example, Ocelot doesn't forward HTML forms now.