🏄🏻 A collection of opinionated configurations for a web project in typescript for presetter

•   Quick Start   •   Project Structure   •   Customization   •   Scripts   •

Features

presetter-preset-web is an opinionated preset for you to setup some common tools for a web project in a fraction of time you usually take via presetter

• 🕸️ GraphQL 15
• 💄 PostCSS 8
• 💨 TailwindCSS 2

Quick Start

FULL DOCUMENTATION IS AVAILABLE HERE

1. Bootstrap your project with presetter-preset-esm & presetter-preset-web

npx presetter use presetter-preset presetter-preset-web

That's. One command and you're set.

2. Develop and run life cycle scripts provided by the preset

At this point, all development packages specified in the preset are installed, and now you can try to run some example life cycle scripts (e.g. run prepare).

Project Structure

After installation, your project file structure should resemble the following or with more configuration files if you also installed other presets such as presetter-preset-esm.

NOTE You will notice there's no additional configuration file on your root folder like other presets such as presetter-preset-esm. It's because presetter-preset-web is a bundle only preset, meaning it only helps you to install the development packages specified in this preset only.

(root)
 ├─ .git
 ├─ .presetterrc.json
 ├─ node_modules
 └─ package.json

Customization

As a bundle only preset, it offers no further customization.

However, you are still required to specify the preset name in .presetterrc or .presetterrc.json as the interface below.

NOTE: You may want to use other presets together with presetter-preset-web to setup your project, specify the presets in .presetterrc or .presetterrc.json as well and checkout their available customization.

interface PresetterRC {
  /** name(s) of the preset e.g. "presetter-preset-web" or ["presetter-preset-esm", "presetter-preset-web", "presetter-preset-react"] */
  name: string | string[];
}