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 express 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 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:

$ 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
}

- 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)

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