Skip to content

Vite

Vite helps you work on a web page locally and packages its browser files for publishing. It can build a plain HTML project or work with tools such as React or Vue.

Visit Vite

What does Vite do between editing a page and publishing it?

Vite starts a local development server so you can see changes as you work. A production build prepares files such as HTML, JavaScript and CSS. For a normal static setup, those are what you give the host.

A framework or UI library can supply the page’s components or routing. Vite handles development and packaging. If your booking page needs to accept a reservation, connect a server or managed backend that checks the request and stores the shared record.

Can you tell whether the built page works before hosting it?

Use a blank practice project or work through the example on paper. Before running it, confirm that it loads no live records, sends no requests to a real service, and uses no real credentials. A plain page with sample opening hours needs none of those connections.

The local preview checks the build. Use your chosen host to serve it after launch.

  1. Create a plain JavaScript starter
    With a supported Node.js version, open a terminal in a new empty practice folder. Run “npm create vite@latest repair-hours -- --template vanilla” to make a new folder. If asked to start right away, decline so you can check the setup first. Enter the folder with “cd repair-hours” and run “npm install” to install the project’s packages.
  2. Change one visible detail
    Run “npm run dev” and open the local address it prints. In src/main.js, change the sample heading to “Repair shop closes at 4 p.m.” and confirm it appears. Change 4 p.m. to 5 p.m. and save. Check the new time in the development view.
  3. Preview the build
    Stop the development server with Control+C. In the same folder, run “npm run build” to prepare the files in dist. Then run “npm run preview” and open the address that command prints. Check that the built page shows 5 p.m. and keeps its styling.
  4. Try the address you plan to use
    If the real page will live under a path such as /repairs/, check the build’s base path. If your app uses client-side routes, open a nested address directly in a test setup and confirm the host’s routing rule loads it.

Which Node.js version should you use with Vite?

Check your project’s Vite version and template. The Vite 8.3 package accepts some Node 20 releases, but Node 20 has reached upstream end of life. Use a maintained version that meets the requirements of Vite, the template and your host.

For an existing project, keep its dependency lock while you decide what to upgrade. Vite 8 uses Rolldown and Oxc-based tooling. If you are following an older tutorial about Rollup or esbuild configuration, check the migration guide before copying those options.

Which parts do you have to deploy?

Start with what needs to happen when someone visits. For a plain static page, deploy the built files. For a page that needs a server to check or save something, plan where that server code runs as well.

Anything you expose through Vite’s default VITE_ variables in browser code can end up in the files visitors download. Put private API keys on the server.

Match deployment to the work
What visitors needWhat to publish or connect
See fixed opening hoursPublish the static build files. Test the page and assets at their final paths.
Book a repair timePublish the browser files and connect a service that checks and saves the appointment. Keep private service credentials on that server.
Receive a page assembled on requestUse the framework or server integration that supplies server rendering. Deploy its runtime as required by that setup.

What do you need to rebuild the page on a different host?

Keep the editable source, dependency lock and build settings. Record the host’s route rules and any services the page calls. The built files can be deployed again, while the editable project lets you change them later.

Vite is MIT-licensed. Your host and backend can have their own bills. Moving the browser files does not move saved records, customer accounts or the server credentials used by your app.