@composi/create-composi-app:

• create-composi-app
• Install
• Usage

Usage

How to Create Projects

As mentioned in the install documentation, you create a default new project on your desktop by running composi-create-app using the -n flag followed by a project name:

create-composi-app -n "My Proj"

You can create a project at a specific place by use the -p flag followed by the path for the project:

create-composi-app -n "My Proj" -p "~/dev/personal-projects

This would create the project "My Proj" at "~/dev/person-projects".

Build & Launch

Use the terminal to cd to the project folder and run:

npm i && npm start

This will install the project's dependencies, build the project, start watchers and launch the project in your default browser. Any changes you make to the files in the project's src folder will trigger another build and reload the updated code in the browser.

Other Tasks

Every Composi project comes set up for several other useful tasks. These involve linting, clearing out the project's dist folder, and creating a production-ready version of the project.

Eslint

If you have your project running, you can open another tab in your terminal, cd to your project and run:

npm run lint

Your project has an .eslintrc.json file at the root of the project. You can edit this to have the linting work the way you want.

If your project's JavaScript in the src folder violates and Eslint rule, you'll get the line number and rule broken output to the console. Use that information to fix the problem.

Read the eslint rules documentation to learn how to custize the linting.

Prettier

The project comes configured to run Prettier on your source code. Just cd to the project and run:

npm run format

The default is to convert double quotes to single one and remove all unnecessary semi-colons. If you would rather have double quotes by default and cherish the sight of semi-colons in your code, open the package.json file. Then change this line:

"format": "prettier --no-semi --single-quote --write ./lib/*.js"

To:

"format": "prettier --write ./lib/*.js"

Clean and Rebuild

The final files that you need are output to the dist folder. Over a period of time it's possible that this folder hold the output of files that are no longer in your src folder. You can clean up and repopulate the dist folder with the following command:

npm run clean && npm run build:fresh

If you want to launch your project after clean, then run this:

npm run clean && npm start

Production Build

To create a production build of your project, cd to the folder and run:

npm run build:production

This will create a new folder in the same directory as your project, but with "-production" appended to its name. For example, if your project name was "my-proj", creating the production version would create a folder next to it named: "my-proj-production". Inside this project you will find the index.html file and the dist folder. You can put these wherever they need to be for production. All links in the index.html are aboslute, so the location of the dist folder can be in the public folder, or however you server works.

About CSS

Since the baseline for Composi is modern browsers, we don't think you really need Sass or Less any more. If you look in the project's CSS, you'll see that it uses CSS variables for colors. Technically these are called custom properties. They work the same as variables in Sass and Less. If you use BEM, than you'll have no need for nested selectors. These are slower any way. And for layout you can use flex box and CSS grid layout.

Shortcut

In case you don't like typing create-composi-app all the time, you can create a shortcut for use in the terminal. For Linux and macOS, open your .bashprofile, or create one if you do not have one, and add the following:

alias cca="create-composi-app"

After saving, restart the terminal and you can now use cca instead of create-composi-app. For Windows, open the prompt and run:

doskey cca=create-composi-app