code-template-generator

Breaking changes in version 3

• [Removed] classic React templates for both project and component. You can find them on the repo Build environment. We keep the app is lightweight and nothing is missing ;-).
• [New] For both project and component:
  • Using only React Hooks.
  • Support both plain JavaScript and TypeScript.

Table of contents

1. Introduction
   • Screenshot
2. Main features
   • Project templates
   • Component templates
   • User asset generation
3. Installation
4. Usage
   • Options
   • Sub options
   • Aliases
5. Examples
6. Tips and tricks for the project templates
7. Thanks you!

1. Introduction

The application is a lightweight Node.js CLI tool that is most using for front-end web development with React. Main features:

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

You build your own and have more choices for your frontend development. It makes your life easier. (^_~)

Screenshot

2. Main features

• Project generation:
  • Without running the git init command.
  • With running the git init command and generation of a .gitignore file while the project is generated from a chosen template.
• React component generation and it can be:
  • A single React component that is a file *.js, *.jsx or *.tsx.
  • A full React component that is a directory with two files *.css and *.js (or *.jsx, *.tsx) are within.
• .gitignore file generation.
• Automatic update checking for the latest stable version.
• Project templates:
  • It's simple for configuration and installation of only dependencies you need.
    • Fast and flexible.
    • Only the minimum needed dependencies are installed and preconfigured.
    • Easy to change to (or from) another build environment.
    • Compatibility with another project that is generated from create-react-app.
  • Code splitting.
  • Image handling.
  • Minification for production.
  • 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 directory /src.
  • Anti-caching.
• User asset generation -> You can retrieve your own assets from a local directory.

2.1 Project templates

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

2.2 Component templates

(*) Single component is a file with these supported extension *.js, *.jsx and *.tsx.

(**) Full component is a directory with two files *.css and *.js (or *.jsx, *.tsx) that are generated within.

2.3 User asset generation

You can retrieve your own assets from a local directory.

1. Reasons
   • You may have your own libraries, code templates and many more like .gitignore, .editorconfig, .eslinttrc.json, .eslintignore, ect.
   • You don't want to do the same things as search-copy-paste the assets many times while you are coding or starting a new project.
2. Details
   • The 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 <local-path-to-your-asset-directory>
     • generate -cf --view-asset
     • generate -m

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

3. Installation

$ npm install --global code-template-generator

System requirements:

• The minimum supported Node.js version is 8.3.0 (Node.js LTS version is a good choice for the stability).
• Administrator permission is required by your operating system for:
  • Installation of code-template-generator on global by the option --global.
  • Running the command $ generate --update 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 in version 2.2.x. It's more quickly when you enter a command line.

Examples:

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

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

4.2 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)
• --jsx
• --tsx

4.3 Aliases

5. Examples

// Project generation
$ generate first-project             // Standar and without any options

$ generate -g secondproject          // With running the `git init` command
$ generate --git ThirdProject        // Using alias --git instead of -g
$ generate -g --no-install OtherProject
$ generate --no-install LastProject  // No install dependencies

// Single component -> A file
$ generate -c SearchComponent.js
$ generate -c ReviewComponent.jsx
$ generate -c Count.tsx

// Full component -> A directory
$ generate -f ProductComponent
$ generate -f --jsx CartComponent
$ generate -f --tsx Counter

// 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 and retrieve them

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

6. Thank you!

Special thanks to Harriet Ryder!

Many thanks to Commander.js for the inspiration.