UI workflow Tool to generate Angular applications
If you are an Angular developer, like to build and play with quick and cool ideas then you might find creating new Angular applications and its components using Angular CLI commands could be quite weary.
Of course, the Angular CLI commands are very easy to use and handy. The complexity arises when you have nested routes, components, services to be generated inside a complex application. You shall type long Angular CLI commands to get things done. For example, say you have a parent NgModule dashboard and you wish to generate child NgModule with dynamic routing account then command would look like as below
ng generate module dashboard/account --route account --module dashboard.module
This is just one level of routing, now image you want to generate child module at route level say 5!
But what if you could just draw your Angular application routing and functional workflow and magically generate complete Angular application boilerplate code? Well, not exactly drawing and not with the magic, but at least an UI tool to model your route workflow.
The below example shows a simple e-commerce web application workflow with Login, SignUp, Dashboard, Products, Accounts routes with Services and Pipes to be built for quick testing. How cool it would be to just define the workflow in a horizontal tree and generate Angular application?
Solution → ng-application-builder (Not the coolest name!)
I have started working on this project couple of years ago but then I parked it and it was parked for awhile (You could see Angular 9 was used to build client application). But eventually, I got to get it working with basic features. The ng-application-builder project aims to provide the said solution. It is an Angular web application with Node.js web server which generates Angular applications (for now, in future it could generate Ionic, React etc. as well).
Web Server — ng-app-builder-server
The Node.js server with Express.js serve the REST APIs for generating Angular applications. The Node.js server internally runs Angular CLI commands, thus Angular CLI package should be installed on server machine. The server accepts new project workflow is sent into a JSON request body which is then parsed into appropriate Angular CLI commands and gets runs on server machine.
Frontend — ng-app-builder-web
The frontend web application is built with Angular and D3.js for building graph.
Output Modes
1. Download source code
You can design your application workflow in the frontend and once ready you can download complete source code on your machine. Then install NPM packages and run newly generated application on your machine with ng serve command.
2. StackBlitz Sandbox
This is quick way to test your design in sandbox. After designing your application workflow, you could simply generate application and let it run on StackBlitz sandbox. Thus you don’t have to install any NPM packages locally.
Where can I test? Why is it not a live web application?
This project is not live yet. There are many features to be added, issues to be fixed, security issues needs to be addressed if any and so on. But as an early version, it is open for testing and improvement.
The idea behind make it open-source it to introduce and welcome the community to make it better and stable. Currently, you will have to deploy both client and server on your own infrastructure. Since the server needs extra package installation and shell scripts, typical free Node.js web servers like Heroku won’t help here. It needs dedicated cloud instance for public usage. I have deployed and tested the client and server applications on on AWS and GCP instances. But due to pricing, it’s not possible for me to let the instance running for public use forever. You could easily deploy it on your local machine for development purpose and any cloud instance of your choice if you would like to make it public.
Future plan
There are many features we can add to this project. Here are few list items.
- Get a dedicated hosting and deploy live application
- Implement Angular CLI rules (e.g. allowed characters in component name etc.)
- Integrate with VS Code
- Load existing Angular applications and extend it with the workflow
- Generate Ionic projects (modify server to build ionic component generator commands)
- Generate React projects
- Refactoring
- …
Quick demo
Complete Demo
Source Code
Cheers!
