A CLI that prebuilds HTML files. Use it to build websites with plain HTML, CSS and JS.

🧬 It pre-renders web components (docs),
🏗️ It handles layouting and metadata (docs),
👻 It manages build-only components and scripts (docs),
✨ It gets components and scripts access to build environment (docs).

pree view     <src>                      # 👉 preview your website
pree build    <src> <dest>               # 👉 prebuild your website

Usage

👉 Write plain HTML, CSS and JavaScript for your website. Assuming your HTML files and your assets are in src folder, preview your website:

npx pree view src

👉 And prebuild it into dest folder:

npx pree build src dest

• All web components will be pre-rendered, loading instantly on clients. Web components supporting SSR can re-hydrating on client instead of full re-rendering, improving UX.
• Any <script build-only> tags will be removed from prebuilt HTML files. Use this to load static web components. They are pre-rendered, no need to send them to clients.
• Use front matter in HTML files for handling layouting and metadata.
• Web components can also use information about the build environment.

[!IMPORTANT] 📖 Read the documentation for more info.

Credits

pree is built on top of the following open-source projects (amongst others). For a more complete list, check out the credits page.

• puppeteer: for prebuilding pages and pre-rendering web components.
• koa: for serving content and layouting.
• cheerio: for manipulating HTML (e.g. layouting).
• gray-matter: for parsing front matter.
• chokidar: for watching files.
• chalk: for all the colors.
• yargs: for parsing command line arguments.
• yaml: for parsing CLI config.

Contribution

You need node, NPM to start and git to start.

# clone the code
git clone [email protected]:loreanvictor/pree.git

# install stuff
npm i

Make sure all checks are successful on your PRs. This includes all tests passing, high code coverage, correct typings and abiding all the linting rules. The code is typed with TypeScript, Jest is used for testing and coverage reports, ESLint and TypeScript ESLint are used for linting. Subsequently, IDE integrations for TypeScript and ESLint would make your life much easier (for example, VSCode supports TypeScript out of the box and has this nice ESLint plugin), but you could also use the following commands:

# run tests
npm test

# check code coverage
npm run coverage

# run linter
npm run lint

# run type checker
npm run typecheck