Create Costro App

The easiest way to get started with Costro is to use create-costro-app. This CLI tool lets you quickly start creating a new Costro application, with everything set up for you. You can create a new app using the default Costro template or using one of the official Costro templates.

To create a new app, use the following command:

npx

npx create-costro-app my-app

info

npx is available in npm 5.2+.

npm

npm init costro-app my-app

info

npm init <initializer> is available in npm 6+.

yarn

yarn create costro-app my-app

info

yarn create is available in yarn 0.25+.

Features

create-costro-app lets you create a new Costro app in seconds. It comes with the following features out of the box:

• Interactive experience: Running npx create-costro-app launches an interactive experience that guides you through setting up a project.
• 100/100 Lighthouse score: Templates optimized right out of the box (Lighthouse report).
• No dependencies: create-costro-app has no dependencies.
• Ready-to-use template: The project contains webpack, Babel, postCSS, ESLint, Prettier, Jest and Browserslist.
• TypeScript support: create-costro-app provides a TypeScript template.

CLI options

create-costro-app comes with the following options:

Usage: create-costro-app [options] [directory]

Arguments:
  directory              Custom target directory

Options:
  -t, --template <name>  Specify the template name
  -v, --version          Show the Create Costro App version
  -h, --help             Display help for command

Templates

Templates contain everything set up for you and allow you to code instantly. create-costro-app comes with the following templates:

Template name	Description
default	webpack, Babel, postCSS, ESLint, Prettier, Jest and Browserslist
typescript	TypeScript, webpack, Babel, postCSS, ESLint, Prettier, Jest and Browserslist

Available scripts

npm install

Install the project dependencies.

npm run dev

Runs the application in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make changes.

npm run test

Run Jest in the interactive watch mode.

npm run lint

Run linter with ESLint.

npm run build

Builds the application for production in the build folder. It bundles Costro into production mode and optimizes the build for the best performance. The build is minified and filenames include the hashes.

Browserslist

By default, project templates include a browserslist configuration in your package.json with production and development support. Update it as needed.

Here is an example of browserslist that is specified in the package.json:

"browserslist": {
  "production": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}