@rendela/vite 0.0.10 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -89
- package/dist/README.md +118 -89
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,115 +1,144 @@
|
|
|
1
|
-
# Rendela -
|
|
1
|
+
# Rendela - Pre-rendering for Vite SPAs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
- **SEO Optimization:** Prerenders pages to ensure they are properly indexed by search engines.
|
|
7
|
-
- **Faster Load Times:** By prerendering pages, users get content faster on their first visit.
|
|
8
|
-
- **Easy Integration:** Easily integrates with your existing SPA built with frameworks like Vue, React, etc.
|
|
9
|
-
- **Works with Vite:** This package works seamlessly with Vite to optimize SPA performance.
|
|
5
|
+
## Features
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
#### On Ubuntu/Debian (Linux)
|
|
18
|
-
|
|
19
|
-
1. First, update your package list:
|
|
20
|
-
```bash
|
|
21
|
-
sudo apt update
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
2. Then, install Chromium:
|
|
25
|
-
```bash
|
|
26
|
-
sudo apt install chromium
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
3. Verify the installation by running:
|
|
30
|
-
```bash
|
|
31
|
-
chromium --version
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
This should show the installed Chromium version.
|
|
35
|
-
|
|
36
|
-
#### On Windows
|
|
7
|
+
- Pre-renders selected pages of your SPA for improved SEO
|
|
8
|
+
- Seamless integration with Vite build process
|
|
9
|
+
- Configurable rendering options
|
|
10
|
+
- Support for Nginx and Apache server configurations
|
|
11
|
+
- Automatic Chromium handling
|
|
37
12
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
2. **Extract the Archive**: Extract the downloaded `.zip` file to a location of your choice (e.g., `C:\Program Files\Chromium`).
|
|
41
|
-
|
|
42
|
-
3. **Set the Path**: You need to add the path to the Chromium executable in your system’s PATH environment variable.
|
|
43
|
-
- Open **System Properties** > **Environment Variables**.
|
|
44
|
-
- Under **System Variables**, find and select `Path`, then click **Edit**.
|
|
45
|
-
- Click **New**, and add the path to the folder where Chromium is located (e.g., `C:\Program Files\Chromium`).
|
|
46
|
-
|
|
47
|
-
4. Verify the installation by running the following command in a terminal or command prompt:
|
|
48
|
-
```bash
|
|
49
|
-
chromium --version
|
|
50
|
-
```
|
|
13
|
+
## Prerequisites
|
|
51
14
|
|
|
52
|
-
|
|
15
|
+
Before installing Rendela, ensure you have:
|
|
53
16
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
```
|
|
17
|
+
- A Vite-based project
|
|
18
|
+
- Node.js version 14 or higher
|
|
19
|
+
- Chrome or Chromium browser (required for headless rendering)
|
|
58
20
|
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
brew install chromium
|
|
62
|
-
```
|
|
21
|
+
### Installing Chromium
|
|
63
22
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
23
|
+
**Linux:**
|
|
24
|
+
```bash
|
|
25
|
+
apt update && apt install chromium
|
|
26
|
+
```
|
|
68
27
|
|
|
69
|
-
|
|
28
|
+
**Windows:**
|
|
29
|
+
1. Download Chromium from the [official website](https://www.chromium.org/getting-involved/download-chromium)
|
|
30
|
+
2. Extract to desired location (e.g., `C:\Program Files\Chromium`)
|
|
31
|
+
3. Add to PATH environment variable
|
|
70
32
|
|
|
71
|
-
|
|
33
|
+
**macOS:**
|
|
34
|
+
```bash
|
|
35
|
+
# Install Homebrew if needed
|
|
36
|
+
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
|
37
|
+
# Install Chromium
|
|
38
|
+
brew install chromium
|
|
39
|
+
```
|
|
72
40
|
|
|
73
41
|
## Installation
|
|
74
42
|
|
|
75
|
-
|
|
43
|
+
Install Rendela in your Vite project:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm i @rendela/vite
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Configuration
|
|
50
|
+
|
|
51
|
+
1. Add the plugin to your `vite.config.js` or `vite.config.ts`:
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import { defineConfig } from 'vite';
|
|
55
|
+
import rendela from '@rendela/vite';
|
|
56
|
+
|
|
57
|
+
export default defineConfig({
|
|
58
|
+
plugins: [
|
|
59
|
+
rendela()
|
|
60
|
+
]
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
2. Create a `rendela.config.js` in your project root (or let Rendela auto-generate it):
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
export default {
|
|
68
|
+
pages: [
|
|
69
|
+
{ url: "/" },
|
|
70
|
+
{ url: "/about", filename: "about-us.html" },
|
|
71
|
+
{ url: "/products", timeout: 10000 }
|
|
72
|
+
],
|
|
73
|
+
buildDir: "dist",
|
|
74
|
+
port: 3300,
|
|
75
|
+
savePath: "pages",
|
|
76
|
+
pageWaitTime: 10,
|
|
77
|
+
pageTimeout: 5000,
|
|
78
|
+
debug: true,
|
|
79
|
+
autoStartOnBuild: true,
|
|
80
|
+
concurrencyLimit: 1,
|
|
81
|
+
chromiumExecutablePath: undefined
|
|
82
|
+
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Configuration Options
|
|
86
|
+
|
|
87
|
+
| Parameter | Type | Default | Description |
|
|
88
|
+
|-----------|------|---------|-------------|
|
|
89
|
+
| pages | Array | `[{ url: '/' }]` | Pages to pre-render |
|
|
90
|
+
| buildDir | String | `"dist"` | Build directory |
|
|
91
|
+
| port | Number | `3300` | Server port for rendering |
|
|
92
|
+
| savePath | String | `"pages"` | Output directory for rendered pages |
|
|
93
|
+
| pageWaitTime | Number | `10` | Wait time after load (ms) |
|
|
94
|
+
| pageTimeout | Number | `5000` | Page load timeout (ms) |
|
|
95
|
+
| debug | Boolean | `true` | Enable debug logging |
|
|
96
|
+
| autoStartOnBuild | Boolean | `true` | Auto-render after build |
|
|
97
|
+
| concurrencyLimit | Number | `1` | Concurrent page limit |
|
|
98
|
+
| chromiumExecutablePath | String | `undefined` | Custom Chromium path |
|
|
76
99
|
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm install @rendela/vite
|
|
80
|
-
# or
|
|
81
|
-
yarn add @rendela/vite
|
|
82
|
-
```
|
|
100
|
+
## Usage
|
|
83
101
|
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
import { defineConfig } from 'vite'
|
|
87
|
-
import rendela from '@rendela/vite'
|
|
102
|
+
With `autoStartOnBuild: true`, pages will be pre-rendered automatically after build. Otherwise, run:
|
|
88
103
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
```
|
|
104
|
+
```bash
|
|
105
|
+
npx rendela
|
|
106
|
+
```
|
|
93
107
|
|
|
94
|
-
|
|
108
|
+
## Server Configuration
|
|
95
109
|
|
|
96
|
-
|
|
110
|
+
### Nginx
|
|
97
111
|
|
|
98
|
-
|
|
112
|
+
```nginx
|
|
113
|
+
server {
|
|
114
|
+
listen 80;
|
|
115
|
+
root /var/www/your-site/dist;
|
|
116
|
+
|
|
117
|
+
location = / {
|
|
118
|
+
try_files /pages/index.html =404;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
location / {
|
|
122
|
+
try_files $uri /pages/$uri/index.html /index.html =404;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
```
|
|
99
126
|
|
|
100
|
-
###
|
|
101
|
-
- `rendela` will use the installed Chromium instance in headless mode to render and capture your pages.
|
|
102
|
-
- It generates static HTML files of your pages that can be served to crawlers or users, ensuring better SEO and performance.
|
|
127
|
+
### Apache
|
|
103
128
|
|
|
104
|
-
|
|
129
|
+
```apache
|
|
130
|
+
<VirtualHost *:80>
|
|
131
|
+
DocumentRoot /var/www/your-site/dist
|
|
105
132
|
|
|
106
|
-
|
|
133
|
+
RewriteEngine On
|
|
134
|
+
RewriteCond %{REQUEST_URI} ^/$
|
|
135
|
+
RewriteRule ^$ /pages/index.html [L]
|
|
107
136
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
137
|
+
RewriteCond %{REQUEST_URI} !^/pages/
|
|
138
|
+
RewriteRule ^(.*)$ /pages/$1/index.html [L]
|
|
139
|
+
</VirtualHost>
|
|
140
|
+
```
|
|
112
141
|
|
|
113
142
|
## License
|
|
114
143
|
|
|
115
|
-
|
|
144
|
+
MIT
|
package/dist/README.md
CHANGED
|
@@ -1,115 +1,144 @@
|
|
|
1
|
-
# Rendela -
|
|
1
|
+
# Rendela - Pre-rendering for Vite SPAs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
- **SEO Optimization:** Prerenders pages to ensure they are properly indexed by search engines.
|
|
7
|
-
- **Faster Load Times:** By prerendering pages, users get content faster on their first visit.
|
|
8
|
-
- **Easy Integration:** Easily integrates with your existing SPA built with frameworks like Vue, React, etc.
|
|
9
|
-
- **Works with Vite:** This package works seamlessly with Vite to optimize SPA performance.
|
|
5
|
+
## Features
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
#### On Ubuntu/Debian (Linux)
|
|
18
|
-
|
|
19
|
-
1. First, update your package list:
|
|
20
|
-
```bash
|
|
21
|
-
sudo apt update
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
2. Then, install Chromium:
|
|
25
|
-
```bash
|
|
26
|
-
sudo apt install chromium
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
3. Verify the installation by running:
|
|
30
|
-
```bash
|
|
31
|
-
chromium --version
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
This should show the installed Chromium version.
|
|
35
|
-
|
|
36
|
-
#### On Windows
|
|
7
|
+
- Pre-renders selected pages of your SPA for improved SEO
|
|
8
|
+
- Seamless integration with Vite build process
|
|
9
|
+
- Configurable rendering options
|
|
10
|
+
- Support for Nginx and Apache server configurations
|
|
11
|
+
- Automatic Chromium handling
|
|
37
12
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
2. **Extract the Archive**: Extract the downloaded `.zip` file to a location of your choice (e.g., `C:\Program Files\Chromium`).
|
|
41
|
-
|
|
42
|
-
3. **Set the Path**: You need to add the path to the Chromium executable in your system’s PATH environment variable.
|
|
43
|
-
- Open **System Properties** > **Environment Variables**.
|
|
44
|
-
- Under **System Variables**, find and select `Path`, then click **Edit**.
|
|
45
|
-
- Click **New**, and add the path to the folder where Chromium is located (e.g., `C:\Program Files\Chromium`).
|
|
46
|
-
|
|
47
|
-
4. Verify the installation by running the following command in a terminal or command prompt:
|
|
48
|
-
```bash
|
|
49
|
-
chromium --version
|
|
50
|
-
```
|
|
13
|
+
## Prerequisites
|
|
51
14
|
|
|
52
|
-
|
|
15
|
+
Before installing Rendela, ensure you have:
|
|
53
16
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
```
|
|
17
|
+
- A Vite-based project
|
|
18
|
+
- Node.js version 14 or higher
|
|
19
|
+
- Chrome or Chromium browser (required for headless rendering)
|
|
58
20
|
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
brew install chromium
|
|
62
|
-
```
|
|
21
|
+
### Installing Chromium
|
|
63
22
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
23
|
+
**Linux:**
|
|
24
|
+
```bash
|
|
25
|
+
apt update && apt install chromium
|
|
26
|
+
```
|
|
68
27
|
|
|
69
|
-
|
|
28
|
+
**Windows:**
|
|
29
|
+
1. Download Chromium from the [official website](https://www.chromium.org/getting-involved/download-chromium)
|
|
30
|
+
2. Extract to desired location (e.g., `C:\Program Files\Chromium`)
|
|
31
|
+
3. Add to PATH environment variable
|
|
70
32
|
|
|
71
|
-
|
|
33
|
+
**macOS:**
|
|
34
|
+
```bash
|
|
35
|
+
# Install Homebrew if needed
|
|
36
|
+
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
|
37
|
+
# Install Chromium
|
|
38
|
+
brew install chromium
|
|
39
|
+
```
|
|
72
40
|
|
|
73
41
|
## Installation
|
|
74
42
|
|
|
75
|
-
|
|
43
|
+
Install Rendela in your Vite project:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm i @rendela/vite
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Configuration
|
|
50
|
+
|
|
51
|
+
1. Add the plugin to your `vite.config.js` or `vite.config.ts`:
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import { defineConfig } from 'vite';
|
|
55
|
+
import rendela from '@rendela/vite';
|
|
56
|
+
|
|
57
|
+
export default defineConfig({
|
|
58
|
+
plugins: [
|
|
59
|
+
rendela()
|
|
60
|
+
]
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
2. Create a `rendela.config.js` in your project root (or let Rendela auto-generate it):
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
export default {
|
|
68
|
+
pages: [
|
|
69
|
+
{ url: "/" },
|
|
70
|
+
{ url: "/about", filename: "about-us.html" },
|
|
71
|
+
{ url: "/products", timeout: 10000 }
|
|
72
|
+
],
|
|
73
|
+
buildDir: "dist",
|
|
74
|
+
port: 3300,
|
|
75
|
+
savePath: "pages",
|
|
76
|
+
pageWaitTime: 10,
|
|
77
|
+
pageTimeout: 5000,
|
|
78
|
+
debug: true,
|
|
79
|
+
autoStartOnBuild: true,
|
|
80
|
+
concurrencyLimit: 1,
|
|
81
|
+
chromiumExecutablePath: undefined
|
|
82
|
+
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Configuration Options
|
|
86
|
+
|
|
87
|
+
| Parameter | Type | Default | Description |
|
|
88
|
+
|-----------|------|---------|-------------|
|
|
89
|
+
| pages | Array | `[{ url: '/' }]` | Pages to pre-render |
|
|
90
|
+
| buildDir | String | `"dist"` | Build directory |
|
|
91
|
+
| port | Number | `3300` | Server port for rendering |
|
|
92
|
+
| savePath | String | `"pages"` | Output directory for rendered pages |
|
|
93
|
+
| pageWaitTime | Number | `10` | Wait time after load (ms) |
|
|
94
|
+
| pageTimeout | Number | `5000` | Page load timeout (ms) |
|
|
95
|
+
| debug | Boolean | `true` | Enable debug logging |
|
|
96
|
+
| autoStartOnBuild | Boolean | `true` | Auto-render after build |
|
|
97
|
+
| concurrencyLimit | Number | `1` | Concurrent page limit |
|
|
98
|
+
| chromiumExecutablePath | String | `undefined` | Custom Chromium path |
|
|
76
99
|
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm install @rendela/vite
|
|
80
|
-
# or
|
|
81
|
-
yarn add @rendela/vite
|
|
82
|
-
```
|
|
100
|
+
## Usage
|
|
83
101
|
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
import { defineConfig } from 'vite'
|
|
87
|
-
import rendela from '@rendela/vite'
|
|
102
|
+
With `autoStartOnBuild: true`, pages will be pre-rendered automatically after build. Otherwise, run:
|
|
88
103
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
```
|
|
104
|
+
```bash
|
|
105
|
+
npx rendela
|
|
106
|
+
```
|
|
93
107
|
|
|
94
|
-
|
|
108
|
+
## Server Configuration
|
|
95
109
|
|
|
96
|
-
|
|
110
|
+
### Nginx
|
|
97
111
|
|
|
98
|
-
|
|
112
|
+
```nginx
|
|
113
|
+
server {
|
|
114
|
+
listen 80;
|
|
115
|
+
root /var/www/your-site/dist;
|
|
116
|
+
|
|
117
|
+
location = / {
|
|
118
|
+
try_files /pages/index.html =404;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
location / {
|
|
122
|
+
try_files $uri /pages/$uri/index.html /index.html =404;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
```
|
|
99
126
|
|
|
100
|
-
###
|
|
101
|
-
- `rendela` will use the installed Chromium instance in headless mode to render and capture your pages.
|
|
102
|
-
- It generates static HTML files of your pages that can be served to crawlers or users, ensuring better SEO and performance.
|
|
127
|
+
### Apache
|
|
103
128
|
|
|
104
|
-
|
|
129
|
+
```apache
|
|
130
|
+
<VirtualHost *:80>
|
|
131
|
+
DocumentRoot /var/www/your-site/dist
|
|
105
132
|
|
|
106
|
-
|
|
133
|
+
RewriteEngine On
|
|
134
|
+
RewriteCond %{REQUEST_URI} ^/$
|
|
135
|
+
RewriteRule ^$ /pages/index.html [L]
|
|
107
136
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
137
|
+
RewriteCond %{REQUEST_URI} !^/pages/
|
|
138
|
+
RewriteRule ^(.*)$ /pages/$1/index.html [L]
|
|
139
|
+
</VirtualHost>
|
|
140
|
+
```
|
|
112
141
|
|
|
113
142
|
## License
|
|
114
143
|
|
|
115
|
-
|
|
144
|
+
MIT
|