npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@genesisx/react-archetype

v2.1.4-beta0.1

Published

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.

Downloads

436

Readme

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 npm bundle size

Badges from Shields

Table of Contents

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) 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 to learn more about the different rendering strategies.

How To Use

Method 1: Installing the Package Globally

  • Install the package globally,

    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,

    ra

OR

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,

    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,

ra <cli-argument>

OR

react-archetype <cli-argument>

If you are using npx, use the below command,

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

      cd <appName>
    • Run the serve command

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

Contributors Section

See CONTRIBUTING.md on how to get started.