juniorpb/r3-ts-cli

React, Redux and Router v4 Generator (Typescript version)

R3-TS-CLI

Create React applications with server-side rendering using Redux and Router v4. Simple and very fast! This CLI is a Typescript version of module R3-CLI.

Installation

Run the command below, to have the module installed globally:

npm install -g r3-ts-cli

Javascript version

For using Javascript version please access: R3-CLI

Usage

To see commands avaliable, run a single command with argument:

r3-ts-cli --help

To create a new Project, run the command:

r3-ts-cli

or

r3-ts-cli -c my-app

It will create a directory called my-app inside the current folder.

You will found the initial Project structure:

my-app
├── .gitignore
├── package.json
├── README.md
├── node_modules
└── src
    ├── @types
    ├── app
    │   │
    │   ├── assets
    │   │   ├── fonts
    │   │   ├── images
    │   │   └── styles
    │   │
    │   ├── redux
    │   │   ├── ducks
    │   │   │   ├── home
    │   │   │   │   ├── actions.ts
    │   │   │   │   ├── index.js
    │   │   │   │   ├── sagas.js
    │   │   │   │   └── types.js
    │   │   │   │
    │   │   │   ├── rootReducer.ts
    │   │   │   ├── rootSagas.ts
    │   │   │   └── types.ts
    │   │   │
    │   │   ├── store
    │   │   │   ├── index.ts
    │   │   │   └── types.ts
    │   │   │
    │   │   └── utils
    │   │
    │   ├── lang
    │   ├── view
    │   │   ├── controller
    │   │   ├── pages
    │   │   │   ├── home
    │   │   │   │   ├── __test__
    │   │   │   │   ├── HomeStyles.ts
    │   │   │   │   ├── types.ts
    │   │   │   │   ├── Home.tsx
    │   │   │   │   └── HomeContainer.tsx
    │   │   │   │
    │   │   │   └── page-not-found
    │   │   │       └── PageNotFound.tsx
    │   │   │
    │   │   ├── shared
    │   │   │   └── SharedComponent.tsx
    │   │   │
    │   │   ├── templates
    │   │   │   ├── OutStyles.ts
    │   │   │   ├── In.tsx
    │   │   │   └── Out.tsx
    │   │   │
    │   │   └── Imports.ts
    │   │
    │   └── mobile (future feature)
    │
    ├── client
    ├── config
    ├── server
    │   ├── excludesExtensions.js
    │   ├── index.js
    │   ├── server.js
    │   └── template.js
    │
    └── utils

Running your new Project

Inside the newly created Project, you need to set a Node version:

Requisite

NVM

To easily switch Node versions for your Project, You can use NVM command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
source ~/.bashrc
nvm install
nvm use

Running

Afterward you can run some built-in commands:

npm start:dev

or

yarn start:dev

Your Project is ready to be accessed. Your can run the command npm ls or yarn ls to view available commands.

Creating a new Route

To create a new route on your Project run the command bellow:

r3-ts-cli --route

A new route and view will automatically be created. It will be created the files:

./src/app/view/page/newView

NewViewStyles.ts
type.ts
NewView.tsx
NewViewContainer.tsx

If you option to create a Redux structure it will be created the files:

./src/app/redux/ducks/newView

actions.ts
index.ts
sagas.ts
types.ts

So, enjoy the plugin and Thank you for use it!

Reginaldo Morais