Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

Awesome Lists containing this project

README

        


Static-it




Build Status







#

### 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.