🏄🏻 A collection of opinionated configurations for a web project in typescript for presetter
• Quick Start • Project Structure • Customization • Scripts •
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
- 💄 PostCSS 8
- 💨 TailwindCSS 3
FULL DOCUMENTATION IS AVAILABLE HERE
On your project root, create a presetter.config.ts file with the following content:
// presetter.config.ts
import { preset } from 'presetter';
import essentials from 'presetter-preset-essentials';
import web from 'presetter-preset-web';
export default preset('project name', {
// NOTE
// you may need an additional preset like presetter-preset-rollup for typescript support and other basic toolings
extends: [essentials, web],
override: {
// override the configuration here
},
});Then, install your project as usual with npm install or any package manager you prefer.
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).
After installation, your project file structure should resemble the following, or include more configuration files if you also installed other presets.
NOTE You will notice there's no additional configuration file on your root folder like other presets such as presetter-preset-essentials.
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
├─ presetter.config.ts
├─ node_modules
└─ package.json
As a bundle only preset, it offers no further customization.
However, you can further customize (either extending or replacing) the configuration by specifying the changes in the config file presetter.config.ts.
NOTE: You may want to use other presets together with presetter-preset-web to setup your project.