Setting up Vite Proxy

Vite Proxy

When you run from npm run dev you are effectively launching a mini webserver on your local workstation. This will serve your files live through vite and allow for Hot Module Reloading. Which means at the component level your code can be refreshed, and note entire pages. It makes for a very streamlined local dev environment.

But there are some learning pitfalls and things to be aware of I would like to cover here that commonly come up.

1. Environments

Set here: Environments
You can see there is a "local" option.

When you target "/cwms-data" this will allow the below proxy to override, intercept the headers, and serve content through the proxy. This is especially useful when the production resources you might target limit the scope of what services can target them through headers.

For example https://cwms-data.usace.army.mil/cwms-data will only allow:

frame-ancestors 'self' *.usace.army.mil *.sec.usace.army.mil *.ops.usace.army.mil *.cwbi.mil

Here is an example configuration for the vite.config.js that shows all configuration settings, including the proxy:
Docs: https://vitejs.dev/config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/office/swt",
  server: {
    cors: false, // disables cors headers
    proxy: {
      "^/cwms-data/.*": {
        target: "https://cwms-data.usace.army.mil/cwms-data",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/cwms-data/, ""),
        configure: (proxy, _options) => {
          proxy.on("error", (err, _req, _res) => {
            console.log("proxy error", err);
          });
          proxy.on("proxyReq", (proxyReq, req, _res) => {
            console.log("Sending Request to the Target:", req.method, req.url);
          });
          proxy.on("proxyRes", (proxyRes, req, _res) => {
            console.log(
              "Received Response from the Target:",
              proxyRes.statusCode,
              req.url
            );
          });
        },
      },
      // If a user requests from the data path - redirect to the public site for realtime data testing
      // (Prevents having to move all the actual data files in here for testing)
      "^/Daily_Morning_Reservoir_Report.pdf": {
        target: "https://www.swt-wc.usace.army.mil",
        changeOrigin: true,
        secure: false,
      },
      // Serve calls to our data directory so local dev does not require them in the public dir
      "^/data/.*": {
        target: "https://www.swt-wc.usace.army.mil",
        changeOrigin: true,
        secure: false,
        // rewrite: (path) => path.replace(/^\/reports/, '/'),
        configure: (proxy, _options) => {
          proxy.on("error", (err, _req, _res) => {
            console.log("proxy error", err);
          });
          proxy.on("proxyReq", (proxyReq, req, _res) => {
            console.log("Sending Request to the Target:", req.method, req.url);
          });
          proxy.on("proxyRes", (proxyRes, req, _res) => {
            console.log(
              "Received Response from the Target:",
              proxyRes.statusCode,
              req.url
            );
          });
        },
      },
      // Serve chart data from our production site to avoid having it in the public dir
      "^/charts/.*": {
        target: "https://www.swt-wc.usace.army.mil",
        changeOrigin: true,
        secure: false,
        // rewrite: (path) => path.replace(/^\/reports/, '/'),
        configure: (proxy, _options) => {
          proxy.on("error", (err, _req, _res) => {
            console.log("proxy error", err);
          });
          proxy.on("proxyReq", (proxyReq, req, _res) => {
            console.log("Sending Request to the Target:", req.method, req.url);
          });
          proxy.on("proxyRes", (proxyRes, req, _res) => {
            console.log(
              "Received Response from the Target:",
              proxyRes.statusCode,
              req.url
            );
          });
        },
      },
    },
  },
});