generator-autobotjs

Generate angular 2.x and nodejs models for autobot framework

Installation

First, install Yeoman and generator-autobot-razor using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-autobotjs

Then generate your new project:

yo autobotjs

##Usage Autobot generator is meant to be used for adding new autobot modules for both node server side app and Angular 5 client side apps.

###Starting a new project Here is a basic guideline to starting a new autobot project:

1. Create a new angular app using angular cli
2. Create a new node loopback server app using loopback cli
3. Create a new node web host server using rznode generator

There are several additions per each app that are also required ####Loopback service Once loopback service is created I prefer modifying it to support typescript and autoupdate. For that I use generator-lbts

• On the folder containing the new loopback service run via command line:

yo lbts

• Create a new datasource using

lb datasource

• Create a new data model using

lb model

• Create the database inside the db (e.g. open MySql and create an empty database using the name used when creating the datasource using 'lb datasource')

Compile and run the project to make sure everything works and that the new models were added to the database

If you need to create initial data inside the datbase for the first time (e.g. adding a super user or lookup data, it is possible to add that logic inside server\server.ts in method 'autoMigrateAction'. In addition you are required to dedine an env veriable named AUTO_MIGRATE and set its value to true. When running the app you will be prompted to approve the execution since approving it will cause the database to be re-created and all data will be lost) ####Angular client app Use Angular cli to create a new angular project by calling:

ng new <your client app name>

In the command line run:

ng build

This will build the 'dist' folder containing your packeged app

Note we are self hosting the app via our node server and therefore we will not use 'ng serve' ####Node webhost service

• In your service folder run via cmd or terminal:

yo rznode

• When prompted select generating a 'Node Service'. This will generate a basic node service supporting Typescript and express
• In order to host the client app, open server.ts file. Unmark the code placed in method 'setStaticFolders' and set the path to your client app 'dist' folder

Note - when running the server, the console will display the full path of the static folder location. Make sure that the location is correct to avoid headaches

You now have the basic apps required:

1. A Loopback service for wrapping all database calls via REST api

2. A basic node app for hosting the client app

3. A basic Angular 5+ app

###Adding an Autobot module to the server side

• Open a command under you node web server root folder and run:

yo autobotjs

• Select to generate a server side 'Node Module'
• When prompted set the module name (preferable with a plural name) and press enter
• When prompted define the port in which your loopback service is listening on (default set to 3001) and press enter
• Several folders were now added to your project including
  • routes - this will contain a file named: [module name]Router
  • managers - this will contain a file named [module name]Manager
  • jsFiles - a folder containing two default json files. One for a grid and the other for adding or updating an entity
  • autobotServerImpl - containing two base clsases that inherit from base route and base manager and from which all your internal routes and manager will inherit. This will enable to add global buisness logic such as extracting user details from each user request. Make sure to open file baseSchemaRouterImpl and notice support for testing by setting NODE_ENV to test
• Open the route file created in 'routes' folder and copy the part defined in the last row
• Open server.ts file and paste that row inside method 'setRoutes'. (Make sure to add the appropriate imports to the file)
• For starters, set the NODE_ENV veriable to 'test' before running the server

Congratulations - you have just created your first Autobot server module

You can now run the server and see that it loads properly

###Adding an Autobot module to the client side (Angular app)

• Open a command under you angular client app root folder and run:

yo autobotjs

• Select to generate a client side 'Angular Module'
• When prompted set the module name (preferable with a plural name) and press enter
• A new folder has been added under src/app/modules with the name of your defined module
• In addition that generator has added all the required npm packages for running Autobot
• The module folder will create 4 files
  • add-[module name].comp.ts - A component that will be used for adding and updating entity data
  • [module name].comp.ts - A component for displaying the list of entities inside a grid
  • [module name].module.ts - The ngModule class for defining the components and the server and also the internal routes
  • [module name].service.ts - The service class for communicating with the server
• Open the applications main module file (usually named app.module.ts ) and add the module class name of the new module into the list of imports declarations
• If this is the first module added make sure to complete the next section relevant for the first time
• After completing the section all that is left to do is to run ng build
• Make sure that the server code hosts the client code by removing the remarks from setStaticFolders method inside server.ts

#####Additional code required when building the client app for the first time In order to run the code for the first time there are several code snippets that need to be added mainly in order to route to the new module

• Open the app.module.ts file and define a new route right bellow the imports and above the ngModule declaration as following: (make sure to replace the /default-route string to a route inside your app. Tha Autobot module generated will already contain a predefined route definition. Copy one of the modules routes in order to route to it by default)

const defaultRoutes: Routes = [
  {path:'', redirectTo:"/default-route",pathMatch:"full"}
];

• In the module imports:[] declaration set the route as root by adding:

RouterModule.forRoot(defaultRoutes)

• To support client side routing using '#' add an overider to the list of the module providers:

providers:[
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]

• Open tha app.componenet.ts file and add a router outlet inside the component template that will host the routed content. If you are using seperated files for html content that the router outlet inside the file containing the html template

<router-outlet></router-outlet>

Apache-2.0 © Oded Levy