DEV Community

Cover image for Scaffold React & Angular Apps in Minutes ā€” Meet polyfront scaffold šŸš€
Nirmal Samaranayaka
Nirmal Samaranayaka

Posted on • Edited on

Scaffold React & Angular Apps in Minutes ā€” Meet polyfront scaffold šŸš€

#angular #frontend #beginners #webdev

Iā€™m excited to share my new open-source CLI tool: polyfront-scaffold!

After weeks of building and testing, this tool helps you scaffold modern React (Vite/Webpack) and Angular applications in minutes, with ready-to-use presets for UI, state management, testing, and more.

šŸŽÆ What It Does

polyfront-scaffold generates production-ready frontend projects with opinionated but flexible defaults. Instead of wiring boilerplate, teams can focus on building features.

Key Highlights

  • Frameworks supported: React (Vite/Webpack) & Angular
  • UI stacks: MUI, Bootstrap, Tailwind, Ant Design, Chakra, Angular Material
  • State management (React): Redux, MobX, React Query, or none
  • Built-in utilities: HTTP clients, i18n placeholders, date libraries (moment/dayjs/date-fns), and testing setup (Jest, Vitest, Cypress, Playwright)
  • Folder structure: Clean, scalable, with .env presets
  • Cross-platform: Works on Windows, macOS, Linux
  • Node support: Fully tested on Node 20 & 22

šŸ–¼ļø Screenshots & Demo

MUI

MUI-Home

MUI-About

MUI-Dashboard

MUI-Profile

Bootstrap

Bootstrap-Home

Bootstrap-About

Bootstrap-Dashboard

Bootstrap-Profile

Tailwind

Tailwind-Home

Tailwind-about

Tailwind-Dashboard

Tailwind-Profile

Ant Design

Antd-Home

Antd-About

Antd-Dashboard

Antd-Profile

Chakra UI Design

Chakra-Home

Chakra-About

Chakra-Dashboard

Chakra-Profile

āš” Quick Start

Install globally 

npm install -g polyfront-scaffold
Enter fullscreen mode Exit fullscreen mode

Interactive wizard 

polyfront-scaffold --interactive
Enter fullscreen mode Exit fullscreen mode

Scaffold a React + Vite + MUI project 

polyfront-scaffold my-app --framework react-vite --ts --ui mui --store none --test-unit vitest --test-e2e none
Enter fullscreen mode Exit fullscreen mode

šŸ‘„ Who Is This For?

*Solo developers & freelancers ā†’ Skip repetitive boilerplate, build faster.
*Startup teams ā†’ Enforce consistent structure across multiple apps.
*Enterprise developers ā†’ Standardize scaffolding for large teams & speed onboarding.
*Educators & trainers ā†’ Spin up demo projects for workshops or bootcamps.

ā±ļø Why Use It?

Without polyfront-scaffold āŒ›: ~30+ minutes setup

npx create-react-app ...
npm install mui redux react-router ...
mkdir src/components ...
touch src/pages/Home.tsx ...

With polyfront-scaffold šŸš€: <1 minute šŸŽ‰ 

polyfront-scaffold my-app --framework react-vite --ts --ui mui --store none --test-unit vitest --test-e2e none
Enter fullscreen mode Exit fullscreen mode

šŸ’” Community Contributions

  • Experimental presets (AntD) welcome for testing.
  • Open issues, submit PRs, or give feedback via GitHub.

šŸ“¦ Try It Today

šŸ‘‰ npm : polyfront-scaffold
šŸ‘‰ GitHub Repo

ā­ Star the repo if you find it useful!

Try polyfront-scaffold today and give your productivity a boost āš”

#react #angular #frontend #opensource #cli #mui #bootstrap

Top comments (0)