> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/react/proxy-to-an-api-server-in-development-with-cra.md).

# Proxy To An API Server In Development With CRA

[create-react-app](https://github.com/facebookincubator/create-react-app) is a great way to bootstrap a React project, especially if you are building a single-page app. When building an SPA, you more likely than not will have a backend API that you interact with.

You can set up your React app to interact with that backend API server in development using the `proxy` configuration in `package.json`.

```json
// package.json
  ...
  "proxy": "http://localhost:4000",
}
```

This will allow you to keep your API calls nice and clean.

```javascript
fetch("/api/session", ...
```

No need to manage some sort of *host URL* environment variable.

Additionally, this will remove an CORS issues because the `webpackDevServer` will be proxying any paths that it doesn't recognize to the host and port that you've specified.

See [the `create-react-app` docs](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) for more details.