@uteamjs/template

@uteamjs/template bootstrap the creation of React-Redux & Node.js application and packages by providing the following templates:

React & Node.js Application template for use in uteam create application

React Package template for use in uteam create packages

Example templates for use in Tutorial section

Individual file template for YAML uteam generation

Installation

@uteamjs/template is installed under the uteam cli node_modules folder. Installing the uteam cli automatically installs the template.

$ npm install -g uteam

React Template

react-application

Default application template for using in uteam create application. Run the following command to create application:

$ uteam create --application <application name>

The following directories and files will be created under your <project_folder>:

//

    node_modules/

        @uteamjs/react  

        



    packages/

        main/

            config/

            ...

            src/

                index.js

            package.json



    package.json

packages/main is the only package bundled with the application created which is the entry point of the application.

The index.js is the layout container with:

Top logo and menu bar.

Responsive side tree menu .

Toastify messages.

react-packages

Default package template for adding your customized modules. Run the following command to create single or multiple packages:

$ uteam create --packages <packages name1> <packages name2> --generate

Note: --generate automatically runs uteam generate to create the JSX files.

Change to ...packages/main folder, then start the webpack development server:

$ npm start

Open your browser with URL http://localhost:3000, then click the Get Started link:

Each item on the top menu bar represents one package.

Each package has its own tree menu which can be customized through the app.yaml file.

react-redux

There are four template files used for YAML generation of JSX code:

modules.js - An index file for exporting all the components in the package.

import { lazy } from 'react'

/*route*/
/*popRoute*/

Note: The /* … */ comment statements are insertion points for code generation. Please do not delete or change the statement.

When exports switch enabled in YAML, the following pair of files are being used:

init.js - File for user to insert custom code.

exports.js - File for generation of _reducer object and _layout class to be exported.

Otherwise use the following file:

page.js - File for creating single page components.

Node.js Template

node-application

Default application template for creating @uteamjs/node application. Run the following command to create application:

$ uteam create -a <application name> -t node-application

The follow folders are created:

.//tutorial-node/

    ...

    packages/

        main/

            config.json

            package.json

            server.js

The server.js is the main entry point of the server application. Change to ...packages/main folder, then start the server using command:

$ node server

To build server packages, you can just add RESTful API component.js files under each package folder.

.//tutorial-node/

    ...

    packages/

        main/

        

            .js

            .js

Examples Template

yaml-examples

Batch of examples to illustrate YAML code generation. Run the follow command to add to your application:

$ uteam create -p yaml-examples -t yaml-examples -g

Note: The package name must be yaml-examples otherwise some broken link may appear.

yaml-crud

A full example with the following features:

Complete CRUD operation with minimal JSX code

Support co-existence of YAML and JSX code

Add-on JSX code will not be overwritten in re-generation

Please refer to the YAML CRUD tutorial for a full explanation.

Run the follow command to add to your application:

$ uteam create -p crud -t yaml-crud -g

yaml-crud-api

Similar to the yaml-crud except the CRUD action will be fetched to the backend API server.

For frontend package, run the following command to add to your application:

$ uteam create -p crud-api -t yaml-crud-api -g

Please refer to the CRUD API tutorial for a full explanation.

node-crud-api

Backend package to handle CRUD requests from the yaml-crud-api frontend. Run the following command UNDER the @uteamjs/node application created above:

$ uteam create -p crud-api -t node-crud-api

Note: --generation option is not required for backend application.

Template Update

Since the @uteamjs/template is installed in the npm global folder, it is hard to locate the directory for updating. The update process is executed through the uteam cli as follows:

$ uteam template --update

Note: npm update -g uteam may also be used to update the @uteamjs/template and other parts of the uteam cli.