GrapesJS CLI

/**
 * This quickstart demonstrates the GrapesJS plugin development workflow using grapesjs-cli.
 * The commands below are intended to be run in a shell environment.
 */

// 1. Create a new directory for your plugin and initialize it
// mkdir grapesjs-my-plugin
// cd grapesjs-my-plugin
// npm init -y
// git init

// 2. Install the GrapesJS CLI as a development dependency
// npm i -D grapesjs-cli

// 3. Initialize your plugin project. Use '-y' to skip interactive questions.
// npx grapesjs-cli init -y --user=your-github-username

// 4. Start the development server. Access your plugin demo at http://localhost:8080.
// npx grapesjs-cli serve
// You can also pass custom webpack-dev-server options:
// npx grapesjs-cli serve --devServer='{"https": true}'

// 5. Build your plugin for production. This generates output in the 'dist' directory.
// npx grapesjs-cli build

// Example: Custom webpack.config.js for advanced configurations (placed in your plugin's root directory)
// This JavaScript code block is runnable as a conceptual example of the config file structure.
/** @type {import('webpack').Configuration} */
const customWebpackConfig = ({ config }) => {
    // `config` is the default webpack configuration provided by grapesjs-cli
    const isBuild = config.mode === 'production'; // Differentiate build from serve command

    return {
        ...config,
        // Example: Add a new rule for handling SVG files
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    use: ['@svgr/webpack'],
                },
                ...config.module.rules,
            ],
        },
        // Example: Customize an existing plugin or add a new one
        plugins: [
            ...(config.plugins || []),
            // new MyCustomWebpackPlugin(),
        ],
    };
};

// In a real scenario, this would be exported from a webpack.config.js file:
// export default customWebpackConfig;

console.log('GrapesJS CLI workflow and custom webpack config demonstrated.');