docs-image/with-proxy.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 871.0717591785246 216.10003662109375" width="871.0717591785246" height="216.10003662109375">
  <!-- svg-source:excalidraw -->

  <defs>
    <style>
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
    </style>
  </defs>
  <rect x="0" y="0" width="871.0717591785246" height="216.10003662109375" fill="#ffffff"></rect><g stroke-linecap="round" transform="translate(10 18.10003662109375) rotate(0 76 94)"><path d="M0.8 -1.3 C54.49 0.33, 105.4 -0.67, 153.09 0.33 M-0.6 0.41 C60.19 -1.17, 120.42 -1.54, 152.34 0.15 M151.58 -0.08 C150.89 65.44, 149.33 133.92, 151.66 187.41 M151.91 -0.36 C151.93 43.55, 150.18 88.3, 152.86 187.92 M150.46 189.05 C113.39 187.43, 78.49 189.87, 1.16 189.07 M152.95 188.83 C114.27 188.46, 75.21 186.99, -0.38 187.53 M0.2 189.16 C-2.7 146.97, 0.33 105.68, 0.44 -0.48 M0.61 188.02 C-0.49 132.96, -1.06 75.74, 0.15 -0.71" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(15 99.60003662109375) rotate(0 71 12.5)"><text x="71" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Browser</text></g><g stroke-linecap="round"><g transform="translate(183.3040925600302 54.44406801241894) rotate(0 98.16795446784727 0.24404505953009448)"><path d="M0.53 0.18 C33.49 0.2, 164.2 0.99, 196.99 1.25 M-0.65 -0.76 C32.21 -0.59, 163.13 -0.67, 196 -0.53" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(183.3040925600302 54.44406801241894) rotate(0 98.16795446784727 0.24404505953009448)"><path d="M29.08 -10.06 C23.32 -7.11, 17.57 -6.75, 1.28 -1.02 M27.92 -10.91 C19.43 -6.5, 10.04 -3.64, 0.89 -0.02" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(183.3040925600302 54.44406801241894) rotate(0 98.16795446784727 0.24404505953009448)"><path d="M28.98 10.47 C23.04 8.59, 17.32 4.13, 1.28 -1.02 M27.82 9.61 C19.46 7.02, 10.1 2.89, 0.89 -0.02" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(183.3040925600302 54.44406801241894) rotate(0 98.16795446784727 0.24404505953009448)"><path d="M168.1 9.57 C175.41 7.49, 182.93 3.07, 196.75 -1.73 M166.95 8.72 C177.8 6.53, 187.66 2.46, 196.37 -0.74" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(183.3040925600302 54.44406801241894) rotate(0 98.16795446784727 0.24404505953009448)"><path d="M168.13 -10.95 C175.64 -8.21, 183.15 -7.81, 196.75 -1.73 M166.98 -11.8 C177.73 -6.99, 187.58 -4.07, 196.37 -0.74" stroke="#000000" stroke-width="1" fill="none"></path></g></g><g stroke-linecap="round"><g transform="translate(190.11650192069465 126.47584835792713) rotate(0 95.38613527168565 0.1221214237938284)"><path d="M0.18 -0.07 C31.98 0.09, 159.9 1.42, 191.95 1.48 M-1.18 -1.15 C30.42 -1.43, 159.09 -0.91, 191.35 -0.54" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(190.11650192069465 126.47584835792713) rotate(0 95.38613527168565 0.1221214237938284)"><path d="M28.34 -9 C17.61 -4.09, 4.36 -1.34, -1.02 0.75 M27.49 -9.75 C21.34 -7.2, 13.54 -4.86, -0.02 -0.11" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(190.11650192069465 126.47584835792713) rotate(0 95.38613527168565 0.1221214237938284)"><path d="M28.17 11.52 C17.41 8.28, 4.23 2.89, -1.02 0.75 M27.32 10.77 C21.34 8.09, 13.58 5.2, -0.02 -0.11" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(190.11650192069465 126.47584835792713) rotate(0 95.38613527168565 0.1221214237938284)"><path d="M162.97 10.61 C174.59 7.46, 183.78 2.24, 190.14 0.28 M162.11 9.86 C170.51 7.77, 177.13 4.99, 191.14 -0.58" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(190.11650192069465 126.47584835792713) rotate(0 95.38613527168565 0.1221214237938284)"><path d="M163.11 -9.91 C174.76 -4.91, 183.9 -1.99, 190.14 0.28 M162.26 -10.66 C170.49 -7.52, 177.08 -5.06, 191.14 -0.58" stroke="#000000" stroke-width="1" fill="none"></path></g></g><g stroke-linecap="round"><g transform="translate(180.51652633475715 194.11557032337805) rotate(0 99.71099791343374 -0.09771621389734264)"><path d="M-0.07 0.65 C33.34 0.72, 167.68 0.73, 200.99 0.6 M-1.57 -0.05 C31.66 -0.3, 166.19 -0.53, 200.14 -0.9" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.51652633475715 194.11557032337805) rotate(0 99.71099791343374 -0.09771621389734264)"><path d="M29.21 -9.27 C20.41 -7.78, 9.49 -3.77, 0.75 -0.25 M28.46 -9.45 C21.85 -7.85, 14.87 -5.16, -0.11 0.51" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.51652633475715 194.11557032337805) rotate(0 99.71099791343374 -0.09771621389734264)"><path d="M29.2 11.25 C20.38 5.68, 9.45 2.63, 0.75 -0.25 M28.46 11.07 C22.02 7.75, 15.04 5.51, -0.11 0.51" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.51652633475715 194.11557032337805) rotate(0 99.71099791343374 -0.09771621389734264)"><path d="M173.1 9.85 C183.66 4.26, 192.11 1.16, 200.97 -1.8 M172.35 9.68 C179.43 6.86, 185.96 4.59, 200.11 -1.04" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.51652633475715 194.11557032337805) rotate(0 99.71099791343374 -0.09771621389734264)"><path d="M172.98 -10.67 C183.61 -9.2, 192.11 -5.24, 200.97 -1.8 M172.23 -10.84 C179.16 -8.73, 185.73 -6.09, 200.11 -1.04" stroke="#000000" stroke-width="1" fill="none"></path></g></g><g transform="translate(183.59991455078125 150.70010375976562) rotate(0 96 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">WebSocket for HMR</text></g><g transform="translate(254.39996337890625 10) rotate(0 27.5 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">HTML</text></g><g transform="translate(231.10003662109375 83.39999389648438) rotate(0 46.5 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">JS / CSS</text></g><g stroke-linecap="round" transform="translate(402.47153945196214 23.874951680501226) rotate(0 72.5 88.5)"><path d="M-1.91 1.99 C46.35 -0.57, 91.29 1.66, 143.35 -1.34 M0.79 0.69 C39.32 -0.51, 76.77 -0.6, 144.95 0.49 M145.26 1.02 C143.42 38.68, 144.75 77.74, 143.47 175.45 M144.46 -0.64 C143.46 70.13, 143.25 141.54, 144.2 177.07 M143.14 178.97 C91.42 176.3, 35.13 178.31, -0.92 175.18 M145 176.62 C93.74 176.98, 41.76 176.34, 0.37 177.93 M-0.65 178.08 C1.15 126.02, 1.61 70.41, -0.81 -1.09 M-0.51 177.3 C-0.58 121.56, -0.97 68.28, -0.2 -0.23" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(407.47153945196214 99.87495168050123) rotate(0 67.5 12.5)"><text x="67.5" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Proxy</text></g><g stroke-linecap="round" transform="translate(716.0717591785246 23.7748235066731) rotate(0 72.5 88.5)"><path d="M1 -1.92 C37.62 -0.16, 77.93 -1, 143.64 -0.8 M0.55 0.58 C57.1 2.02, 115.74 1.17, 144.91 -0.15 M145.87 -0.62 C145.46 55.89, 143.62 111.2, 145.48 178.61 M145.9 0.41 C145.37 66.73, 145.02 133.62, 145.05 176.22 M145.24 178.72 C113.13 174.74, 81.01 174.31, 1.15 177.15 M145.32 177.11 C101.87 177.26, 57.35 177.52, -0.59 177.86 M-1.08 175.53 C2.1 109.54, 0.37 45.6, -0.68 1.64 M0.6 176.36 C-1.56 127.83, -1.47 80.38, 0.11 0.71" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(721.0717591785246 99.7748235066731) rotate(0 67.5 12.5)"><text x="67.5" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Vite</text></g><g stroke-linecap="round"><g transform="translate(563.3715638660246 81.30237155362693) rotate(0 71.90957054086027 -0.10782775004872747)"><path d="M-0.5 -1.07 C23.62 -1.31, 119.91 -1.2, 144.32 -0.99 M1.44 0.99 C25.39 0.81, 119.05 -0.13, 143.12 -0.05" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(563.3715638660246 81.30237155362693) rotate(0 71.90957054086027 -0.10782775004872747)"><path d="M25.91 -12.15 C18.34 -6.75, 12.77 -7.06, 0.19 0.89 M27.36 -10.43 C20.29 -7.65, 12.86 -5.72, -0.26 -0.74" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(563.3715638660246 81.30237155362693) rotate(0 71.90957054086027 -0.10782775004872747)"><path d="M25.92 8.38 C18.26 8.31, 12.7 2.54, 0.19 0.89 M27.37 10.09 C20.21 7.52, 12.77 4.09, -0.26 -0.74" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(563.3715638660246 81.30237155362693) rotate(0 71.90957054086027 -0.10782775004872747)"><path d="M113.2 9.53 C120.54 9.67, 129.97 3.86, 143.81 1.91 M114.65 11.25 C122.19 8.42, 129.45 4.96, 143.36 0.28" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(563.3715638660246 81.30237155362693) rotate(0 71.90957054086027 -0.10782775004872747)"><path d="M113.11 -10.99 C120.56 -5.39, 130.01 -5.74, 143.81 1.91 M114.57 -9.27 C122.22 -6.74, 129.51 -4.85, 143.36 0.28" stroke="#000000" stroke-width="1" fill="none"></path></g></g><g stroke-linecap="round"><g transform="translate(559.7715882800871 169.69490782397793) rotate(0 72.34629775695498 -0.16823763006482295)"><path d="M-0.62 0.38 C23.48 0.13, 121.04 -0.58, 145.32 -0.71 M1.25 -0.47 C25.18 -0.66, 120.78 0.19, 144.64 0.38" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(559.7715882800871 169.69490782397793) rotate(0 72.34629775695498 -0.16823763006482295)"><path d="M28.11 -9.24 C16.04 -6.1, 6.47 -4.46, -2.15 0.22 M28.2 -10.1 C20.75 -7.28, 14.54 -5.56, -0.05 0.44" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(559.7715882800871 169.69490782397793) rotate(0 72.34629775695498 -0.16823763006482295)"><path d="M28.27 11.28 C16 7.05, 6.38 1.32, -2.15 0.22 M28.36 10.42 C21.02 8.27, 14.77 5.02, -0.05 0.44" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(559.7715882800871 169.69490782397793) rotate(0 72.34629775695498 -0.16823763006482295)"><path d="M116.99 11.27 C125.03 7.34, 135.71 1.61, 143.11 0.22 M117.08 10.41 C123.43 8.32, 130.88 5.07, 145.21 0.44" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(559.7715882800871 169.69490782397793) rotate(0 72.34629775695498 -0.16823763006482295)"><path d="M117.16 -9.25 C125.27 -5.81, 135.89 -4.17, 143.11 0.22 M117.24 -10.11 C123.41 -7.23, 130.82 -5.51, 145.21 0.44" stroke="#000000" stroke-width="1" fill="none"></path></g></g><g transform="translate(582.7715882800871 38.57485707600904) rotate(0 51 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">(by HTTP)</text></g><g transform="translate(557.9715394519621 127.77496083577466) rotate(0 73.5 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">(by WebSocket)</text></g></svg>