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. Using
   • Sub option
   • Aliases
5. Examples
6. Thanks you!

1. Introduction

This is the lightweight React code template generator that has two main parts in one npm package:

• Project template generation that has a part of the Build environments project.
• Code template generation.

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

Screenshot

What's new in version 2.2.x

• Why?
  • You may have your own libraries, code templates and many more like .gitignore, .editorconfig, .eslinttrc.json, .eslintignore,... You need to use them while you are coding or when you start a new project.
  • You don't want do the same things (copy/ paste) many times.
  • This feature makes you happy ;-)
• New features:
  • New options: -cf, --config and -m, --my-asset.
  • Using:
    • generate -cf --set-asset <path-to-your-directory>: to store the path to a directory that has your files and sub directories. We say at they are your assets. View examples:
      • Windows: generate -cf --set-asset "C:\Users\YourName\MyAssets".
      • Ubuntu: generate -cf --set--asset "/home/yourname/myassets"
    • generate -m: to retrieve your assets into the current work directory. You can choose them by selecting. That's all.
  • Config file code-template-generator.json is stored at your Home directory and it depends on your platform. Examples:
    • Windows: C:\Users\<YourName>\code-template-generator.json.
    • Ubuntu: /home/<yourname>/code-template-generator.json.
• Improvement:
  • Performance.
  • Resolving handling.
  • Error handling.

2. Main features

• Project template generation:
  • Without Git support.
  • With Git support -> It runs automatically command git init and generates a .gitignore file while the project is generated.
• Component generation:
  • Two kinds of generated components: React and React-Redux.
  • It can become a single component that is a file *.js, *.jsx or a full component that is a directory with two files *.js, *.css are within.
• .gitignore file generation.
• Automatic update checking for the latest stable version.
• Project templates:
  • It's simple for:
    • Configuration and installation for the dependencies you need.
    • Using together with or moving to/from an other React build environment.
  • Code splitting.
  • Image handling.
  • CSS, JS code injected automatic into HTML template.
  • 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.

Supported project templates

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

Supported component templates

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

3. Installation

$ npm i -g code-template-generator

System requirements:

• The minimum supported Node.js version is 8.3.0 (Node.js LTS is a good choice for many reasons).
• Administrator permission is required when you run the command $ generate -u for the latest stable version updating.

4. Using

$ generate [option] <project-name>[<component-name>]

(*) Administrator permission is required. Here is an example for MacOS and Ubuntu system:

• $ sudo generate -u

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

Sub options

• --no-install (No install dependencies)
• --set-asset
• --view-asset

Aliases

5. Examples

// Project
$ generate first-project                 // Without Git support
$ generate -g secondproject              // With Git support
$ generate --git ThirdProject            // Using alias --git instead of -g
$ generate -g --no-install OtherProject  // Without installation of dependencies
$ generate --no-install LastProject

// 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

// Assets
$ generate -cf --set-asset "/home/name/myassets" (Ubuntu)
$ generate -cf --set-asset "C:\Users\name\myassets" (Windows)
$ generate -cf --view-asset   // View the current asset location
$ generate -m   // Retrieve asset(s)

// Other
$ generate --gitignore  // A .gitignore file
$ generate -v           // View the installed version
$ generate -help        // View the help information
$ 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.