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.
- Create a plain JavaScript starterWith 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.
- Change one visible detailRun “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.
- Preview the buildStop 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.
- Try the address you plan to useIf 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.
| What visitors need | What to publish or connect |
|---|---|
| See fixed opening hours | Publish the static build files. Test the page and assets at their final paths. |
| Book a repair time | Publish 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 request | Use 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.