Nietzsche's Preposterous Moustache


Need private packages and team management tools?Check out npm Orgs. »


2.0.63 • Public • Published


Morphi v2 (BETA)

Isomorphic framework in TypeScript for NodeJS back-end and browser (web/mobile) front-end.

Do no repeat yourself anymore, never !!!

  • - Isomorphic classes as Angular/Ionic Services and ExpressJS controllers.
  • One node_modules folder for browser, mobile and server.
  • - Write everything in TypeScript all the time and
    automaticly strip off server code for browser/ionic versions.
  • - Use power of TypeORM framwork to write awesome, robust, clean NodeJS backend
    connected to SQLite, Mysql, WebSQL, MongoDB and many others...
  • - Keep amazing code consistency thanks to isomorphic entities classes, that you can use to
    create backend tables and also inside frontend-angular templates with type checking.
  • - Change business logic in the fastest possible way!
    - generate formly objects from entites
    - have typescript typechecking from entity in db to html template!
    - set default values to entities
  • Support project to develop only amazing, creative things in the future...
  • Project is under development, but every juicy features just works... try example.

  • TODO:
    - firebase like... realtime update of backend/frontend (in progress)
    - extended authentication based on isomorphic decorators metadata and db roles (in progress)
    - isomoprhic unit tests (with inheritance) in mocha/jasmine
    - vscode extension to support @backend, @backendFunc #regions


Global CLI

First install global tool:

npm install -g morphi

Create new Isomorphic Workspace project ( mobile, web, server + sqlite db + basic rest authentication )

morphi new:workspace myAwesomeIsomrphicApp

OR create Isomorphic Single File backend/frontend project

morphi new:simple myAwesomeIsomrphicApp

Visual Studio Code (recommended editor)

Open your project in VSCode to get the maximum of development experience.

code myAwesomeIsomrphicApp

Installation - Isomorphi Workspace

Link one version of node_modules

Once you have your app opened...



npm install
npm run link

to install and link node_module folder for each subproject.

Build and run sub-projects with auto-reload

  • isomorphic-lib: npm run build:watch #or morphi:watch + F5 to run server
  • angular-client: npm run build:watch + open browser http:\\localhost:4200
  • ionic-client: npm run build:watch + open browser http:\\localhost:8100

Instead of npm run build:watch you can also open each sub-project in separated vscode window code <sub-project-name> and press: ctrl(cmd) + shift + b.

Installation - Isomorphi Single File

Install dependencies

Once you have your app opened... run:

npm install

Run isomorphic build

morphi build:watch

Run frontend client

npm run build:watch

Backend controllers, entities directly in the frontend

Isomorphic TypeScript Classes

The main reason why this framework has huge potential is that you can use your backend code ( usualy ExpressJS, REST controllers ) as Anguar 2+ (or any other js framework) services, to access your RESTfull backend without dealing with backend patches and unessery source code.

This will allow you to change business login very quickly, without confusion and keep no separation between your frontend/backend application.

Morphi CLI tool

Is responsible for magic behing stripping of backend code for browser version ( web app or ionic mobile app).

Regions @backend,@backendFunc

The difference between @backend and @backendFunc is that @backendFunc will replace code with 'return undefined' (it is needed for typescript compilation) and @backend will precisely delete all lines between.


+ Isomorphi initilization

Initialization for backend and frontend

import { Morphi } from 'morphi';
  controllers: [ /* Your controllers clases here */ UserController  ],
  entites: [ /* Your entites clases here */  User ],
  host: 'http://localhost:4000' // host for backend and frontend,
  //#region @backend
  config{ /* Your db config clases here */  }

To inject providers you can use

import { Morphi } from 'morphi';
  providers[  ...Morphi.Providers  ]

+ Isomorphi backend

Typeorm isomorphic ENTITY in NodeJS backend:

import { Morphi } from 'morphi';
export class User {
    //#region @backend
    id: number;
    //#region @backend
    name: string;
    //#region @backend
    surname: string;
    fullName() {
      return `${} ${this.surname}`
    //#region @backend 
    password: string

Morphi isomorphic CONTROLLER in NodeJS backend:

import { Morphi } from 'morphi'
class UserController {
    getAllUser() {
        //#region @backendFunc 
        const  repository  =  this.connection.getRepository(User) as  any;
        return  async (req, res) => {
            return await  this.repository.findAll();

After isomorphic compilation by morphi;

morphi build

or (incremental watch build)

morphi build:watch

will be generated browser version.

+ Generated borwser version

The result for browser client will be like below:

Typeorm isomorphic ENTITY in browser version:

import { Morphi } from 'morphi/browser';
export class User {
    id: number;
    name: string;
    surname: string;
    fullName() {
      return `${} ${this.surname}`

Morphi isomorphic CONTROLLER in browser version:

import { Morphi } from 'morphi/browser'
class UserController {
     // 'return undefined' is for purpose on the browser side
     // The function body will be replaced through decorate
     // to access REST endpoint
    getAllUser() { 
    return undefined; 

Angular 2+ services

Morphi.Controller(s) you can use as Angular 2+ services. If you used Morphi.Entity your browser <-> backend REST communication will keep entity type and automaticly reproduce it.

    selector:  'app-test',
class  AppTestComponent  implements  OnInit {
    // Inject isomorphic class as service into component
    constructor(public users: UserController) { } 
    async ngOnInit() {
          const data = await this.users.getAllUsers().received;
          const users = data.body.json;
          const firstUser = users[0]
          console.log( firstUser instanceOf User ) // true

Directly in html template

To simplify object receiving from backend you can use async pipes (available with Angular4+) and really make you MVVM amazing.

Morphi and Angular4+ lets you use backend functions in html frontend template.


<ul   *ngIf="users.getAllUsers().received.observable | async; else loader; let users" >
  <li  *ngFor="let user of users"> 
   {{}} {{user.fullName()}} <!-- BACKEND FUNCTION IN FRONTEND TEMPLATE ! -->
        <input type="name" [(NgModel)]="" >
<ng-template #loader> loading users...  </ng-template>

Of course Angular services can be used inside Angular web and Ionic mobile apps.




npm i morphi

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability