XINSHI Web builder low code framework

Xinshi Web builder is an Angular front-end low code framework based on Material. With its rich component library, it provides an excellent digital innovation experience.
The Web Builder allows for quick construction of responsive, multi-themed web pages through drag-and-drop.

https://builder.design

Web Builder · UI Storybook · 知乎 · 中文

Watch Demo Video

Oumuamua is the first known interstellar object passing through the solar system, which means “distant messenger(信使)”.

Open Source Purpose

This open-source project is very suitable for beginners to learn or advance their skills. It covers most of the Angular technical knowledge points but is not limited to the following:

• Server-Side Rendering (SSR)
• Lazy Loading，Inject DI
• Route Guards
• Request Interception and Caching
• Dynamic Components
• Dynamic Forms
• Dynamic Tables
• Multiple Themes
• Custom Directives
• Custom Pipes
• Custom Icons
• Data Visualization and Charts
• RxJS
• Storybook
• TypeScript
• Provider
• Map Applications
• Analytics: Google Analytics\Microsoft Clarity
• Applications of Messenger UI in Drupal Headless

Technology Stack

• Front-end: Angular + Material + Tailwind
• Dynamic Forms: ngx-formly
• Web Animation: gsap
• Charts: Echarts
• Video: Video.js
• File Generation: jspdf for PDF generation, html2canvas for image generation, fileSaver and jszip for zip generation
• Editors: quill, ang-jsoneditor
• Slideshow: swiper
• Icon Fonts: material design icons + custom SVG icons
• Encryption: crypto-js
• Utility Functions: lodash-es
• Testing and Preview: Storybook
• Web Server: Nginx
• Back-end: Drupal (recommended), dynamic components and APIs can be flexibly configured through Drupal views

Development Guide

For more details, please refer to theDevelopment Guide

Development Environment Setup

// src/environments/environment.ts
export const environment: IEnvironment = {
  apiUrl: "http://localhost:4200",
  production: false,
  site: "dist",
  port: 4200,
  cache: false,
  drupalProxy: false,
};

• apiUrl: Base API parameter for the entire application
• production: When set to false, the content API of the page will call the local JSON file. When set to true, it will call the ${this.apiUrl}/api/v1/landingPage?content=${this.pageUrl} interface.
• site: The folder name generated when the project is built in production mode. This setting is for generating multiple site projects.
• port: Custom application port.
• cache: Whether to enable API request caching.
• ssr: Whether to use SSR server-side rendering.
• drupalProxy: Corresponds to Drupal as the back-end, and unified login/logout using Drupal.

Route Guard Configuration

By default, it will read the global configuration information from /api/v1/config. This is mainly to check whether the site is open or requires login. The file path is src/app/core/guards/auth.guard.ts. You can comment out line 35, return true;, during local development.

Proxy

Configuration file config/proxy.config.js. During local development, it will forward the request based on the corresponding API URL prefix. Configure it according to the actual situation.

const PROXY_CONFIG = [
  {
    context: ['/api', '/user', '/sites'],
    target: 'https://yourdomain.com',
    secure: false,
    changeOrigin: true,
  },
];

module.exports = PROXY_CONFIG;

Run

npm start

Route Pages

• Default homepage:http://localhost:4200/home
• User login:http://localhost:4200/me/login
• Web builder: http://localhost:4200/builder
• Drupal Media: http://localhost:4200/media
• Drupal Blocks:http://localhost:4200/block

Other Pages

In addition to the above route pages, when accessing other pages, the url will be used to retrieve data from the API and render the page. Returns for local and production environments are handled for easy testing:

loadPageContent(pageUrl = this.pageUrl): Observable<IPage> {
    if (environment.production) {
      const landingPath = '/api/v1/landingPage?content=';
      const pageUrlParams = `${this.apiUrl}${landingPath}${pageUrl}`;

      return this.http.get<any>(pageUrlParams).pipe(
        tap((page) => {
          this.updatePage(page);
        }),
        catchError(() => {
          return this.http.get<any>(`${this.apiUrl}${landingPath}404`);
        })
      );
    } else {
      const sample = pageUrl.split('/')[1];
      const samplePage = samples.elements.filter(
        (item) => item.id === sample
      )[0];
      if (samplePage) {
        this.updatePage(samplePage.page);
        return of(samplePage.page);
      } else {
        return this.http.get<any>(`${this.apiUrl}/assets/app/404.json`);
      }
    }
  }

For base configuration, refer to Xinshi Messenger Storybook Global Configuration

Build for Production

npm run build

Run Storybook

npm run storybook

If you encounter an out-of-memory error, execute the following command and then run it again:

export NODE_OPTIONS="--max-old-space-size=8192"

Preview