unofficial vite-plugin-pages enhanced build
For use
Make sure you have the original plugin installed vite-plugin-pages for the route generation, everything is on us.
We highly recommend that you keep viewports, and favicons global while title, description, and keywords per-page. Right now the author meta are not yet supported. Please consider creating a pull request.
Installation process.
npm install -D vite-plugin-pages
npm install -D vite-plugin-pages-metadataNo need to replace your title but make sure you have one it will be replaced with metadata and the new title. Here is an example of index.html located in the root directory.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Name</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Edit your vite.config.ts
import {
routePlugin,
generateRoutes,
Route,
createMetadata,
} from "vite-plugin-pages-metadata";
import react from "@vitejs/plugin-react";
import Pages from "vite-plugin-pages";
import { defineConfig } from "vite";
let routeArray: Route[] = [];
const pages: Route[] = [
{
path: "/",
title: "My website",
description: "This is my awesome website",
keywords: ["Website", "Awesome"],
},
{ path: "posts", title: "All posts" },
{ path: "*", title: "404" },
];
export default defineConfig(({ command }) => {
return {
plugins: [
react(),
Pages({
// ...
onRoutesGenerated() {
generateRoutes(pages, (page) => {
routeArray.push({
path: page.path,
...(page && page.title && { title: page.title }),
...(page &&
page.description && {
description: page.description,
}),
});
});
createMetadata(routeArray);
},
}),
routePlugin({
routeArray,
outDir: "dist",
command,
}),
],
};
});// ...
import posts from "./src/api/posts";
let routeArray: Route[] = [];
posts.map((post) => {
return routeArray.push({
path: `/post/${post.id}`,
title: post.title,
description: post.summary,
});
});
// ...Edit src/main.tsx or your entry file.
import { MetadataProvider } from "vite-plugin-pages-metadata";
import { metadata } from "./metadata";
import routes from "~react-pages";
// ...
createRoot(document.getElementById("root")!).render(
<StrictMode>
<BrowserRouter>
<MetadataProvider metadata={metadata} routes={routes}>
<App />
</MetadataProvider>
</BrowserRouter>
</StrictMode>,
);-
Type:
Route[] or { path: string; title: string; description?: string; } -
Default:
[]
Connect your generated routes from vite-plugin-pages to the plugin.
-
Type:
string -
Default:
dist
The name where your build assets are stored after a build.
MIT License © 2024 Nathaniel