@dscodotco/theme-cli
Version:
A CLI tool for developing Shopify themes
229 lines (175 loc) • 4.58 kB
Markdown
# Getting Started with Theme CLI
This guide will help you get started with Theme CLI, a powerful tool for Shopify theme development.
## Prerequisites
- Node.js (v16 or higher)
- npm or yarn
- A Shopify store with admin API access
- Basic knowledge of Shopify theme development
## Installation
### Global Installation (Recommended)
```bash
npm install -g @dscodotco/theme-cli
```
or using yarn:
```bash
yarn global add @dscodotco/theme-cli
```
### Project Installation
```bash
npm install --save-dev @dscodotco/theme-cli
```
or using yarn:
```bash
yarn add --dev @dscodotco/theme-cli
```
## Quick Start
1. **Create a new theme project**
```bash
theme-cli init my-theme
cd my-theme
```
2. **Set up environment variables**
Create a `.env` file in your project root:
```env
SHOPIFY_STORE_NAME=your-store.myshopify.com
SHOPIFY_API_KEY=your_api_key
SHOPIFY_API_PASSWORD=your_api_password
SHOPIFY_THEME_ID=123456789
```
3. **Start the development server**
```bash
theme-cli dev
```
Your theme will be available at `http://localhost:3000`
## Basic Commands
### Initialize a New Theme
```bash
theme-cli init [name]
```
Options:
- `--template <name>` - Use a specific theme template (default: "blank")
- `--typescript` - Initialize with TypeScript support
- `--force` - Overwrite existing directory
### Development Server
```bash
theme-cli dev
```
Options:
- `--port <number>` - Specify port number (default: 3000)
- `--host <host>` - Specify host (default: localhost)
- `--https` - Enable HTTPS
- `--watch` - Enable file watching (default: true)
### Deploy Theme
```bash
theme-cli deploy
```
Options:
- `--env <environment>` - Deploy to specific environment
- `--backup` - Create backup before deploying
- `--force` - Skip confirmation prompt
## Project Structure
A typical theme project structure:
```
my-theme/
├── .env # Environment variables
├── package.json # Project configuration
├── theme.config.js # Theme CLI configuration
├── assets/ # Theme assets
│ ├── scripts/
│ └── styles/
├── config/ # Theme configuration
│ └── settings_schema.json
├── layout/ # Theme layouts
├── sections/ # Theme sections
├── snippets/ # Theme snippets
└── templates/ # Theme templates
├── index.liquid
├── product.liquid
└── collection.liquid
```
## Configuration
### theme.config.js
```javascript
module.exports = {
development: {
store: process.env.SHOPIFY_STORE_NAME,
themeId: process.env.SHOPIFY_THEME_ID,
password: process.env.SHOPIFY_API_PASSWORD,
ignore: [
'settings_data.json',
'.git',
'.env'
],
deployIgnore: [
'settings_data.json',
'node_modules',
'.git',
'.env'
]
},
production: {
// Production-specific configuration
}
};
```
### Package Scripts
Add these scripts to your `package.json`:
```json
{
"scripts": {
"dev": "theme-cli dev",
"build": "theme-cli build",
"deploy": "theme-cli deploy",
"lint": "theme-cli lint",
"test": "theme-cli test"
}
}
```
## Development Workflow
1. **Start Development Server**
```bash
npm run dev
```
This will:
- Start the development server
- Watch for file changes
- Enable hot reload
- Provide API endpoints for theme data
2. **Make Changes**
- Edit theme files in your preferred editor
- Changes are automatically synced
- View changes at `http://localhost:3000`
3. **Test Your Theme**
```bash
npm run test
```
This will:
- Run theme linting
- Check for common issues
- Validate theme structure
4. **Deploy Your Theme**
```bash
npm run deploy
```
This will:
- Build production assets
- Upload theme files
- Update theme settings
## Next Steps
- Read the [Core Concepts](./core-concepts.md) guide
- Explore the [API Reference](./api/README.md)
- Check out the [Tutorials](./tutorials/README.md)
- Learn about [Contributing](./development/contributing.md)
## Troubleshooting
If you encounter issues:
1. Check the [Troubleshooting Guide](./troubleshooting.md)
2. Verify your environment variables
3. Check your Shopify API access
4. Review the console for errors
5. Check the Theme CLI logs
## Support
- [GitHub Issues](https://github.com/dsco/theme-cli/issues)
- [Documentation](https://docs.dsco.dev/theme-cli)
- [Community Discord](https://discord.gg/dsco)
## License
MIT License - see [LICENSE](../LICENSE) for details