create-opswat-react-app

CLI tool to scaffold React apps with Vite, TypeScript, Tailwind CSS, and SWR.

Usage

# Basic usage
npm create opswat-react-app@latest my-app

# With OPSWAT UI design system
npm create opswat-react-app@latest my-app --includeUI -t npm_xxxxx

# Or use interactive prompts
npm create opswat-react-app@latest my-app
# You'll be prompted:
# ? Install @opswat/ui design system? (y/N)
# ? NPM Token for @opswat/ui (required): ***

What's Included

• ⚡️ Vite - Fast build tool with HMR
• ⚛️ React 18 + TypeScript
• 🎨 Tailwind CSS - Pre-configured with custom animations
• 🔄 SWR - Data fetching and caching library
• 🔧 ESLint - Configured for React
• 📝 Example components - Working demo with state and data fetching

CLI Options

| Option | Alias | Description | Required | | -------------------- | ----- | -------------------------------- | ------------------ | | --includeUI | -u | Include @opswat/ui design system | No | | --npmToken <token> | -t | NPM token for @opswat/ui | Yes (if includeUI) |

Development

Project Structure

create-opswat-react-app/
├── src/
│   └── index.ts           # CLI tool source
├── template/              # React app template (gets copied to user projects)
│   ├── src/
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── index.css
│   ├── public/
│   ├── gitignore          # Renamed to .gitignore when copied
│   └── ...config files
├── dist/                  # Built CLI (generated)
├── package.json           # CLI package metadata
└── tsconfig.json

Making Changes

# 1. Edit template files or CLI source
vim template/src/App.tsx
# or
vim src/index.ts

# 2. Build
npm run build

# 3. Test locally (before publishing)
cd /tmp
node /Users/nicolae.savilencu/Desktop/blueline-blueprint/dist/index.js test-app

# 4. If all looks good, bump version and publish
npm version patch   # 1.0.7 -> 1.0.8
npm publish

# 5. Optionally commit to git
git add .
git commit -m "Update template"
git push
git push --tags

Testing Locally

Test without publishing to npm:

# Build
npm run build

# Run directly
cd /tmp
node /path/to/blueline-blueprint/dist/index.js my-test-app
cd my-test-app
npm install
npm run dev

Publishing Updates

When you make changes to the template:

1. Edit files in template/ folder
2. Build: npm run build
3. Bump version: Update version in package.json
4. Publish: npm publish
5. Users get updates with: npm create opswat-react-app@latest

Note: npm publishes from your local files, not from git. You can publish without committing, but it's recommended to commit first for version tracking.

For Teams Using This Tool

After creating a project:

cd my-app
npm install              # Installs all dependencies
npm run dev              # Start dev server at http://localhost:5173
npm run build            # Build for production
npm run lint             # Run ESLint
npm run preview          # Preview production build

With @opswat/ui

If you included the design system:

1. The .npmrc file contains your NPM token (automatically added to .gitignore)
2. npm install will fetch @opswat/ui using the token
3. If install fails, verify your token is valid
4. The token is only used during npm install, not during scaffolding

Security

• ✅ NPM tokens are stored in .npmrc (automatically added to .gitignore)
• ✅ Tokens are entered as password fields (hidden input)
• ✅ Tokens are validated during npm install, not during project creation
• ⚠️ Never commit .npmrc to git

Requirements

• Node.js 20.19+ or 22.12+ (required by Vite)
• npm, yarn, or pnpm

Current Version

Latest published version: 1.0.7

Check current version:

npm view create-opswat-react-app version

Troubleshooting

"Package not found" error

# Clear npm cache
rm -rf ~/.npm/_npx
npm create opswat-react-app@latest my-app

Template linter errors in IDE

The template/ folder shows TypeScript/linter errors because it doesn't have node_modules installed. This is normal - the errors disappear in generated projects after npm install.

Testing specific version

# Force specific version (bypasses cache)
npm create [email protected] my-app

License

MIT