> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subtrace.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# macOS support

> Use Subtrace in your macOS development environment

Subtrace has experimental support for developers on macOS.

<Steps>
  <Step title="Start backend">
    Start your backend server on port 8000:

    <CodeGroup>
      ```bash Node.js theme={null}
      npm run dev
      ```

      ```bash Python theme={null}
      python main.py
      ```

      ```bash Go theme={null}
      go run .
      ```

      ```bash Ruby theme={null}
      rails server -p 8000
      ```
    </CodeGroup>
  </Step>

  <Step title="Start Subtrace">
    In a second terminal window, install Subtrace and start the proxy:

    ```bash theme={null}
    curl -fsSL https://subtrace.dev/install.sh | sh

    # starts listening on 9000 and proxies requests to 8000
    subtrace proxy 9000:8000
    ```

    <Expandable title="example output">
      <img className="rounded-xl" src="https://mintcdn.com/subtrace/qpTd5I2XwvFUV3U2/images/macos-link.png?fit=max&auto=format&n=qpTd5I2XwvFUV3U2&q=85&s=2b5022267ea8fc39de5113644741dfe8" width="884" height="466" data-path="images/macos-link.png" />
    </Expandable>
  </Step>

  <Step title="Update frontend">
    Configure your frontend to send all backend requests to localhost:9000 instead:

    <CodeGroup>
      ```javascript React theme={null}
      const API_URL = 'http://localhost:8000' // [!code --]
      const API_URL = 'http://localhost:9000' // [!code ++]

      fetch(`${API_URL}/api/users`)
        .then(res => res.json())
        .then(data => setUsers(data))
      ```

      ```javascript Next.js theme={null}
      const API_URL = 'http://localhost:8000' // [!code --]
      const API_URL = 'http://localhost:9000' // [!code ++]

      export async function getServerSideProps() {
        const res = await fetch(`${API_URL}/api/data`)
        const data = await res.json()
        return { props: { data } }
      }
      ```

      ```javascript Vue theme={null}
      const API_URL = 'http://localhost:8000' // [!code --]
      const API_URL = 'http://localhost:9000' // [!code ++]

      axios.get(`${API_URL}/api/items`)
        .then(response => {
          this.items = response.data
        })
      ```

      ```javascript Angular theme={null}
      private apiUrl = 'http://localhost:8000'; // [!code --]
      private apiUrl = 'http://localhost:9000'; // [!code ++]

      getProducts(): Observable<Product[]> {
        return this.http.get<Product[]>(`${this.apiUrl}/api/products`);
      }
      ```

      ```javascript Vite theme={null}
      // vite.config.js
      export default {
        server: {
          proxy: {
            '/api': 'http://localhost:8000' // [!code --]
            '/api': 'http://localhost:9000' // [!code ++]
          }
        }
      }
      ```

      ```javascript Webpack theme={null}
      // webpack.config.js
      module.exports = {
        devServer: {
          proxy: {
            '/api': 'http://localhost:8000' // [!code --]
            '/api': 'http://localhost:9000' // [!code ++]
          }
        }
      }
      ```
    </CodeGroup>
  </Step>

  <Step title="See requests">
    Open the `subt.link` URL in your browser to watch every request happening
    in realtime:

    <img className="rounded-xl" src="https://mintcdn.com/subtrace/qpTd5I2XwvFUV3U2/images/quickstart-screenshot.png?fit=max&auto=format&n=qpTd5I2XwvFUV3U2&q=85&s=872ff44cbd35bdeb2d0650809e982ea5" width="2254" height="1640" data-path="images/quickstart-screenshot.png" />
  </Step>
</Steps>