Bricolo NPM | npm.io

bricolo

bricolo is a streamlined development tool that enhances your PHP projects by automating common tasks like launching a PHP server, live-reloading with browser sync, and automatically compiling Sass and TypeScript. With a single command, you can set up a fully integrated development environment for both front-end and back-end workflows.

Features

Launch a PHP server with automatic configuration.
Live-build and compile Sass and Typescript on file changes.
Instant browser reloading with hot reloading support.
Simple setup with one command.

Installation

To install bricolo, use npm:

npm install bricolo@latest

Ensure that you have the following dependencies installed:

Node.js (v12 or higher)
PHP (for the built-in server)

Sass and TypeScript are automatically handled, so you don’t need to worry if they aren’t pre-installed in your project.

Configuration

bricolo uses two configuration files:

A default configuration located in the package's directory (config.json)
An optional user configuration that you can create at the root of your project (bricoloconfig.json), which can override the default settings.

Default values

Here is the default configuration file config.json

{
    "phpServer": {
        "port": 8000,
        "command": "php -S localhost:{port} -t dist/"
    },
    "jsBuild": {
        "entry": "src/js/app.ts",
        "output": "dist/js/bundle.js"
    },
    "sassBuild": {
        "entry": "src/scss/styles.scss",
        "output": "dist/css/style.min.css"
    },
    "watch": {
        "directories": [
            "src/**/*"
        ]
    },
    "server": {
        "port": 8080
    }
}

Configuration parameters

phpServer.port: The port on which the PHP server will run.
phpServer.command: The command to run the PHP server (support placeholder for the port).
jsBuild.entry: Path to the TypeScript/JavaScript entry file for esbuild.
jsBuild.output: Path where the output JavaScript bundle will be generated.
jsBuild.output: Path where the output JavaScript bundle will be generated.
sassBuild.entry: Path to the Sass entry file.
sassBuild.output: Path where the compiled CSS will be saved.
server.port: The port for the live-reloading server (browser-sync).
watch.directories: List of directories or files to watch for changes to trigger browser reload.

Default structure

After installation, you can run the initiate script to create the default project structure at the root of your project. This script sets up a basic folder structure with default TypeScript and Sass files, like described in the default config.json file.

In order to run this script, please type:

npx bricolo init

You'll be prompted:

Would like to create the default structure? [no, yes]:  (no)

If you choose Y, the following structure will be created.

src/
    js/
        app.ts         # Default TypeScript file
    scss/
        styles.scss    # Default Sass file
dist/
    css/
    js/
    index.php

Example Default files

app.ts:

// Default TypeScript file
console.log("Hello, TypeScript!");

styles.scss

// Default SASS file
body {
    background-color: #f0f0f0;
}

If you prefer to skip this step, simply respond N to the prompt, and you can always create the structure manually later. Just make sure your bricoloconfig.json matches the structure of your files.

Usage

Once the package is installed and configured, we strongly recommand to add the following script in the package.json:

{
    "scripts": {
        "serve": "bricolo serve"
    }
}

Then just run the command npm run serve. Alternatively, you can directly type npx bricolo serve in you terminal, without creating a script in you package.json. This will: