# or


dotnet new duende-bff-localapi
```

Many frontend applications require a build process, which complicates the use of the static file middleware at development time. Visual Studio includes SPA templates that start up a SPA and proxy requests to it during development. Samples of Duende.BFF that take this approach using [React](/bff/samples#reactjs-frontend) and [Angular](/bff/samples#angular-frontend) are available.

Microsoftâs templates are easy-to-use at dev time from Visual Studio. They allow you to run the solution, and the template proxies requests to the front end for you. At deploy time, that proxy is removed and the static assets of the site are served by the static file middleware.

### Host The UI Separately

[Section titled âHost The UI Separatelyâ](#host-the-ui-separately)

You may want to host the UI outside the BFF. At development time, UI developers might prefer to run the frontend outside of Visual Studio (e.g., using the node cli). You might also want to have separate deployments of the frontend and the BFF, and you might want your static UI assets hosted on a CDN. Below is a schematic overview of what that would look like:

![Hosting BFF UI on CDN](/_astro/bff_ui_hosting_cdn.BhY4WhaY_5PT3z.svg)

The browser accesses the application via the BFF. The BFF proxies the calls to index.html to the CDN. The browser can then download all static assets from the CDN, but then use the BFF (and itâs APIâs and user management APIâs) secured by the authentication cookie as normal.

Effectively, this turns your front-end and BFF Host into two separately deployable units. Youâll need to ensure that the two components are hosted on subdomains of the same domain so that [third party cookie blocking](/bff/architecture/third-party-cookies/) doesnât prevent the frontend from including cookies in its requests to the BFF host.

In order for this architecture to work, the following things are needed:

* To make sure that client side routing works, there should be a catch-all route configured that proxies calls to the index.html. Once the index.html is served, the front-end will take over the application specific routing.

* The APIâs hosted by the BFF and the applications APIâs should be excluded from this catch-all routing. However, they should not be visited by the browser directly.

* The CDN needs to be configured to allow CORS requests from the applicationâs origin.

* In order to include the auth cookie in those requests, the frontend code will have to [declare that it should send credentials](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#sending_a_request_with_credentials_included) using the *credentials: âincludeâ* option.

A sample of this approach is [available](/bff/samples#separate-host-for-ui).

### Serve The Index Page From The BFF Host

[Section titled âServe The Index Page From The BFF Hostâ](#serve-the-index-page-from-the-bff-host)

Lastly, you could serve the index page of the SPA from the BFF, but have all the other static assets hosted on another host (presumably a CDN). This technique makes the UI and BFF have exactly the same origin, so the authentication cookie will be sent from the frontend to the BFF automatically, and third party cookie blocking and the SameSite cookie attribute wonât present any problems. The following diagram shows how that would work:

![BFF Proxies the Index html from CDN](/_astro/bff_ui_hosting_proxy_index.C6Kqvm-L_Z1xNdvN.svg)

Setting this up for local development takes a bit of effort, however. As you make changes to the frontend, the UIâs build process might generate a change to the index page. If it does, youâll need to arrange for the index page being served by the BFF host to reflect that change.

Additionally, the front end will need to be configurable so that it is able to load its assets from other hosts. The mechanism for doing so will vary depending on the technology used to build the frontend. For instance, Angular includes a number of [deployment options](https://angular.io/guide/deployment) that allow you to control where it expects to find assets.

The added complexity of this technique is justified when there is a requirement to host the front end on a different site (typically a CDN) from the BFF.

Note

BFF V4 has built-in support for proxying the index.html from a CDN.
-----