📦 Parcel Starter Boilerplate

The template is a basic framework for developing static web projects using the Parcel builder.

Template features

• Parcel: Uses Parcel to build your project quickly and efficiently.
• ES6 & TypeScript: The supports ECMAScript 6 (ES6) alongside TypeScript, providing a powerful environment for development with modern JavaScript features and static typing.
• SCSS: Eenhanced CSS, allowing the use of variables, nesting, mixins, and other features.
• ESLint and Stylelint: Code Quality Tools, supports to ensure code quality according best practices.
• Prettier: Code Formatting Tool, supports for code formatting, ensuring a consistent style.
• PostCSS and PostHTML: The Tools for code conversion using plugins that perform various CSS and HTML processing operations:
  • postcss-uncss: Removes unused styles.
  • posthtml-attrs-sorter: Sorts HTML attributes.
  • posthtml-modules: Imports and processes HTML modules.

Features of the template structure:

.
├── src                 # Source files
│   ├── scripts         # Script files
│   ├── styles          # Style files
│   └── templates       # Part of HTML files
├── dist                # Compiled files.
├── assets              # Asset files
├── public              # Public files
└── ...

• dist/: This directory is created only after the project is built, and each time a build is performed, the previous directory is permanently replaced.
• assets/: The build tool adds only those files specified in the code to the build from this directory.
• public/: When building a project, all contents of the this directory will be automatically copied to the root of the built project.

Before you get started

Before you get started, it is recommended to do a little cleanup of the template from the demo data.

Here is the list of files you can safely delete:

• src/images/example.png
• src/scripts/modules/example.ts
• src/styles/components/example.scss
• src/templates/example.html
• assets/favicon.ico

Also remove all mention of example data from:

• src/scripts/main.ts
• src/styles/main.scss
• src/index.html

Run Locally

1. Clone the repo from your terminal:

git clone https://github.com/mrtoxas/parcel-starter-boilerplate

2. Go to your project folder:

cd parcel-starter-boilerplate

3. Install dependencies:

yarn install

4. After installation, run:

yarn start

5. It will open your browser: http://localhost:1234

Build

To build the project, run:

yarn build

After running the build command, the 'dist' directory will be created in the root directory of your project.

Other scripts

To run these scripts, use yarn script_name:

• clear: Deleting temporary files and directories.
• fix:all: Running scripts to fix syntax and style errors in code.
• lint:scripts: Checking the syntax of TypeScript files with ESLint.
• lint:scripts:fix: Fixing syntax errors in TypeScript files with ESLint.
• lint:styles: Checking the syntax of SCSS files with Stylelint.
• lint:styles:fix: Fixing syntax errors in SCSS files.
• prettier:scripts: Checking the formatting of TypeScript files with Prettier.
• prettier:scripts:fix: Fixing TypeScript file formatting with Prettier.
• prettier:styles: Checking the formatting of SCSS files with Prettier.
• prettier:styles:fix: Fixing SCSS file formatting with Prettier.

Deploy to Hosting & Fork to a New Repository