Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theengineerhub/staticit
Minimal, zero-configuration and fast solution for static site generation in any front-end framework.
https://github.com/theengineerhub/staticit
pre-render prerender puppeteer react react-prerender react-ssg rollup sifrr ssg static-site-generation uwebsockets vite vue vue-prerender vue-ssg webpack
Last synced: 2 months ago
JSON representation
Minimal, zero-configuration and fast solution for static site generation in any front-end framework.
- Host: GitHub
- URL: https://github.com/theengineerhub/staticit
- Owner: TheEngineerhub
- License: mit
- Created: 2022-04-14T18:03:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T23:21:12.000Z (3 months ago)
- Last Synced: 2024-10-08T22:39:56.380Z (3 months ago)
- Topics: pre-render, prerender, puppeteer, react, react-prerender, react-ssg, rollup, sifrr, ssg, static-site-generation, uwebsockets, vite, vue, vue-prerender, vue-ssg, webpack
- Language: TypeScript
- Homepage: https://npmjs.com/package/staticit
- Size: 735 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
#
### 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](https://github.com/sPavl0v/react-spa-prenderer). Under the hood it uses [express](https://expressjs.com/) and [puppeteer](https://github.com/puppeteer/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 **express**.
- 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:
```sh
$ npm install -D staticit
```- With yarn:
```sh
$ yarn add --dev staticit
```- With pnpm:
```sh
$ pnpm install -D staticit
```#
### Usage
Create a file called [`.staticit.json`](.staticit.json) in your project root directory. For minimal configuration add the following lines.
```json
{
"routes": ["/", "/about"],
"outDir": "./dist",
"port": 8080
}
```> - If you are going to build your application in an automated environment, for example with a CI tool. You should pass the `--no-sandbox` flag to `puppeteer: launchOpts` or you might get errors since most of them are running inside of a container with root user. [(Ref)](https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#setting-up-chrome-linux-sandbox)
- Then add a postbuild step to your [`package.json`](package.json).
```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](https://github.com/TheEngineerhub/staticit/tree/main/examples/react)
- Vue Example Coming soon.#
### License
This repository is licensed under the [MIT](LICENSE.md) License.