React Archetype

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.

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.

info

Ease of use: All you need to do is run a single command, npx @genesisx/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
   • v12
   • v13

info

Read this amazing blog by Flavien Bonvin 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,

npx @genesisx/react-archetype@latest

• Provide the input to the prompts and finally, you should have your application ready.
• Refer Project Overview section to learn more about the tool and on how/where to use it.

info

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 @genesisx/react-archetype <cli-argument>

where cli-argument is one of:

• --list, -l, --info, -i, --version, -v

  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

Testing The App

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

1. New Project

   • Go inside the app directory

     cd <appName>
   • Run the serve command
     npm

     npm run dev

     yarn

     yarn dev

     pnpm

     pnpm dev

2. Existing Project (inside a monorepo workspace)

   • Run the serve command
     npm

     npm run dev -w=<appName>

     yarn

     yarn workspace <appName> dev

     pnpm

     pnpm --filter <appName> dev

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

Project Overview

(Click on the image to see it in a new tab)

info

The questions asked/inputs taken from the CLI will change with time and the documentation/image will be updated accordingly.

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 "add-ons", more versatility and Flexibility in terms of the technology of choice and more templates for different technologies.