Documentation Deploy to Vercel

Deploy to Vercel

One-click deploys go through CloudCode's own Vercel integration, so you don't need a Vercel account, token or CLI. CloudCode uploads your project's files to Vercel, Vercel builds them if the project needs a build, and you get a *.vercel.app URL.

How your project is built
Project
What happens
React or Vite (package.json lists vite, or react + react-dom)
Vercel runs npm install and your build script with its Vite preset, and serves dist/ with a fallback to index.html for client-side routes. If the project is missing pieces a Vite build needs, CloudCode adds them to the uploaded copy only: a build script (vite build), vite and @vitejs/plugin-react, a vite.config.mjs (React plugin plus the @/ → src/ alias), an index.html and a src/main entry that renders src/App. Files that already exist are never replaced. When there's no index.html and your CSS uses @tailwind without Tailwind installed, the generated index.html loads the Tailwind CDN script so styles still apply. This covers CloudCode's React and Capacitor templates.
Next.js (next in package.json, or a next.config file)
Built with Vercel's Next.js preset.
Create React App (react-scripts)
Built with Vercel's Create React App preset, with the same index.html fallback.
Other package.json with a build script
Vercel runs npm run build with no framework preset. The output directory is Vercel's default, so the build should write to public/ (otherwise the project root is served).
No package.json, or one with nothing to build
Static site: files are served as they are with @vercel/static. package.json and any detected server entry file are left out, a minimal index.html is generated if there isn't one, and unknown paths fall back to index.html.

CloudCode waits up to about five minutes for Vercel to install and build. If the build fails, the last lines of Vercel's error output appear in the error message. If it's still running after five minutes, the deploy is reported as failed even though Vercel may still finish it. The message includes the deployment URL so you can check it.

From the preview toolbar
1
Click Deploy
The Deploy button is in the dev preview toolbar.
2
Choose a deployment type
Pick Static Site or Node.js App. CloudCode pre-selects Node.js App when it finds index.js, server.js or app.js containing an Express/http server (require('express'), app.listen, createServer). With Static Site, the dialog says whether Vercel will build the project (and with which preset) or lists any files a pure static deploy leaves out.
3
Wait for the URL
CloudCode waits up to about five minutes for Vercel to report the deployment ready, then switches the Preview tab to Live. Deploys from the toolbar always target production and use the project's Production environment variables.
From Project Dashboard → Deploy
1
Open the Deploy tab
Add a "Project Dashboard" tab from the center panel's "+" menu (or the command palette), then select Deploy.
2
Pick an environment and source
Choose Development, Staging or Production, and a Source: all files, the project root, or a single workspace. The panel shows how many environment variables that environment has, and they are sent with the deploy (see Environment variables). Picking a workspace also applies the variable overrides of that workspace.
3
Deploy
Production deploys ask for confirmation. A progress log shows each step and you can cancel while a deploy runs. Deploys from this panel never use Node.js App mode: projects are built or served statically as described above.
What CloudCode changes in your files
Mode
Behavior
Static Site, built
Uploads your files as they are, plus any Vite scaffolding listed above. package.json is kept so Vercel can install and build.
Static Site, no build
Removes package.json and any detected server entry file. Generates a minimal index.html if there isn't one. Serves files with @vercel/static, and routes unknown paths to index.html (SPA fallback).
Node.js App
Deploys the detected entry file (index.js if none is found) as a @vercel/node serverless function and routes every request to it. package.json is kept.
All
Replaces any vercel.json in your project with CloudCode's own, which allows embedding in the live preview. Injects a small logger script into every .html file for the live preview console, plus the optional badge described below. In a Vite or Create React App build the .html files are the build's templates, and the build keeps both. Next.js projects have no HTML files to inject into, so they get neither the logger nor the badge.
URLs, failures & history
  • The URL shown is the deployment's unique *.vercel.app address
  • Each CloudCode project gets its own Vercel project, named cc-<id derived from your account>-<project name>-<first 8 characters of the project ID>. CloudCode sets the name on the server, so other users can't deploy over your project. The preview toolbar, the Dashboard and the public API all deploy a given project to the same Vercel project
  • Renaming a CloudCode project changes its Vercel project name, so the next deploy goes to a new Vercel project with a new URL
  • Production deploys target Vercel's production environment. Development and Staging deploys, from any source or workspace, are preview deployments of the same Vercel project, with their own URLs
  • If Vercel reports a failed deployment, the last 10 lines of its error output appear in the error message
  • Deployment history lists each deploy's status, URL and time per environment. The rollback button currently only adds a history entry and doesn't redeploy older files. To roll back, restore the files (version history or a GitHub pull) and deploy again
"Built with CloudCode" badge

By default, every deployed HTML page (except in Next.js projects) that has a closing </body> tag gets a small fixed "Built with CloudCode" link in its bottom-right corner, pointing to cloudcode.gg. To turn it off, go to Settings → API Keys & Integrations and switch off the "Built with CloudCode" badge toggle. Your choice is saved in this browser rather than in your account, so set it again on other browsers and devices. The setting applies to future deploys, so redeploy to remove the badge from an existing deployment.

html
<a data-cloudcode-badge href="https://cloudcode.gg/?utm_source=made-with-badge&utm_medium=referral" …>
  ☁ Built with CloudCode
</a>