@ionic-sveltekit/create

A command-line tool for creating new projects using SvelteKit and Ionic Framework.

Overview

This CLI tool simplifies the process of setting up a new SvelteKit project with Ionic UI components for web and mobile applications. It provides an interactive setup process with sensible defaults while allowing advanced configuration via command-line options.

Installation

You can use the tool directly via npx without installing it:

npx @ionic-sveltekit/create my-app

Or you can install it globally:

npm install -g @ionic-sveltekit/create

Usage

Interactive Mode

The easiest way to use the tool is in interactive mode:

npx @ionic-sveltekit/create

This will prompt you to enter:

• Project name
• TypeScript preferences
• Code quality tools (ESLint, Prettier)
• Testing frameworks (Playwright, Vitest)
• Ionic components options (Ionicons, Capacitor)

Non-Interactive Mode

You can skip the prompts by using the --defaults flag:

npx @ionic-sveltekit/create my-app --defaults

This will create a project with default settings.

Command-Line Options

You can customize your project by providing command-line options:

npx @ionic-sveltekit/create my-app [options]

Available Options

| Option | Description | Default | | --- | --- | --- | | --path <path> | Location to install (project name is appended) | . | | --types <type> | Add type checking with TypeScript | typescript | | --eslint [boolean] | Add ESLint for code linting | true | | --prettier [boolean] | Add Prettier for code formatting | true | | --playwright [boolean] | Add Playwright for browser testing | false | | --vitest [boolean] | Add Vitest for unit testing | false | | --ionicons [boolean] | Include Ionic icon library | true | | --capacitor [boolean] | Install dependencies for Capacitor | false | | --verbose | Show detailed output for troubleshooting | false | | --defaults | Skip all prompts and use default values | false |

Examples

Create a new project with default settings:

npx @ionic-sveltekit/create my-app --defaults

Create a project with specific options:

npx @ionic-sveltekit/create my-app --types typescript --eslint --prettier --capacitor

Create a JavaScript-only project:

npx @ionic-sveltekit/create my-app --types none

Create a project with TypeScript using JSDoc comments:

npx @ionic-sveltekit/create my-app --types checkjs

Project Structure

The created project will have the following structure:

my-app/
├── src/
│   ├── lib/
│   │   ├── components/    # Reusable Svelte components
│   │   └── images/        # Project images
│   ├── routes/            # SvelteKit routes
│   └── theme/             # Ionic theme files
├── static/                # Static assets
├── .env                   # Environment variables
├── svelte.config.js       # SvelteKit configuration
└── package.json           # Project dependencies

If Capacitor is enabled, a capacitor/ directory and capacitor.config.json|ts file will also be created.

Features

• SvelteKit Integration: Creates a SvelteKit project with Ionic UI components
• TypeScript Support: Full TypeScript support with optional JS+JSDoc alternative
• Code Quality: Optional ESLint and Prettier integration
• Testing: Optional Playwright and Vitest setup
• Mobile Development: Optional Capacitor integration for mobile app deployment
• Ionic Components: Pre-configured Ionic theme and components

Next Steps After Creation

After creating your project:

1. Navigate to the project directory: cd my-app
2. Start the development server: npm run dev -- --open

For Capacitor Projects

If you enabled Capacitor:

1. Install platform-specific packages:

   npm i @capacitor/android
   # and/or
   npm i @capacitor/ios

2. Add platforms:

   npx cap add android
   # and/or
   npx cap add ios

3. Build your app:

   npm run build

4. Sync the build with Capacitor:

   npx cap sync

5. Open the project in the native IDE:

   npx cap open android
   # or
   npx cap open ios

Hot Module Replacement with Capacitor

• For TypeScript projects: Use the -hmr flag with Capacitor commands
• For JavaScript projects: Rename _server to server in capacitor.config.json

Resources

• TypeScript Documentation
• ESLint Plugin for Svelte
• Prettier Documentation
• Playwright Documentation
• Vitest Documentation
• Capacitor Documentation
• Ionic Icons Documentation
• PWA Documentation

Issues and Support

If you encounter any issues or need help, please report them at: GitHub Repository

License

MIT