How to deploy a Vite site for free from a ZIP

What the Free plan includes.

Sitedropper Free is a $0 plan for a small real deployment workflow. The dashboard is the source of truth for the current ZIP limit shown beside Choose ZIP.

• Up to 3 projects
• 30 deployments per month
• Draft, Password protected, and Public sharing
• Sitedropper URL

Before you build.

The production command should create dist/index.html and usually dist/assets. Preview the production build locally instead of treating the Vite development server as deployment output.

• A Vite project that runs locally.
• A package.json build script that calls vite build.
• The lockfile for npm, pnpm, or Yarn.
• A Vite base setting compatible with the site root.

Build and check Vite locally.

Run these commands from the project root. Finish the local check before creating the archive so the deployment is not the first place a dependency, compile, or startup error appears.

npmpnpmYarn

npm

Check the Vite project with npm

Use npm when package-lock.json is the project lockfile. If the project has no lockfile yet, run npm install once instead of npm ci and keep the generated lockfile.

Check the Vite project with npmCopy Check the Vite project with npm code

npm ci
npm run build

pnpm

Check the Vite project with pnpm

Use pnpm when pnpm-lock.yaml or the packageManager field selects pnpm. Keep the lockfile and any workspace manifest with the source archive.

Check the Vite project with pnpmCopy Check the Vite project with pnpm code

corepack enable
pnpm install --frozen-lockfile
pnpm run build

Yarn

Check the Vite project with Yarn

Use the Yarn release declared by the project. The command below matches Yarn Classic; use yarn install --immutable when the checked-in release requires it.

Check the Vite project with YarnCopy Check the Vite project with Yarn code

corepack enable
yarn install --frozen-lockfile
yarn run build

Use one dependency workflow: keep the lockfile that matches the selected package manager and do not mix install commands.

Create the ZIP on your operating system.

Package the contents of the final output directory. The Windows and macOS recipes include graphical menu guidance, while the commands remain the precise archive contract.

No command line required

Directly create the ZIP in your file system.

Open the final output folder and select its contents so index.html stays at the archive root. In Windows File Explorer, right-click the reviewed selection and choose Compress to → ZIP File. On macOS, Control-click the reviewed selection and choose Compress Items.

Open the resulting archive before upload. If an outer folder wraps the expected files, recreate the ZIP by selecting the folder’s contents instead.

Or create and inspect the ZIP from the command line.

macOSWindowsLinux

macOS

Create site.zip in Terminal

Run the archive command from inside the output directory. Finder users can open that directory, select its contents, Control-click, and choose Compress Items.

1. Run from the project folder.
2. Confirm index.html is at the ZIP root.
3. If Finder created Archive.zip, rename it to site.zip; do not compress the outer project folder.

Create site.zip in TerminalCopy Create site.zip in Terminal code

OUTPUT=dist
if [ -e site.zip ]; then echo "site.zip already exists. Move or rename it before continuing." >&2; exit 1; fi
(cd "$OUTPUT" && zip -qr ../site.zip . -x ".DS_Store" "*/.DS_Store")
unzip -l site.zip | head -40

Windows

Create site.zip in PowerShell

Compress the contents of the built output so index.html is at the ZIP root. File Explorer users can open the output folder, select its contents, right-click, and choose Compress to → ZIP File.

1. Run from the project folder.
2. Confirm the listing starts with index.html and asset files, not an outer dist/build folder.
3. If File Explorer created an archive in the output folder, rename it to site.zip and move it beside that folder.

Create site.zip in PowerShellCopy Create site.zip in PowerShell code

$OutputDirectory = "dist"
if (Test-Path .\site.zip) { throw "site.zip already exists. Move or rename it before continuing." }
Add-Type -AssemblyName System.IO.Compression.FileSystem
$Archive = Join-Path (Resolve-Path .) "site.zip"
[System.IO.Compression.ZipFile]::CreateFromDirectory((Resolve-Path ".\$OutputDirectory"), $Archive)
tar.exe -tf .\site.zip

Linux

Create site.zip in a Linux terminal

Run zip from inside the output directory. Install your distribution’s zip package first if the command is unavailable.

1. Run from the project folder.
2. Confirm index.html is at the ZIP root.
3. Keep site.zip outside the output directory while it is created.

Create site.zip in a Linux terminalCopy Create site.zip in a Linux terminal code

OUTPUT=dist
if [ -e site.zip ]; then echo "site.zip already exists. Move or rename it before continuing." >&2; exit 1; fi
(cd "$OUTPUT" && zip -qr ../site.zip . -x ".DS_Store" "*/.DS_Store")
unzip -l site.zip | head -40

Inspect before upload: compare the ZIP listing with the archive tree below and remove dependencies, caches, local data, and secrets.

Check the archive root.

The ZIP root is the inside of dist. Source, node_modules, and local .env files are unnecessary and must stay out.

site.zip
├── index.html
├── assets/
│   ├── index-[hash].js
│   └── index-[hash].css
└── public files copied by Vite

Upload the Vite ZIP to Sitedropper.

Create a Draft project, upload site.zip, follow the deployment, and open the generated URL only after the progress reaches Ready.

The dashboard screenshots use fictional project and account data. Yellow outlines identify the documented controls.

1. 01

   Create a project

   Open Projects, choose New project, enter a name, and select the highlighted Create project action. New projects begin as Draft.

   

2. 02

   Upload the ZIP

   Open the project’s Upload and deploy card, then select the highlighted Choose ZIP control or drop the archive into the same area.

   

3. 03

   Open the deployed site

   Wait for Analyze, Build, and Deploy to finish. Then use the highlighted Open Sitedropper site action to review the generated URL.

   

Dashboard screenshot

Dashboard action

Close ×

Check the Vite result.

Use the deployed URL like a visitor rather than relying only on the successful status.

• Open the generated URL and inspect the network panel for missing hashed assets.
• Refresh one client route if the project uses a client router.
• Check that Vite’s base is / or another value intentionally compatible with the generated URL.
• Confirm Project details reports a static deployment; that is expected for prebuilt dist output.

Update Sitedropper Project settings.

Project settings are separate from framework configuration. Update the project name or description, keep Draft while reviewing, then choose Password protected or Public only when that matches the intended audience. Free does not include Private sharing by email, URL customization, or custom domains.

The dashboard screenshots use fictional project and account data. In the first settings image, the existing yellow outline marks Open site; the Project settings card is visible below and is identified by the instructions.

1. 01

   Review Project settings

   The Project settings card is below the project header. Update the name or description, review the generated URL, and keep the first deployment Draft while you test it.

   

2. 02

   Choose who can open the site

   Open Visibility. Free includes Draft, Password protected, and Public. Select Public only when anonymous access is intentional, then close the menu and choose Save changes.

   

Dashboard screenshot

Dashboard action

Close ×

Finish the change: close the visibility menu, select Save changes, and wait for the “Changes saved” confirmation before leaving the page.

Troubleshoot this Vite deployment.

Assets request the wrong path

Review base in vite.config and rebuild. A base intended for a repository subpath often breaks at the generated site root.

index.html is under dist in the ZIP

Recreate site.zip from inside dist so index.html is at the first level.

The production page differs from npm run dev

Run the project’s preview command against dist locally and fix production-only environment or asset assumptions before zipping.

A Vite plugin needs a server

This guide deploys final browser output. A plugin that requires a separate server process needs a supported server project or existing Dockerfile.

Know the Free-plan boundaries.

• This page verifies Vite output; it does not separately certify every UI framework or Vite plugin.
• Browser-delivered environment values are public and must not contain secrets.
• Server APIs and databases are separate from this static site.

The generated Sitedropper URL remains available on Free. Check the dashboard for current usage and upload limits before starting another deployment.

Vite deployment FAQ.