Skip to main content

Hello TypiJS

TypiJS

Explore the framework

TypiJS​

The Angular CMS Framework for building fully-featured SPA sites powered by NodeJS and MongoDB with TypeScript.

It includes 4 packages:

  • @typijs/core - provides the decorators, injection tokens, base classes to create content type
  • @typijs/modules - provides the plugged-in module such as Page tree, Block tree, Media..
  • @typijs/portal - provide the UI layout to access editor, admin
  • @typijs/api - provide the apis to manipulate the content data which stored in MongoDB

Build on top modern stacks with TypeScript

How it work​

Let assume you need build the dynamic website, in Angular CMS, we need to breakdown this page to properties, blocks like this

cms-demo-site-breakdown

So thinking of the architecture in which the site which breakdowns to many pages, each page will also breakdowns to blocks and properties. After that we will definite the page types, block types to build the site.

From this idea, in Angular CMS, we will definite the Home Page page type like this

@PageType({
    displayName: "Home Page",
    componentRef: HomeComponent,
    description: "This is home page type"
})
export class HomePage extends PageData {

    @Property({
        displayName: "Logo",
        displayType: UIHint.Input
    })
    logo: string;

    @Property({
        displayName: "Latest Projects Page Root",
        displayType: UIHint.Input
    })
    latestProjectRoot: string;

    @Property({
        displayName: "Highlight Features",
        description: "This is highlight feature will be in banner area",
        displayType: UIHint.ContentArea
    })
    features: Array<any>;

    @Property({
        displayName: "Highlight Portfolios",
        displayType: UIHint.ContentArea,
    })
    portfolios: Array<any>;

    @Property({
        displayName: "Footer",
        displayType: UIHint.ContentArea
    })
    footer: Array<any>;

    @Property({
        displayName: "Footer Text",
        description: "This is footer text to show the copyright",
        displayType: UIHint.Xhtml
    })
    footerText: string;
}

Basically, we have just created the page type with properties: logo, features, portfolios, footer...

Then corresponding to page type, we will create a template (like Html template). In Angular CMS, this template actually is the Angular Component

import { Component } from '@angular/core';
import { CmsComponent } from '@typijs/core';
import { HomePage } from './home.pagetype';

@Component({
    templateUrl: './home.component.html',
})
export class HomeComponent extends CmsComponent<HomePage> {
    constructor() {
        super();
    }
}

Now when create the page with page type of Home Page, the HomeComponent is charge of rending the page's template

So after we done all things above, how to we create a page. In Angular CMS, we have the admin/editor UI to manage all pages like this

How it run​

I created a GIF for demo purpose. It's just only 35MB (haha), so be patient for loading please.

In case your device or browser can't load the this gif, there is a video you can see Angular Cms Demo

cms-demo-site

This Admin/Editor UI is build with plug-in architecture

cms-demo-site

Each page you created has the unique friendly SEO URL like /home-page, /home-page/about, /portfolio/article-1...and the page is published, it can be access via those urls

Check it out with other nice features:

Features​

  1. Page Types, Page Template, Page Properties
  2. Block Types, Block Template, Block Properties
  3. Media management: Upload multi files (images, doc, pdf, ...), resizing image, drag and drop...
  4. Friendly URL
  5. SEO (using Angular Universal)
  6. Multi site
  7. Modules architecture for extend the Admin UI

and last but most important: the site you build with Angular CMS is actually the Angular App, it mean it is Angular from router, render, .... You will only work with Angular.

However, it still need a storage to store data, right?. Angular CMS uses the API system which was built by ExpressJS (NodeJS framework) and MongoDB (using mongoose as ORM)

Getting Started​

To start the site build with TypiJS, following theses steps

Prerequisites​

  • Angular 10.x or higher
  • Node 10.x or higher
  • Express 4.x or higher
  • Typescript 4.1.5
  • MongoDB latest

Quick start​

  1. Clone the repo
    git clone https://github.com/typijs/typijs-starter.git
    cd typijs-starter
  2. Under server folder run script
    npm install
    npm run dev
  3. Under client folder run script
    npm install
    npm start
  4. Navigate to http://localhost:4200/typijs/register to create admin user
  5. See how setup site at video https://www.youtube.com/watch?v=PBKFrZ5Qq1Y

How to development​

Before you want to contribute the project, you need set up the local development environment

Setting up your local environment in dev mode​

  1. Load our example MongoDB database from the backup file
mongorestore -d vegefoods_v2 resources/db/dump/vegefoods_v2

  1. Go to cms-api folders and run command 
    npm install
    npm link
    npm run build
  1. Go to cms-server folder and run commands
    npm install
  1. set up the symlinks between modules as below:
   npm link @typijs/api
  1. Stay under cms-server folder, and run the command
    npm run dev

This command will run script to connect to mongo db, so make sure you have the correct path to your db. For example, you have the db path like as [MonogDB PATH]/data/db

    mongod --dbpath [MongoDB PATH]/data/db

If you are running MongoDB as a service, you can skip this step

  1. Final step, under cms folder, run the command sequentially
    npm install
    ng build core
    ng build modules
    ng build portal
    npm run dev

Make sure you installed Angular CLI with --global

Now you can goto http://localhost:4200 to see the site.

Register an admin account on the admin site

url: http://localhost:4200/typijs/register

Run Angular Universal (SSR) in Dev mode​

    npm install
    ng build core
    ng build modules
    ng build portal
    ng build
    ng run cms-demo:server

Copy three folders dist\core, dist\modules and dist\portal into cms\node_modules\@typijs folder then run this script to start Server Site Render

    npm run start:ssr

If there is any change these libs core or modules or portal need to run build for each lib again then run 

ng run cms-demo:server

and start server site again

Screenshots​

The minimal, simple, clear screen for Editor to edit content

cms-demo-site

On page preview

cms-demo-site

Upload media by drag & drop

cms-demo-site

Authors​