The workbench for PageInspo component development. This project allows for developing and building standalone React components/pages that can be embedded elsewhere.
-
Install dependencies:
npm install # or pnpm install -
Run development server:
npm run dev
Access the dashboard at
http://localhost:5173. -
Build a project:
bash npm run build:attioAccess the built project athttp://localhost:5173/dist/attio. You can now use pnpm build:project attio to seamlessly build a single page instead of the entire project. For example, running pnpm build:project attio SettingsBilling just completed in 3.4 seconds (compared to nearly 20 seconds for the full build)!
You can still use pnpm build:project attio without arguments to compile everything and perform a fresh clean of the dist folder as usual.
- Create vite config for new project
cp vite.config.attio.js vite.config.<project>.js- Add build script to package.json
"scripts": {
"build:<project>": "vite build -c vite.config.<project>.js"
}src/pages/: Main dashboard pages.src/projects/: Individual project components (e.g.,attio,brevo).vite.config.js: Main build configuration.vite.config.<project>.js: Standalone build configurations for specific projects.
To create a buildable, standalone version of a project (e.g., for embedding in an iframe), follow these steps:
Create a new folder in src/projects/<your-project> (e.g., src/projects/my-page).
Inside, you need two entry files:
mount.jsx (The React entry point):
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./main"; // Your main component
import "../../index.css"; // Global styles
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);index.html (The HTML entry point):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./mount.jsx"></script>
</body>
</html>Create a vite.config.<project>.js file in the project root (e.g., vite.config.mypage.js):
import path from "path";
import { fileURLToPath } from "url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
// Root of the sub-project
root: path.resolve(__dirname, "src/projects/my-page"),
publicDir: path.resolve(__dirname, "public"),
build: {
// Output directory
outDir: path.resolve(__dirname, "dist/my-page"),
emptyOutDir: true,
rollupOptions: {
input: {
// Point to your index.html
main: path.resolve(__dirname, "src/projects/my-page/index.html"),
},
},
},
});Add a script to package.json:
"scripts": {
"build:mypage": "vite build -c vite.config.mypage.js"
}Run the build command:
npm run build:mypageThe output will be generated in dist/my-page/.