# 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.

## Table of Contents

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

## 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, `npx react-archetype` 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
   - SSR
   - SSG

> 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

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

  ```bash
  npx 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. Simply run the command,

```
npx 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.