Getting Started
Prerequisites
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 (preferred)
npx @pangolinjs/cli create project-name
Globally installed CLI (optional)
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
| File | Purpose |
|---|
.browserslistrc | Browserslist configuration |
.eslintrc.cjs | ESLint configuration |
babel.config.js | Babel configuration |
pangolin.config.js | (optional) Pangolin configuration |
postcss.config.cjs | PostCSS configuration |
stylelint.config.cjs | stylelint configuration |
Folders
| Folder | Purpose |
|---|
public | Static files that will be copied as-is to the output directory. |
src/components | Everything 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
| File | Purpose |
|---|
src/main.js | The main JavaScript entry point. Use this file to import all other JS files. |
src/main.scss | The main CSS entry point. Use this file to @use all other CSS files. |