Getting Started

Prerequisites

WARNING

Pangolin.js is only compatible with Node.js v15. We are waiting for a dependency to add v16 support.

Create a new project

The following commands create a project in a new folder called project-name. To create a new project in the current directory use a . (dot) instead of a project name.

Choose one of the following methods:

CLI with npx

npx @pangolinjs/cli create project-name

Globally installed CLI

npm install --global @pangolinjs/cli
pangolin create project-name

Project structure

.
├── public
│   └── …
├── src
│   ├── components
│   │   └── …
│   ├── css
│   │   └── …
│   ├── docs
│   │   └── …
│   ├── main.js
│   └── main.scss
├── .browserslistrc
├── .eslintrc.cjs
├── babel.config.js
├── [pangolin.config.js]
├── postcss.config.cjs
└── stylelint.config.cjs

Configuration

FilePurpose
.browserslistrcBrowserslist configuration
.eslintrc.cjsESLint configuration
babel.config.jsBabel configuration
pangolin.config.js(Optional) Pangolin configuration
postcss.config.cjsPostCSS configuration
stylelint.config.cjsstylelint configuration

Folders

FolderPurpose
publicStatic files that will be copied as-is to the output directory.
src/componentsEverything is a component: the smallest button and the most complex page.
src/css(Changeable) Global CSS files, like variables or body styles.
src/docs(Optional) Fractal documentation pages.

Files

FilePurpose
src/main.jsThe main JavaScript entry point. Use this file to import all other JS files.
src/main.scssThe main CSS entry point. Use this file to @use all other CSS files.