How to expose Vite local instance to the network, Eg. Mobile Device

What is Vite?

Vite (the French word for “fast”) is a new build tool for frontend web development.

Vite promotes a faster development experience by setting up a development environment for frameworks like Vue, TezJS, and React and even for Vanilla JavaScript apps with a dev server.

Learn more about Vite here …

Vite local instance exposition

When you configured your web application development using Vite, your package.json file scripts look like this :

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}

Now when you run the command :

npm run dev

Here’s what the output might look like :

The local instance is now running on http://localhost:5173/,

Note that it shows also the Network: Use — host

What’s that? Vite gives way to expose the local instance to the local network in cases where you would like to test or view your web application on another device, let’s say, on your mobile device.

There are 3 ways to do it:

1. By adding --host option to the scripts section in package.json as shown below :

{
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview"
    }
}

1. By adding the following configuration in the vite.config.js file like so:

server: {
    host: true
}

1. Lastly, you can use the --host option with the npm run dev command like so.

npm run dev --host

Now the output should look like this :

Now the Vite local instance is available on the network address provided.

Hope you found this article helpful, 👏👏👏.

Thanks for reading!