Create Plume React Project

This command-line tool allows you to generate React projects with TypeScript, pre-configured with dependency injection and the observable pattern for a robust and scalable state management. It is based on the Plume framework philosophy.

⭐ Features

• React with TypeScript: Start your project with a solid foundation.
• Dependency Injection: Write modular and testable code.
• Observable Pattern: Manage your application's state in a predictable way.
• Two templates available: front and admin to fit your needs.
• Ready for production: Pre-configured with Sonar and GitLab CI.

🚀 Getting Started

To create a new project, run one of the following commands in your terminal:

With Yarn (recommended)

yarn dlx create-plume-react-project --template admin --projectName my-awesome-project

With NPX

npx create-plume-react-project@latest --template admin --projectName my-awesome-project

Note: We recommend using yarn dlx as it is generally more reliable for executing package binaries.

Once the project is created, you can run it with:

1. yarn to install the dependencies.
2. yarn start to launch the development server.

⚙️ Options

You can customize the project generation by passing options to the command:

npx create-plume-react-project@latest --[optionName] [value]

Option	Default Value	Available Values	Description
template	front	front, admin	The template to use for your project.
projectName	my-project	Any string	The name of your project. It will be used in package.json and index.html.
verbose	false	true, false	Set to true to display additional debug information during the project creation process.
targetDirectory	Current directory	Any valid absolute path	The directory where the project will be initialized.
templateDirectory	The CLI's build/templates directory	Any valid absolute path	A custom directory from which to load the templates.

🛠️ Configuration

After creating your project, you may need to perform some additional configuration steps.

SonarQube

To set up SonarQube analysis, edit the sonar-project-frontend.properties file with your project's information:

# Example
sonar.projectKey=my-project-front-ui
sonar.projectName=My Awesome Project - Front UI

GitLab CI

A .gitlab-ci.yml file is included in the project with pre-configured jobs to build and analyze your application.

If you are using this frontend project within a Plume backend project, you should:

1. Copy the content of the frontend's .gitlab-ci.yml into the backend's GitLab CI file.

2. In each job, add a cd <frontend_directory> command as the first step of the script section.

   # Example
   Front UI build:
     # ...
     script:
       - cd my-awesome-project
     # ...

3. Delete the frontend's .gitlab-ci.yml file.

💻 Development

If you want to contribute to this project, you can set up a development environment with the following steps:

1. yarn to install the dependencies.
2. yarn build to build the project.
3. npm link to create a symbolic link to the package.

You can then open a new terminal and test your changes by running:

npx create-plume-react-project@latest --template admin --projectName my-test-project

Important: Always use the @latest tag to ensure you are using the latest version of the CLI and not a cached one.

To apply your changes, you will need to run yarn build after each modification.

🗺️ Roadmap

Here are some ideas for future improvements:

• Interactive CLI: Use a library like enquirer to ask for the options interactively.
• More template options: Add modules for i18n, material-ui, forms, and session management.
• Improved terminal output: Use a library like chalk to add colors to the terminal output.
• Automatic dependency installation: Use execa or pkg-install to automatically install the dependencies after the project creation.

Contributions are welcome!