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