Accessing Vite dev / preview server from another device in the same network #15251

sowizz · 2023-12-06T00:27:34Z

sowizz
Dec 6, 2023

Hello everyone,

I'm trying to access dev server from another device that is in the same network (I've also tried to build & preview with --host flag).

Let's say I run the following command: yarn preview --host --port 3005. Accessing the app by opening http://localhost:3005 works fine; accessing it through http://192.168.31.28:3005/ from any device (including the one on which the server is running) is always giving me trouble.

Looks like index.html file is read correctly, but anything it is trying to load - styles, js code, favicon - it can't due to net::ERR_SSL_PROTOCOL_ERROR. Here is a screenshot from Dev Tools:

I'm pretty sure that I'm missing something simple, but cannot figure it out. Any clues?

I'm attaching my `build/index.html` file:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <link rel="icon" href="/favicon.svg" type="image/svg+xml">
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#349AF0" />
      <meta name="description" content="desc" />
      <meta
        http-equiv="Content-Security-Policy"
        content="upgrade-insecure-requests"
      />
      <style>
        html,
        body {
          background-color: #349AF0;
        }
      </style>
      <title>App Title</title>
      <script>
        if ('true' === 'true' && 'serviceWorker' in navigator) {
          window.addEventListener('load', function () {
            navigator.serviceWorker.register('/service-worker.js')
          })
        }
      </script>
      <script type="module" crossorigin src="/assets/index-d4b1c7c9.js"></script>
      <link rel="stylesheet" href="/assets/index-80897862.css">
    <link rel="manifest" href="/manifest.webmanifest"></head>
  
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      
      <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
  
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
  
        To begin the development, run `yarn start`.
        To create a production bundle, use `yarn build`.
      -->
    </body>
  </html>

and vite.config.js:

    import { defineConfig, loadEnv } from 'vite'
    import react from '@vitejs/plugin-react-swc'
    import svgr from 'vite-plugin-svgr'
    import path from 'path'
    import { VitePWA } from 'vite-plugin-pwa'
    import browserslistToEsbuild from 'browserslist-to-esbuild'
    
    const parseEnvironmentVariable = (env, variableName, defaultValue) => {
      const value = env[variableName]
      if (value === undefined) {
        return defaultValue
      } else {
        return value === 'true'
      }
    }
    
    export default defineConfig(() => {
      const env = loadEnv('', process.cwd(), 'VITE_')
      const url = `http://127.0.0.1:${env.VITE_SERVER_PORT}`
      const shouldOpenDeveloperServer = parseEnvironmentVariable(
        env,
        'VITE_OPEN_DEVELOPMENT_SERVER',
        true
      )
    
      return {
        build: {
          outDir: 'build',
          target: browserslistToEsbuild(),
        },
        plugins: [
          react(),
          svgr({ svgr: { icon: true } }),
          VitePWA({
            registerType: 'autoUpdate',
            injectRegister: null,
            workbox: {
              globDirectory: 'build/',
              globPatterns: ['**/*.{json,ico,html,png,jsx,js,css,svg,otf,mjs}'],
              swDest: 'build/service-worker.js',
              sourcemap: false,
              maximumFileSizeToCacheInBytes: 5242880, // 5 MB
              skipWaiting: true,
              clientsClaim: true,
            },
          }),
        ],
        /**
         * Configure aliases for absolute imports.
         * ! Note: These aliases are also configured in jest.config.js
         */
        resolve: {
          alias: {
            src: path.resolve(__dirname, './src'),
            shared: path.resolve(__dirname, './src/shared'),
            common: path.resolve(__dirname, './src/common'),
            hooks: path.resolve(__dirname, './src/hooks'),
            constants: path.resolve(__dirname, './src/constants'),
            store: path.resolve(__dirname, './src/store'),
            assets: path.resolve(__dirname, './src/assets'),
            utils: path.resolve(__dirname, './src/utils'),
            styles: path.resolve(__dirname, './src/styles'),
            packages: path.resolve(__dirname, './src/packages'),
            pages: path.resolve(__dirname, './src/pages'),
            '~': path.resolve(__dirname, './node_modules'),
            i18n: path.resolve(__dirname, './src/i18n'),
            // https://formatjs.io/docs/guides/advanced-usage/#pre-compiling-messages
            '@formatjs/icu-messageformat-parser':
              '@formatjs/icu-messageformat-parser/no-parser',
          },
        },
        preview: {
          port: 3000,
          strictPort: true,
          open: shouldOpenDeveloperServer,
        },
        server: {
          port: 3000,
          open: shouldOpenDeveloperServer,
          strictPort: true,
          proxy: {
            '/api': {
              target: url,
              changeOrigin: true,
            },
            '/socket.io': {
              target: url,
              changeOrigin: true,
              ws: true,
            },
          },
        },
      }
    })

bantu4me · 2024-03-14T14:43:42Z

bantu4me
Mar 14, 2024

i get the same problem, did you fix it?

2 replies

sowizz Mar 14, 2024
Author

Yes, I got this bit:

<meta
  http-equiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
/>

in my index.html file. It forces https to be used for all insecure (http) requests. I deleted it from index.html and used vite-plugin-html-config to add it when creating a production build.

AvantGov Aug 6, 2024

I am running into this same issue but never had this meta tag included in my HTML file? Despite being able to connect to the machine running my application just fine using the local IP address from a mobile device, when I enter the port I am running my application on is am getting a NSURLErrorCannotConnectToHost which seems odd given that I just ran a connection test successfully to the host device, but this port is not responding? I have tried configuring vite to use a few different ports now to no avail.

AvantGov · 2024-08-06T20:05:46Z

AvantGov
Aug 6, 2024

if anyone else runs into this issue and ends up here before finding the correct chain of words to google, here's how I fixed this

5 replies

LinusBehrbohm Nov 3, 2025

This did not fix my issue.

I can reach a simple python server python -m http.server 8080 from the external device, but not a vite server vite --host 0.0.0.0 --port 8080.

AvantGov Nov 4, 2025

i can't speak to what vite is doing specifically here, or what you are doing specifically without seeing what you have set up -- but i would start by double checking your server configurations to make sure that you are connecting to the correct port + have a known IP address set for the local host as that is where I have found solutions to issues like this in the past.

Uh oh!

Accessing Vite dev / preview server from another device in the same network #15251

Uh oh!

Uh oh!

Replies: 2 comments · 7 replies

Uh oh!

Uh oh!

sowizz Mar 14, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 2 comments 7 replies

sowizz Mar 14, 2024
Author