@rendela/vite

Rendela - Pre-rendering for Vite SPAs

Rendela is an NPM library that allows you to pre-render selected pages of your Single Page Application to improve SEO, especially on landing pages that need to be indexed correctly by search engines.

Features

• Pre-renders selected pages of your SPA for improved SEO
• Seamless integration with Vite build process
• Configurable rendering options
• Support for Nginx and Apache server configurations
• Automatic Chromium handling

Prerequisites

Before installing Rendela, ensure you have:

• A Vite-based project
• Node.js version 14 or higher
• Chrome or Chromium browser (required for headless rendering)

Installing Chromium

Linux:

apt update && apt install chromium

Windows:

1. Download Chromium from the official website
2. Extract to desired location (e.g., C:\Program Files\Chromium)
3. Add to PATH environment variable

macOS:

# Install Homebrew if needed
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install Chromium
brew install chromium

Installation

Install Rendela in your Vite project:

npm i @rendela/vite

Configuration

1. Add the plugin to your vite.config.js or vite.config.ts:

import { defineConfig } from 'vite';
import rendela from '@rendela/vite';

export default defineConfig({
  plugins: [
    rendela()
  ]
});

2. Create a rendela.config.js in your project root (or let Rendela auto-generate it):

export default {
  pages: [
    { url: "/" },
    { url: "/about" },
    { url: "/products" }
  ],
  buildDir: "dist",
  port: 3300,
  savePath: "pages",
  pageWaitTime: 10,
  pageTimeout: 5000,
  debug: true,
  autoStartOnBuild: true,
  concurrencyLimit: 1,
  chromiumExecutablePath: undefined
};

Configuration Options

Parameter	Type	Default	Description
pages	Array	[{ url: '/' }]	Pages to pre-render
buildDir	String	"dist"	Build directory
port	Number	3300	Server port for rendering
savePath	String	"pages"	Output directory for rendered pages
pageWaitTime	Number	10	Wait time after load (ms)
pageTimeout	Number	5000	Page load timeout (ms)
debug	Boolean	true	Enable debug logging
autoStartOnBuild	Boolean	true	Auto-render after build
concurrencyLimit	Number	1	Concurrent page limit
chromiumExecutablePath	String	undefined	Custom Chromium path

Usage

With autoStartOnBuild: true, pages will be pre-rendered automatically after build. Otherwise, run:

npx rendela

Server Configuration

Nginx

server {
   listen 80;
   root /var/www/your-site/dist;
   
   location = / {
        try_files /pages/index.html =404;
   }
   
   location / {
        try_files $uri /pages/$uri/index.html /index.html =404;
   }
}

Apache

<VirtualHost *:80>
    DocumentRoot /var/www/your-site/dist

    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^/$
    RewriteRule ^$ /pages/index.html [L]

    RewriteCond %{REQUEST_URI} !^/pages/
    RewriteRule ^(.*)$ /pages/$1/index.html [L]
</VirtualHost>

License

MIT