Create Project

Creating a new project with PackShip is simple and straightforward. This guide will walk you through the process of initializing a new package project.

Initialize a New Package

To create a new package project, run the following command in your terminal:

packship init

Interactive Setup Process

The packship init command will start an interactive setup process that guides you through configuring your package:

Basic Information

• Package Name: Enter a unique name for your package following npm naming conventions.
• Description: Provide a brief description of what your package does.

Language & Project Type

• Language: Choose between TypeScript (default) or JavaScript.
• Project Type: Select from options based on your language choice:
  • TypeScript options: React (with TypeScript) or Node.js (with TypeScript)
  • JavaScript options: React (with JavaScript), Node.js (with JavaScript), or Vanilla JavaScript

Author Information

• Author Name: Your name or organization name.
• Author Email: Your email address.

Project Structure & Features

• Internal Directory: Choose whether to include an internal directory for components not meant for public use.
• Webpack: Decide if you need to bundle your code using Webpack.
• ESLint: Choose whether to enforce coding standards with ESLint.
• PostCSS: Decide if your project will involve processing CSS (e.g., adding vendor prefixes).
• npmignore: Choose whether to include a .npmignore file to specify files to exclude from your npm package.

Documentation & Legal

• License: Choose whether to include a LICENSE file and select the type (MIT, ISC, Apache-2.0, or GPL-3.0).
• Code of Conduct: Decide whether to include a CODE_OF_CONDUCT.md file for community guidelines.
• README: Choose whether to include a README.md file to describe your project.

Project Structure

After initialization, PackShip will create a project with a structure based on your choices. Here's an example structure for a TypeScript React project:

my-package/
├── src/
│   ├── index.tsx        # Main entry point
│   ├── declaration.d.ts # TypeScript declarations
│   └── internal/        # (Optional) Internal components
├── types/
│   └── index.ts         # Type definitions
├── styles/              # (Optional) CSS styles
├── dist/                # Compiled output (created after build)
├── package.json         # Package configuration
├── tsconfig.json        # TypeScript configuration
├── webpack.config.js    # (Optional) Webpack configuration
├── babel.config.json    # Babel configuration
├── postcss.config.js    # (Optional) PostCSS configuration
├── .eslintrc.json       # (Optional) ESLint configuration
├── .gitignore           # Git ignore file
├── .npmignore           # (Optional) npm ignore file
├── README.md            # (Optional) Documentation
├── LICENSE.md           # (Optional) License information
└── CODE_OF_CONDUCT.md   # (Optional) Code of conduct

Key Files

src/index.tsx (or .jsx, .ts, .js)

This is the main entry point of your package. All exports that should be available to consumers of your package should be exported from this file.

package.json

Contains metadata about your package and defines scripts, dependencies, and other configuration options. PackShip automatically configures this based on your choices.

webpack.config.js (if selected)

Configures how your package is bundled. PackShip sets up a default configuration that works well for your selected project type.

Next Steps

After creating your project, you can:

• Navigate to your project directory: cd your-package-name
• Install dependencies with npm install
• Start developing your components in the src directory
• Build your package with npm run build
• Publish your package with packship publish or npm run packship:publish