Practical examples of using ForSure for different project types and workflows.
Explore different project structures you can create with ForSure:
Create a complete React application structure:
root { name: "react-app", version: "1.0.0" }:
# Source code
- src:
- App.tsx { entry: true }
- index.tsx
- components:
- Header.tsx
- Footer.tsx
- Button.tsx { test: true, storybook: true }
- hooks:
- useAuth.ts
- useApi.ts
- utils:
- helpers.ts
- styles:
- globals.css
- components.css
# Public assets
- public:
- index.html
- favicon.ico
- images/
# Configuration
- package.json { auto-update: true }
- tsconfig.json
- vite.config.ts
- .gitignore
- README.md { template: "react" }# Generate the React application
forsure generate react-app.forsure --output ./my-react-app
# Generate with TypeScript support
forsure gen component -n UserProfile --template react --typescript --test --storybook
# Setup the development environment
forsure setup --template reactCreate a Node.js API project structure:
root { name: "node-api", version: "1.0.0" }:
# Source code
- src:
- server.ts { entry: true }
- app.ts
- routes:
- auth.ts { middleware: "auth" }
- users.ts { validation: true }
- products.ts { cache: true }
- middleware:
- auth.ts
- cors.ts
- validation.ts
- services:
- user.service.ts
- product.service.ts
- models:
- user.model.ts
- product.model.ts
- utils:
- database.ts
- logger.ts
- errors.ts
# Configuration
- config:
- default.json
- development.json { env: "development" }
- production.json { env: "production" }
# Tests
- tests:
- unit/
- integration/
- e2e/
# Documentation
- docs:
- api.md
- setup.md
# Project files
- package.json { scripts: ["start", "test", "build"] }
- tsconfig.json
- .env.example
- .gitignore
- README.mdCreate a design system project with components:
root { name: "design-system", version: "1.0.0" }:
# Design tokens
- tokens:
- colors.ts
- typography.ts
- spacing.ts
- shadows.ts
# Components
- components:
- Button:
- Button.tsx { storybook: true, test: true }
- Button.stories.tsx
- Button.test.tsx
- Card:
- Card.tsx { storybook: true, test: true }
- Card.stories.tsx
- Card.test.tsx
- Input:
- Input.tsx { storybook: true, test: true }
- Input.stories.tsx
- Input.test.tsx
# Hooks
- hooks:
- useTheme.ts
- useResponsive.ts
# Utilities
- utils:
- cn.ts
- styles.ts
# Storybook
- .storybook:
- main.ts
- preview.ts
# Build output
- dist/
# Configuration
- package.json { build: "rollup", test: "jest" }
- rollup.config.js
- jest.config.js
- tsconfig.json
- tailwind.config.js
- .gitignore
- README.md# Generate design system
forsure generate design-system.forsure --output ./my-design-system
# Generate design tokens
forsure design tokens --format css --watch
# Generate a new component
forsure gen component -n Modal --template design-system --typescript --test --storybookSet up a complete project from scratch:
# 1. Initialize a new project
forsure init my-project.forsure
# 2. Edit the project structure
# (edit my-project.forsure file)
# 3. Generate the project
forsure generate my-project.forsure --output ./my-project
# 4. Setup development environment
cd my-project
forsure setup
# 5. Install dependencies
npm install
# 6. Start development
npm run devEfficient component development with ForSure:
# Generate a new component
forsure gen component -n DataTable --template data --typescript --test --storybook
# Generate a custom hook
forsure gen hook -n useDataTable --template api --typescript --test
# Generate a utility function
forsure gen utility -n formatCurrency --typescript --test
# Update design tokens
forsure design tokens --format css --watch
# Run tests
forsure test --coverage
# Build for production
forsure build --productionMigrate an existing project to use ForSure:
# Analyze existing project
forsure analyze ./existing-project
# Generate ForSure file from existing structure
forsure extract ./existing-project --output project.forsure
# Review and customize the generated file
# (edit project.forsure)
# Validate the structure
forsure validate project.forsure
# Generate new structure (dry run first)
forsure generate project.forsure --output ./new-project --dry-run
# Generate the actual structure
forsure generate project.forsure --output ./new-projectReuse common structures across projects:
# common-components.fs
- components:
- Button.tsx
- Input.tsx
- Card.tsx
# In your main project file
root:
@import 'common-components.fs'
- src:
- App.tsx
- pages:
- Home.tsx
- About.tsxAdd custom metadata to files and directories:
root:
- src:
- components:
- Button.tsx {
test: true,
storybook: true,
accessibility: "aa",
performance: "critical"
}
- styles:
- main.css {
minify: true,
autoprefixer: true,
critical: true
}
- config:
- database.json {
env: "production",
secrets: true,
backup: true
}Create different structures for different environments:
root:
# Common files
- src:
- App.tsx
- utils/
# Development-specific
- dev-tools:
- debug.tsx { env: "development" }
- hot-reload.js { env: "development" }
# Production-specific
- prod-config:
- cache.json { env: "production" }
- cdn.js { env: "production" }
# Test-specific
- test-utils:
- mocks.ts { env: "test" }
- fixtures.ts { env: "test" }Explore more examples and use cases: