Celerio Angular RC.2 Quickstart

Celerio code generation templates to generate an Angular 2 + PrimeNG + Spring Boot + Spring Data JPA + Spring Security CRUD web application.

Run these commands to generate and run the Angular 2 web app:

git clone [email protected]:jaxio/celerio-angular-quickstart.git
cd celerio-angular-quickstart
mvn -Pdb,metadata,gen generate-sources
cd src/main/webapp
npm install
npm run tsc
cd ../../..
mvn spring-boot:run

Then open http://localhost:8080/

These commands are detailed here.

Code generation is performed by Celerio, an Open Source code generator that reverses relational database schema.

This quickstart comes with an H2 database example, but you may try it with your own database schema.

Prerequisites

• Java Development Kit 8
• Maven 3.3.3
• Npm 3.x.x it comes with Node.js.

Table of Contents

• Technology used by the generated app
• Project structure
• Generate it and run it
• Delete all generated files
• How-to use your own database
• Contribute

Technology used by the generated app

The generated source code relies on:

• Angular 2 RC.2 web framework
• TypeScript
• PrimeNG
• Spring Boot
• Spring Security
• Spring Data JPA

Code generation is done by Celerio, our Open Source code generator.

Some useful references:

• PrimeNG QuickStart
• Angular2 quickstart

Project structure

Project mainly follows Maven's conventions.

• pom.xml Maven POM file
• src/main/config: contains Celerio conf
• src/main/sql/h2: contains sample SQL script that get reversed... you may add more tables/columns.
• pack-angular: contains Celerio dynamic/static Templates (interpreted/copied by Celerio Engine). If you want to help us write templates, please take a look at Celerio template doc

After running the code generation, you get more folders:

• src/main/webapp/app: the front end Angular components etc...
• src/main/generated-java: the backend, in Java
• etc...

Generate it and run it

0: Get the quickstart

Clone this quickstart:

git clone [email protected]:jaxio/celerio-angular-quickstart.git

1: Generate the source code

cd celerio-angular-quickstart
mvn -Pdb,metadata,gen generate-sources

It runs Maven with the following 3 profiles (defined in the pom.xml file):

• db profile creates the database in the target/db folder.
• metadata profile reverses the database. It creates the file metadata.xml under src/main/config/celerio-maven-plugin.
• gen profile generates the source code. It reads metadata.xml, the celerio-maven-plugin.xml configuration file, interprets the templates from pack-angular and copies the files from pack-angular-static.

For example, the template entity.service.ts.e.vm leads to the creation of 1 file per entity: src/main/webapp/app/entities/xxx/xxx.service.ts

2: Install JavaScript dependencies

cd src/main/webapp
npm install

Note: need to be run once, you may may skip it as you regenerate over and over.

3: Compile TypeScript files

The step 1 above has copied or generated some TypeScript files. You must transpile (compile) them to JavaScript.

npm run tsc

4: Start the application

cd ../../..
mvn spring-boot:run

Then access it at http://localhost:8080/

Delete all generated files

When developing templates, you often need to delete the generated files. To do so, from the root folder, simply run:

mvn -PcleanGen clean

Note that it won't delete any generated file that was manually modified.

How-to use your own database

DO NOT TRY THIS WITH YOUR PRODUCTION DATABASE

1: Clean up

Make sure your project is clean. Delete all previously generated files.

2: Edit pom.xml

You need to edit the pom.xml and change the JDBC settings in order for Celerio to connect to your database and extract its metadata and for you application to access the database. Search for CHANGE THE PROPERTIES BELOW TO USE YOUR OWN DATABASE.

Since you don't need to create the database, there is no need to activate the db profile. Make sure you comment it in your pom.xml to avoid any surprise.

3: Reverse your database

To reverse your database, run:

mvn -Pmetadata generate-sources

If all goes well it creates the file metadata.xml under src/main/config/celerio-maven-plugin.

4: Edit celerio-maven-plugin.xml

Edit the src/main/config/celerio-maven-plugin/celerio-maven-plugin.xml configuration file and comment or modify the <entity-configs> and <sharedEnumConfigs>. These are database schema specific conf.

Please refer to Celerio Configuration for more info.

5: Generate the source code

To generate the source code, run:

mvn -Pgen generate-sources

6: follow same steps as above

Follow the steps 2-3-4 from the Generate it and run it section.

Contribute

You may contribute in several ways:

• By reviewing the generated code, are PrimeNG, Angular, Spring Data, Spring Boot, etc. properly used ?
• By trying to generate a project using your own database schema
• By using the generated app and trying to find its limits

You may of course report issues and/or submit pull requests.