code-template-generator

Table of contents

1. Introduction
   • Screenshot
   • What's new in version 2.2.x
2. Main features
   • Supported project templates
   • Supported component templates
3. Installation
4. Usage
   • Aliases
   • Sub options
5. Examples
6. Thanks you!

1. Introduction

This is a lightweight React code template generator that is a Node.js CLI application with these main features:

• Project template generation that has a part of the Build environments project.
• Component generation.
• User asset generation.
• Utility.

You have more choices for your frontend development environment. It makes your life easier.

Screenshot

What's new in version 2.2.x

1. Reasons:
   • You may have your own libraries, code templates and many more like .gitignore, .editorconfig, .eslinttrc.json, .eslintignore, ect. You need use them while you are coding or when you start a new project. We say at they are your assets.
   • You don't want to do the same things (search/ copy/ paste) many times. You want have your assets whenever you need.
   • It makes you happy by the new feature "User asset generation" and another things are below. ;-)
2. New features:
   • User asset generation:
     • The new options, sub options and their respective aliases:
       • -cf, --config is used with its sub options:
         • --set-asset
         • --view-asset
       • -m, --my-asset
     • Syntaxes:
       • generate -cf --set-asset <path-to-your-local-directory>
       • generate -cf --view-asset
       • generate -m
   • The config file code-template-generator.json is stored at your Home directory and it depends on your platform. Examples:
     • Windows: C:\Users\<yourname>
     • Ubuntu: /home/<yourname>
     • MacOS: /Users/<yourname>
   • The new short command gen is added - You can start a command line by using one of them generate or gen.
3. Improvements for:
   • Performance.
   • Resolving handling.
   • Error handling.

(You can view how to use and examples are below for more details)

2. Main features

• Project template generation:
  • Without running the git init command.
  • With running the git init command and generation of a .gitignore file while a project is generated from a chosen template.
• Component generation:
  • There are two kinds of generated components: React and React-Redux.
  • It can become:
    • A single component that is a file *.js or *.jsx.
    • A full component that is a directory with two files *.js and *.css are within.
• .gitignore file generation.
• Automatic update checking for the latest stable version.
• Project templates:
  • It's simple for:
    • Configuration and installation for dependencies you need.
    • Using together or moving to/from another React build environment.
  • Code splitting.
  • Image handling.
  • CSS, JS code injected automatic into the HTML template /src/index.html.
  • Hot Module Replacement (HMR) is enabled.
  • You don't need to care about the distribution directory /dist. The things you care are only the source directory /src.
  • Anti-caching.
• User asset generation.

Supported project templates

You can view more details about these project templates in the repository Build environments.

Supported component templates

(*) You need install and config Redux, React-Redux by yourself.

3. Installation

$ npm install --global code-template-generator

System requirements:

• The minimum supported Node.js version is 8.3.0 (Node.js LTS is a good choice for the stability).
• Administrator permission is required by your operating system when:
  • You install code-template-generator on global by the option --global.
  • You run the command $ generate -u for the latest stable version updating.

4. Usage

$ generate [-option] [--sub-option] [project-name][component-name][path]

Tip! You can use the command gen instead of generate from version 2.2.0. It's more quickly when you enter a command line.

Examples:

• generate --version -> Main command.
• gen --version -> Short command.

Options

(*) Administrator permission is required by your operating system. Here are the examples for MacOS and Ubuntu systems by using sudo:

• $ sudo generate -u
• $ sudo generate --update (Using alias)

(**) View how to use with its sub options that are below.

Aliases

Sub options

• --no-install (No install dependencies)
• --set-asset (Set a local path to the asset directory)
• --view-asset (View the current local path to the asset directory)

5. Examples

// Project generation
$ generate first-project             // Without any options
$ generate -g secondproject          // Running `git init`
$ generate --git ThirdProject        // Using alias --git instead of -g
$ generate -g --no-install OtherProject
$ generate --no-install LastProject  // Without installation of dependencies

// Single component -> A file
$ generate -c SearchComponent.js   // React component
$ generate -r ReviewComponent.jsx  // React-Redux component

// Full component -> A directory
$ generate -fc ProductComponent
$ generate -fr CartComponent

// Asset generation
$ generate -cf --set-asset "C:\Users\name\myassets"  // Windows
$ generate -cf --set-asset "/Users/name/myassets"    // MacOS
$ generate -cf --set-asset "/home/name/myassets"     // Ubuntu
$ generate -cf --view-asset   // View the current asset location
$ generate -m                 // Show the asset list

// Others
$ generate --gitignore  // Generate a .gitignore file
$ generate --version    // View the installed version
$ generate --help       // View help documentation
$ generate --update     // Check and install the latest stable version

6. Thank you!

Special thanks to Harriet Ryder!

Many thanks to Commander.js for the inspiration.