react-frontend-modules

React Frontend Modules

A React package that automatically installs frontend modules to your project's src/modules directory.

📦 What's Included

This package contains the following React components and modules:

• Inventory Module

  • pages/Inventory/index.js - Main Inventory component
  • pages/Inventory/form.js - Inventory form component

• Lands Module

  • pages/Lands/index.js - Main Lands component
  • pages/Lands/form.js - Lands form component

• Routes Configuration

  • routes.js - Pre-configured routes for all modules

🚀 Installation

Prerequisites

This package is designed to work specifically with projects in the following directory structure:

D:\python\MB_Projects\MB\BusinessEEM\react\

Install the Package

cd D:\python\MB_Projects\MB\BusinessEEM\react
npm install react-frontend-modules

What Happens During Installation

The package will automatically:

• Detect if you're in the correct directory structure
• Copy all frontend modules to D:\python\MB_Projects\MB\BusinessEEM\react\modules\
• Preserve the original directory structure

📁 Directory Structure After Installation

After installation, your modules directory will contain:

modules/
├── pages/
│   ├── Inventory/
│   │   ├── form.js
│   │   └── index.js
│   └── Lands/
│       ├── form.js
│       └── index.js
└── routes.js

💻 Usage

Import Individual Components

// Import Inventory components
import Inventory from './modules/pages/Inventory';
import InventoryForm from './modules/pages/Inventory/form';

// Import Lands components
import Lands from './modules/pages/Lands';
import LandsForm from './modules/pages/Lands/form';

// Import routes configuration
import routes from './modules/routes';

Use in Your React App

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Inventory from './modules/pages/Inventory';
import InventoryForm from './modules/pages/Inventory/form';
import Lands from './modules/pages/Lands';
import LandsForm from './modules/pages/Lands/form';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/inventory" element={<Inventory />} />
        <Route path="/inventory/form" element={<InventoryForm />} />
        <Route path="/lands" element={<Lands />} />
        <Route path="/lands/form" element={<LandsForm />} />
      </Routes>
    </Router>
  );
}

export default App;

Use Pre-configured Routes

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import routes from './modules/routes';

function App() {
  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route 
            key={index} 
            path={route.route} 
            element={route.component} 
          />
        ))}
      </Routes>
    </Router>
  );
}

export default App;

🔧 Configuration

Target Directory

The package is configured to install modules to:

D:\python\MB_Projects\MB\BusinessEEM\react\modules\

If you need to change this path, you can modify the scripts/postinstall.js file in the package.

Package Information

You can access package information programmatically:

const packageInfo = require('react-frontend-modules');
console.log(packageInfo.modules); // Lists all available modules
console.log(packageInfo.usage.importExample); // Shows import examples

🛠️ Development

Package Structure

react-frontend-modules/
├── frontend/                 # Source modules
│   ├── pages/
│   │   ├── Inventory/
│   │   └── Lands/
│   └── routes.js
├── scripts/
│   └── postinstall.js       # Installation script
├── index.js                 # Main entry point
├── package.json
└── README.md

Peer Dependencies

• React >= 16.8.0
• React DOM >= 16.8.0

📝 License

MIT License

🤝 Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

🐛 Issues

If you encounter any issues, please report them at: GitHub Issues

📞 Support

For support and questions, please contact the maintainer or create an issue on GitHub.