Create Unifyed MFE

A lightning-fast command-line interface (CLI) for scaffolding new Unifyed microfrontends.

This tool clones a feature-rich template from a private GitLab repository, customizes it based on your preferences, and sets up a complete development environment so you can start building immediately.

✨ Features

Interactive Setup: Guides you through project creation with a series of simple questions.

Language Options: Choose between TypeScript and JavaScript for your project.

CSS Frameworks: Pre-configured support for Tailwind CSS, Bootstrap, or no framework at all.

Dynamic Configuration: Automatically sets the project name and development port throughout the entire project.

Automated Dependency Installation: Runs npm install so your project is ready to go once the setup is complete.

Branch-based Templates: Pulls the correct template variation by cloning a specific branch (react-ts-tailwind, react-js-bootstrap, etc.).

✅ Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js: Version 18.x or higher.

npm: Version 9.x or higher (usually included with Node.js).

Git: Required for cloning the template repository.

SSH Access to GitLab: You must have an SSH key configured and added to your GitLab account to access the private template repository ([email protected]:Unifyed/unifyedx/unifyed-microfrontend-template.git). You can test your connection by running ssh -T [email protected].

🚀 Installation

Install the CLI tool globally on your system using npm. This will make the create-unifyed-mfe command available in your terminal.

npm install -g @your-username/create-unifyed-mfe

(Replace @your-username/create-unifyed-mfe with your actual package name on npm if different).

Usage

Using the tool is simple. Just run the command and answer the questions.

1. Open your terminal and navigate to the directory where you want to create your new project.

2. Run the command:

create-unifyed-mfe

3. You will be prompted to enter the following information:

• Project name: The name of your new microfrontend (e.g., my-awesome-mfe).

• Select a language: Choose between TypeScript or JavaScript.

• Select a CSS framework: Choose between Tailwind, Bootstrap, or None.

• Port number: The port for the development server (e.g., 3001).

The tool will then perform the following actions:

• Clone the correct template branch from GitLab.

• Recursively scan all files and replace the placeholders APP_NAME and PORT with your inputs.

• Install all necessary npm dependencies.

Once finished, your new microfrontend project will be ready for development!

Example Workflow

$ create-unifyed-mfe

🚀 Let's create a new microfrontend!
? Project name (e.g., my-awesome-mfe): my-new-app
? Select a language: TypeScript
? Select a CSS framework: Tailwind
? Port number: 4000

⠼ Cloning template (react-tailwind-ts) from GitLab...
✔ Template cloned successfully!
⠼ Customizing project files...
✔ Project files customized.
⠼ Installing dependencies with npm...
✔ Dependencies installed.

✅ Project created successfully!

Next steps:
   cd my-new-app
   npm start

🔧 Template Placeholders

This CLI works by replacing placeholders in the template repository. If you are contributing to the unifyed-microfrontend-template, use the following placeholders where dynamic values are needed.

• APP_NAME: This will be replaced by the user-provided project name. Ideal for package.json's name field, titles in index.html, etc.

• PORT: This will be replaced by the user-provided port number. Use this in Webpack configs, .env files, or any other place the development port is defined.

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or encounter a bug, please open an issue or submit a pull request to the source repository.

Report a bug: Open an issue

Suggest a feature: Open an issue

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.