code-template-generator

Table of contents

1. Introduction
   • Screenshot
   • Breaking changes in version 3
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

You like to build yourself development environment and install only what you need in your project. You want to know how it works and have more controll as much as possible. Sometimes you just want to have a little tool to show an idea. The application gives you a step on your way and it makes your life more exciting. (^_~)

The application is a lightweight Node.js CLI tool that is 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.

Breaking changes in version 3

• [New]
  • Project component templates:
    • Using React Hooks.
    • Support both plain JavaScript and TypeScript.
    • The project templates:
      • react-hooks (Plain JS)
      • react-sass (Plain JS)
      • react-typescript (TypeScript)
    • The component templates:
      • Plain JavaScript (*.js, *.jsx)
      • TypeScript (*.ts, *.tsx)
  • User's generation:
    • You can generate your own project template, component, config file etc. by using the option --asset.
    • You can change an asset's name when choosing only one file or directory.
• [Changed]
  • Using -a instead of -m for asset retrieving. Examples:
    • generate -a
    • generate --asset (Using alias)
• [Removed]
  • You can find other project templates in the repo Build environment. We keep the app is lightweight and nothing is missing. ;-)
  • Removed the project templates:
    • react-advance
    • react-simplification
    • simple-express-server
  • Removed the component templates:
    • React classic that is using class syntax.
    • React Redux.

Screenshot

2. Main features

• Project generation with two alternative for Git support:
  • Without Git support (default).
  • With Git support by running the git init command and generation of a .gitignore file while the project is generated from a chosen template.
• React component generation can be:
  • A single React component that is a JavaScript file (*.js, *.jsx, *.ts, *.tsx).
  • A full React component that is a directory with two files are within: a CSS file and a JS file (*.js, *.jsx, *.tsx).
• .gitignore file generation.
• Automatic update checking for the latest stable version that is found on npmjs.com.
• 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 projects that are 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's asset generation -> You can retrieve your own assets (project templates, component template, config file for ESLint, Webpack,...) from a local directory.

2.1 Project templates

You can view more details and other project templates in the repository Build environments.

2.2 Component templates

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

(**) Full component is a directory with two files are within: a CSS file and a JS file (*.js, *.jsx, *.tsx).

2.3 User asset generation

You can retrieve your own assets from a local directory.

Reasons:

• You may have your own project templates, code templates, libraries and many more like .gitignore, .editorconfig, .eslinttrc.json, .eslintignore, webpack.config.js 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.

(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.9.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 using 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 from version 2.2.x. It's more quickly when you enter a command line.

Examples:

• generate -v -> Main command.
• gen -v -> 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   // Generates a project without any options

$ generate -g secondproject   // With Git support by running 'git init'
$ generate --git ThirdProje   // Using alias --git instead of -g
$ generate -g --no-install OtherProject
$ generate --no-install LastProject  // No install dependencies

// Single component -> A JavaScript file
$ generate -c SearchService.js
$ generate -c ReviewComponent.jsx
$ generate -c CountService.ts
$ generate -c CounterComponent.tsx

// Full component
// -> A directory with two files are within (*.css, *.js|jsx|tsx)
$ generate -f Product         // Default is using *.js
$ generate -f --jsx Cart      // Using *.jsx
$ generate -f --tsx Counter   // Using *.tsx

// 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 info about the current asset location
$ generate -a                 // Show the asset list and retrieve them

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

6. Thank you!

Special thanks to Harriet Ryder!

Many thanks to Commander.js for the inspiration.