How to deploy and host a React site for free

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.

React does not have one universal output name. Remove stale dist/build output before the check: Vite-based React projects normally write dist, while React Scripts projects normally write build. The build log identifies the folder, and that folder must contain index.html.

• A React project that already runs locally.
• One package manager and its matching lockfile.
• A production build script in package.json.
• No secrets embedded in source or browser-delivered environment values.

Build and check React 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 React 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 React project with npmCopy Check the React project with npm code

npm ci
npm run build

pnpm

Check the React 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 React project with pnpmCopy Check the React project with pnpm code

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

Yarn

Check the React 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 React project with YarnCopy Check the React 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

if [ -f dist/index.html ]; then OUTPUT=dist; elif [ -f build/index.html ]; then OUTPUT=build; else echo "No dist/index.html or build/index.html found." >&2; exit 1; fi
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 = if (Test-Path .\dist\index.html) { "dist" } elseif (Test-Path .\build\index.html) { "build" } else { throw "No dist/index.html or build/index.html found." }
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

if [ -f dist/index.html ]; then OUTPUT=dist; elif [ -f build/index.html ]; then OUTPUT=build; else echo "No dist/index.html or build/index.html found." >&2; exit 1; fi
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.

Upload the built files, not package.json, src, or node_modules. Sitedropper will show this as a Static site because the uploaded artifact is already built.

site.zip
├── index.html
├── assets/ (or static/)
├── favicon.ico (when used)
└── other browser assets

Upload the React 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 React result.

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

• Open the home page and confirm JavaScript and CSS load without 404 responses.
• Open a client-side route directly and refresh it to verify the SPA fallback.
• Check image/font URLs and confirm the project was not built with an incompatible subdirectory base.
• Use the generated Sitedropper URL while the project remains Draft.

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 React deployment.

The page is blank

Open the browser console and network panel. Rebuild with a root-compatible asset base and confirm index.html references files that exist in the ZIP.

Sitedropper cannot find index.html

Open site.zip. index.html must be at the first level, not inside dist, build, or the project folder.

A route works after navigation but not after refresh

Confirm the route is client-side and redeploy the built output. Sitedropper’s static runtime provides an SPA fallback, but a missing asset still returns 404.

The project is reported as Static site

That is expected for a React production build uploaded without source. It avoids installing dependencies again.

Know the Free-plan boundaries.

• Browser-side React cannot safely contain private server credentials.
• APIs used by the site must already be reachable over HTTPS and allow the deployed origin.
• Local browser storage is not a managed database or shared server storage.

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

React deployment FAQ.