Nono.MA

FEBRUARY 8, 2024

You can directly assign new properties.

(window as any).talk = () => { console.log(`Hello!`) }

You can extend the Window interface with typings and then assign the property values.

declare global {
  interface Window {
    talk: () => void
    concat: (words: string[]) => string
  }
}

window.talk = () => { console.log(`Hello!`) }
window.concat = (words: string[]) => {
  return words.join(`, `)
}

JULY 19, 2023

Even though Vite doesn't like chunks larger than 500 kBs after minification, you can increase the kB limit. Remember, this is just a warning, not an error.

An alternative solution is to chunk your JavaScript bundle into separate chunks, known as chunking. You can do this with the vite-plugin-chunk-split package.

APRIL 3, 2023

Here's how to deploy your Vite app to your local network so you can access it from other devices connected to the same WiFi. Say, your iPhone or iPad.

TL;DR

npx vite --host {local-ip-address}

If you're on macOS, you can simply run the following.

npx vite --host $(ipconfig getifaddr en0)

Overview

A fresh Vite project will likely have a dev key in your package.json's scripts property mapping that Yarn or NPM command to Vite, e.g., "dev": "vite" so you can type yarn dev or npm run dev and have Vite run your application in development mode.

yarn dev
#  VITE v4.2.1  ready in 165 ms
#
#  ➜  Local:   http://localhost:5173/
#  ➜  Network: use --host to expose
#  ➜  press h to show help

That's the same as running npx vite or ./node_modules/.bin/vite.

Figuring out your local IP address

Before we can deploy to our IP address, we need to know what it is.

You can use ipconfing on Windows and ifconfig on macOS.

Henry Black shared a trick to get your Mac's local IP address with ifconfig.

ipconfig getifaddr en0
# 192.168.1.34

Deploying to your local IP address

All you need to do is pass your IP address as Vite's --host argument.

npx vite --host $(ipconfig getifaddr en0)
#  VITE v4.2.1  ready in 166 ms
#
#  ➜  Local:   http://192.168.1.34:5173/
#  ➜  Network: http://192.168.1.34:5173/
#  ➜  press h to show help

Now I can access my Vite app from other devices in the same network, which comes in handy if you want to test your app on other computers, phones, or tablets.

Remember, npx vite is interchangeable with yarn dev, npm run dev, or ./node_modules/.bin/vite`.

For more information, read Vite's Server Options.

If you found this useful, let me know at @nonoesp!

Want to see older publications? Visit the archive.

Listen to Getting Simple .