@genesisx/react-archetype/README.md

React-archetype is a cli tool (or a generator) that will generate apps based on the rendering pattern (CSR,SSR, SSG, ISR etc) of your choice.

# React Archetype Plugin

React Archetype is a cli tool designed to facilitate the creation of reactive applications. It allows you to generate apps based on different rendering strategies and architectural patterns.

![npm](https://img.shields.io/npm/v/@genesisx/react-archetype?logo=npm)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@genesisx/react-archetype)

Badges from [Shields](https://shields.io/)

## Table of Contents

- [Consumers Section](#consumers-section)
  - [Aim](#aim)
  - [Templates](#templates)
  - [How To Use](#how-to-use)
  - [CLI Arguments](#cli-arguments)
  - [Testing The App](#testing-the-app)
- [Roadmap](#roadmap)
- [Contributors Section](#contributors-section)

## Consumers Section

### Aim

Our aim is to make app generation as **_easy_** and **_compatible_** as possible. The goal is to provide **_unopinionated templates_** with the latest tools and technologies that are available in the market.

> **_NOTE:_**
>
> **Ease of use:** All you need to do is run a single command ([usage](#how-to-use)) and answer a few questions.
>
> **Compatibility:** The tool is built in such a way that it can be used in any project.
>
> **Flexibility:** The generated templates are fairly opinionated but will be made more flexible very soon.

### Templates

1. REACT
   - CSR with Webpack
   - SSR with Webpack
   - CSR with Vite
   - SSR with Vite
2. NEXT v14

> Read this amazing [blog by Flavien Bonvin](https://www.flavienbonvin.com/data-building-strategy-for-nextjs-app/) to learn more about the different rendering strategies.

### How To Use

#### Method 1: Installing the Package Globally

- Install the package globally,

  ```bash
  npm i -g @genesisx/react-archetype
  ```

- Go to the directory where you want to use this tool.

- Open up the terminal and run the command,
  
  ```bash
  ra
  ```

#### OR

  ```bash
  react-archetype
  ```

#### Method 2: Using `npx`

- Go to the directory where you want to use this tool.
- Open up the terminal and run the command,

  ```bash
  npx @genesisx/react-archetype
  ```

- Provide the input to the prompts and finally, you should have your application ready.

> This tool can be used to create a new standalone app/project. It can also be used as a micro app generator in a NX, Turbo or Lerna based monorepo workspaces.

### CLI Arguments

You can rely on some of the custom cli arguments that react-archetype comes with.

If you have react-archetype globablly installed, you use the following command,

```bash
ra <cli-argument>
```

#### OR

```bash
react-archetype <cli-argument>
```

If you are using npx, use the below command,

```sh
npx @genesisx/react-archetype <cli-argument>
```

where cli-argument is one of:

- --list, -l, --info, -i, --version, -v, --no-install, -ni

| cli argument                | description                                                                                                       |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **--info** or **-i**        | logs necessary information on how to use the tool with different arguments                                        |
| **--version** or **-v**     | logs the version of react-archetype package installed in the system or the version used to generate app |
| **--list** or **-l**        | logs the list of existing apps in a monorepo generated using react-archetype                            |
| **--no-install** or **-ni** | generates app without installing the dependencies                                                                 |

### Testing The App

The steps to run the app will be displayed in the terminal.

1. **_New Project_**

   - Go inside the app directory

     ```bash
     cd <appName>
     ```

   - Run the serve command

     ```bash
     #using npm
     npm run dev

     #using yarn
     yarn dev

     #using pnpm
     pnpm dev
     ```

2. **_Existing Project_** - Run the serve command

   ```
   # using npm
   npm run dev -w=<app_name>

   # using yarn
   yarn workspace <app_name> dev

   # using pnpm
   pnpm --filter <app_name> dev
   ```

   Refer the `package.json` file of the generated app to learn more about the other commands.

## Roadmap

Here are the templates and few items from the backlog that are in progress and will available in the next release:

- Static Site Generation with Next.js
- Incrementatal Static Regeneration with Next.js
- Other than these Nextjs based apps, we will be making the react-archetype generator more robust.
- More features will be added to the existing templates.
- Documentation improvement is also something that is on high priority along with the new templates.
- More modern rendering strategies and architectural patterns:
  - Partial hydration
  - Progressive hydration or Streaming SSR with Server Components
  - SSR with Resumability
  - Islands architecture
  - Edge Side rendering

For the future releases, React Archetype will come up with <span title="A feature or utility that can be added on to an existing app or a project">
**_"<u>add-ons</u>"_**
</span>,
more versatility and Flexibility in terms of the technology of choice and more templates for different technologies.

## Contributors Section

See [CONTRIBUTING.md](CONTRIBUTING) on how to get started.