UI workflow Tool to generate Angular applications

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.

Future plan

There are many features we can add to this project. Here are few list items.

  • 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

Complete Demo

Source Code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store