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.');