Framework

React (Vite)

React apps built with Vite, served as static files by Nginx.

Container port80

Requirements

package.json with a "build" script

"build": "vite build". DropDeploy runs this and copies dist/ into Nginx.

Output goes to dist/

Do not change the Vite output directory in vite.config.

Demo app

A minimal app that is ready to push and deploy. Copy the files below into a new repository, commit, and deploy — it should go live without any changes.

Quickstart

npm create vite@latest my-react-app -- --template react

src/App.jsx

export default function App() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      minHeight: '100vh', fontFamily: 'system-ui',
      background: '#0f172a', color: '#f1f5f9',
    }}>
      <div style={{ textAlign: 'center' }}>
        <h1 style={{ color: '#3b82f6' }}>Hello from DropDeploy!</h1>
        <p style={{ color: '#94a3b8' }}>React + Vite app is live.</p>
      </div>
    </div>
  );
}

src/main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

The quickstart command scaffolds everything. Edit src/App.jsx to build your app.

Build & start commands

DropDeploy runs these steps inside the container when you click Deploy.

npm install
npm run build
# Output in dist/ is served by Nginx — no start command needed

Environment variables

Set these in Project → Env Vars in the dashboard. Never commit secrets.

Variable	Required	Description
VITE_*	No	Prefix env vars with VITE_ to expose them to the client bundle at build time.

Common issues

Routes 404 on refresh

Nginx is configured with try_files to serve index.html — React Router history mode works correctly.

Assets load with wrong paths

DropDeploy passes --base=/ for absolute paths. Do not set a custom base in vite.config.

Next.js Vue (Vite)