let’s deploy a static Excalidraw embed under your cPanel hosting at:

Filesystem: /home/toolsdevopsschoo/public_html/excalidraw
URL:       https://tools.devopsschool.com/excalidraw/

This method needs no Node.js server running on cPanel (just static files). You’ll build locally on the server via SSH and copy the build output into public_html/excalidraw.

Step-by-Step (SSH)

0) Prereqs (one time)

# Log in over SSH, then check Node & npm
node -v
npm -v

If Node is missing or < 18, install with nvm:

# Install nvm (if not present)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc  # or: source ~/.zshrc

# Install and use an LTS Node
nvm install --lts
nvm use --lts

1) Create a fresh React app (outside public_html)

cd ~
npm create vite@latest excali-static -- --template react
cd excali-static
npm install
npm install @excalidraw/excalidraw

2) Wire Excalidraw into the app

2.1 Replace src/App.jsx

// /home/toolsdevopsschoo/excali-static/src/App.jsx
import { useEffect, useRef } from "react";
import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  const wrap = useRef(null);

  useEffect(() => {
    document.body.style.margin = "0";
    if (wrap.current) wrap.current.style.height = "100vh";
  }, []);

  return (
    <div ref={wrap}>
      <Excalidraw />
    </div>
  );
}

(Keep the default src/main.jsx from Vite; no change needed.)

2.2 Set Vite base path so assets load from /excalidraw/

// /home/toolsdevopsschoo/excali-static/vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/excalidraw/",   // IMPORTANT: site is served from /excalidraw/
});

3) Build for production

cd ~/excali-static
npm run build
# Output appears in: ~/excali-static/dist

4) Deploy to your web root

# Make/clean the target folder under public_html
mkdir -p /home/toolsdevopsschoo/public_html/excalidraw
rm -rf /home/toolsdevopsschoo/public_html/excalidraw/*

# Copy the built files
cp -r ~/excali-static/dist/* /home/toolsdevopsschoo/public_html/excalidraw/

Open: https://tools.devopsschool.com/excalidraw/ 🎉

5) (If you see missing icons/images) add excalidraw-assets

Newer versions usually handle assets automatically. If your browser console shows 404s for excalidraw-assets, do this:

mkdir -p /home/toolsdevopsschoo/public_html/excalidraw/excalidraw-assets
cp -r ~/excali-static/node_modules/@excalidraw/excalidraw/dist/excalidraw-assets/* \
      /home/toolsdevopsschoo/public_html/excalidraw/excalidraw-assets/

Reload the page.

6) Optional: add caching + security headers

Create /home/toolsdevopsschoo/public_html/excalidraw/.htaccess:

# Caching (safe defaults)
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/javascript "access plus 7 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType image/png "access plus 30 days"
  ExpiresByType image/svg+xml "access plus 30 days"
</IfModule>

# Security headers
<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
  Header set Referrer-Policy "no-referrer-when-downgrade"
  Header set X-Frame-Options "SAMEORIGIN"
</IfModule>

If your host uses aggressive caching, remember to re-upload after each new build.

7) Update flow (next time you change something)

cd ~/excali-static
npm run build
rm -rf /home/toolsdevopsschoo/public_html/excalidraw/*
cp -r dist/* /home/toolsdevopsschoo/public_html/excalidraw/

Notes & Tips

• This approach is static (no collaboration server). It’s perfect for shared cPanel hosting.
• If you must run the full Excalidraw app from the official repo (Next.js), your cPanel plan must support Node.js/Passenger apps. If you have that, say the word and I’ll give you those steps too.
• Always set base: "/excalidraw/" in vite.config.js since the site is served from a subpath.

If you want, I can also add toolbar theming (light/dark), export buttons, or a save-to-JSON flow in this static build—just say the word and I’ll extend App.jsx.