Deploy React, Vite or Next.js today

Clusra doesn't run your build command yet. It deploys the repo's files as they are. So if you push React source code, the browser gets JSX it can't read.

The fix for now: build on your laptop, commit the built folder, and tell Clusra to serve that folder.

The workaround

1. 1
   Build the site locally (commands below for each framework).
2. 2
   Make sure the build folder is not ignored by git, then commit and push it.
3. 3
   On Clusra, set Root directory to the build folder: dist, build or out.
4. 4
   Deploy (or click Redeploy if the project already exists).

Vite (React, Vue, Svelte)

Vite writes the finished site to dist.

npm run build
git add -f dist
git commit -m "Add build for Clusra"
git push

Then set Root directory to dist.

Create React App

CRA writes to build.

npm run build
git add -f build
git commit -m "Add build for Clusra"
git push

Then set Root directory to build.

Next.js (static export)

Next.js needs static export turned on, so it writes plain files to out. Add this to your config:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
};

export default nextConfig;

npm run build
git add -f out
git commit -m "Add static export for Clusra"
git push

Then set Root directory to out.

In a monorepo

Root directory is relative to the top of the repo, so include the app's folder: apps/web/dist.

About .gitignore

Most templates ignore dist, build and out. git add -f adds the folder anyway. If you'd rather, remove the line from .gitignore. Remember to rebuild and commit again every time you change the code.