Staticit - Introduction
Whether you want to increase performance of your web application or improve SEO. Generally you have 2 options, use SSR (Server Side Rendering) or SSG (Static Site Generation). SSR can be cumbersome and you will need a server to host it.
SSG is relatively simple and a good alternative. Some frameworks have this feature out of the box some don't, some are bloated and you may want a simpler solution. Here comes the Staticit!
Staticit is a improved version of a small library called react-spa-prerender. Under the hood it uses sifrr and puppeteer to generate static files.
Since it's standalone it will work with any build tool and any front-end framework that supports routing.
How it works?
- Serves the web application from build directory with sifrr.
- Renders & generates desired routes with puppeteer.
- Reformats all generated HTML files with prettier so they'll be pretty
🥰 .
Install
- Latest LTS Node.js is recommended.
- With npm:
$ npm install -D staticit
- With yarn:
$ yarn add --dev staticit
- With pnpm:
$ pnpm install -D staticit
Usage
Create a file called .staticit.json in your project root directory. For minimal configuration add the following lines.
{
"routes": ["/", "/about"],
"outDir": "./dist",
"port": 8080
}
--no-sandboxflag topuppeteer: launchOptsor you might get errors since most of them are running inside of a container with root user. (Ref)
- Then add a postbuild step to your
package.json.
"scripts": {
...
"postbuild": "staticit"
}
References
JSON Reference
| Option | Default | Description |
|---|---|---|
| routes | [] |
Array of routes that you want to pre-render & generate static files. |
| outDir | ./dist |
Relative path to the build directory of your application. |
| port | 8080 |
The port where the static server will serve your web application for the puppeteer. |
| puppeteer: launchOpts | {} |
Generic launch options that can be passed when launching puppeteer browser. |
| puppeteer: waitForOpts | {} |
Timeout options for puppeteer browser. |
--
CLI Reference
| Option | Description |
|---|---|
| --disable-prettier | Disables formatting HTML files with prettier. |
| -c, --config | To use with different config file name. |
Examples
- React Example
- Vue Example Coming soon.
License
This repository is licensed under the MIT License.
245 Dec 27, 2022
21.1k Jan 4, 2023
36 Sep 20, 2022
51.2k Jan 5, 2023
9 Nov 16, 2022
19 Dec 26, 2022
231 Dec 30, 2022
10.2k Jan 9, 2023
44 Dec 30, 2022