Skip to content

Installation Guide

Follow these steps to install MageObsidian Components and set up your project for development.

Important: All commands must be executed from the root directory of your Magento project.

Before you begin, make sure your environment meets the Minimum Requirements.

Step 1: Install via Composer

First, add the components to your Magento project using Composer:

1
composer require mage-obsidian/component-modern-frontend

Tip: If you encounter issues with Composer, refer to the Composer Troubleshooting Guide.

Step 2: Install Node Dependencies

Ensure all necessary node dependencies are installed:

pnpm

1
pnpm --prefix vite install

npm

1
npm --prefix vite install

Note: The vite folder is autogenerated by the Composer package and contains the full Vite configuration required for the project.

Step 3: Enable new modules

Register the new components by updating Magento's configuration:

1
bin/magento setup:upgrade

Step 4: Generate Initial Configuration

Generate the initial configuration for the frontend components:

1
bin/magento mage-obsidian:frontend:config --generate

Tip: Use --help with the command for additional options:

1
bin/magento mage-obsidian:frontend:config --help

Step 5: Ready to Develop

Congratulations! The components are now configured and ready to use in your Magento project. Start building your modern theme and leverage the tools provided by MageObsidian Components.

Troubleshooting

If you run into any issues during installation, refer to these common solutions:

  • Permissions Issue: Ensure your project files have the correct ownership and permissions.
  • Configuration Error: Double-check your composer.json and Magento configuration for typos or missing dependencies.
  • Node Modules Issue: Run npm cache clean --force and reinstall dependencies if you encounter errors during installation.