One command. Zero config fatigue.
Bootstrap a React + TypeScript + Webpack app with a solid starter setup and optional tooling you can enable when you need it.

✨ Overview

create-alistt69-kit is a project scaffolding tool for quickly creating a modern frontend app without burning time on repetitive setup.

It generates a ready-to-run React + TypeScript + Webpack starter with a practical baseline and optional extras you can turn on when needed.

🔧 What’s inside

| Tool | Purpose | Included | |------|----------------------------------|----------| | React | Web framework | Default | | TypeScript | Static typing | Default | | Webpack | Bundling and build pipeline | Default | | SCSS Modules | Scoped styling | Default | | SVGR | Import SVGs as React components | Default | | Webpack Bundle Analyzer | Bundle size inspection | Default | | ESLint + eslint-stylistic | Code quality and stylistic rules | Optional | | Stylelint | Stylesheet linting | Optional | | Autoprefixer | Automatic CSS vendor prefixes | Optional | | React Router | Client-side routing | Optional | | AGENTS.md | Root instructions file for AI coding agents | Optional | | Puppeteer + serve-handler | Static HTML prerender after production build | Optional |

🎯 Why use it?

Setting up a frontend project from scratch usually means repeating the same stuff every time:

• webpack config
• TypeScript config
• style handling
• routing
• linters
• folder structure
• project generators

This starter removes that boilerplate so you can get straight to building.

⚡ Generated project helpers

Some optional features also add local project generators to the scaffolded app.

Page generator

When React Router DOM is enabled, the project includes a built-in page generator.

npm run generate:page about

This will create:

• src/pages/about/index.ts
• src/pages/about/lazy.ts
• src/pages/about/page.tsx

If the standard router files are present, the generator will also register the page automatically in:

• src/app/providers/router/types/index.ts
• src/app/providers/router/model/config/index.ts
• src/app/providers/router/model/router/index.tsx

If prerender is enabled, the generator also configure the new route for it automatically.

You can customize generator targets inside scripts/generate/page.mjs:

• ROUTER_TYPES_PATH
• ROUTER_CONFIG_PATH
• ROUTER_FILE_PATH
• PRERENDER_ROUTES_PATH

Please note, that route auto-registration relies on special marker comments @route-... & @prerender-... inside the router files. Do not remove these markers unless you want to disable automatic updates!

🌟 Prerender

When Prerender is enabled, the generated project gets a postbuild prerender step powered by Puppeteer.

Files:

• prerender.routes.mjs
• scripts/prerender.mjs

Example prerender.routes.mjs:

export default async function getPrerenderRoutes() {
    return [
        '/',
        '/about',
        // @prerender-routes
    ];
}

Useful commands inside the generated project:

# Builds webpack assets only
npm run build:assets

# Renders configured routes into static HTML
npm run prerender

# Runs build:assets && prerender
npm run build

📦 Requirements

• Node.js 18.18 or higher
• npm, pnpm, or yarn

🔥 Quick start

Create a new app interactively:

npm create alistt69-kit@latest

Follow the prompts — or skip them entirely:

npm create alistt69-kit@latest my-app -- --defaults

🛠️ Usage examples

# Interactive setup
npm create alistt69-kit@latest my-app

# All defaults, no prompts
npm create alistt69-kit@latest my-app -- --defaults

# Skip dependency installation
npm create alistt69-kit@latest my-app -- --no-install

# Enable only selected features
npm create alistt69-kit@latest my-app -- --features=eslint,react-router

# Enable all optional features
npm create alistt69-kit@latest my-app -- --features=all

# Use pnpm as package manager
npm create alistt69-kit@latest my-app -- --pm pnpm

# Overwrite existing directory
npm create alistt69-kit@latest my-app -- --defaults --overwrite

⚙️ CLI options

| Option | Alias | Description | |---------------------|--------|-------------| | --defaults | -def | Skip prompts, use defaults | | --overwrite | — | Overwrite target directory if it exists | | --no-install | — | Skip dependency installation | | --features <list> | — | Enable specific features (agents-md, eslint, stylelint, autoprefixer, react-router, prerender) | | --pm <name> | — | Choose package manager (npm, pnpm, yarn) | | --help | -h | Show help |

🧪 Default behavior

• All features are enabled by default
• Package manager: npm (can be overridden with --pm)
• Dependencies are installed automatically (skip with --no-install)

📄 License

MIT — free and open for everyone.

See LICENSE.