Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/biaogebusy/web-builder

基于TailwindCss，通过拖拽可视化配置快速构建现代化响应式UI、可自定义、多主题、多语言的网站应用，包含美观的后台管理主题，拥有完整的前端解决方案的低代码平台。 Easily build responsive web apps with TailwindCSS, featuring diverse themes, multilingual support, and drag-and-drop functionality, a low code platform with a complete front-end solution.
https://github.com/biaogebusy/web-builder

angular drag-and-drop drupal frond-end law-code lawcode no-code rxjs storybook tailwindcss web-builder

Last synced: 6 days ago
JSON representation

基于TailwindCss，通过拖拽可视化配置快速构建现代化响应式UI、可自定义、多主题、多语言的网站应用，包含美观的后台管理主题，拥有完整的前端解决方案的低代码平台。 Easily build responsive web apps with TailwindCSS, featuring diverse themes, multilingual support, and drag-and-drop functionality, a low code platform with a complete front-end solution.

Awesome Lists containing this project

README 

        
XINSHI Web builder low code framework





  logo

  


  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






  logo

  


  





> 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

- Flex Layout

- Storybook

- TypeScript

- Provider

- Map Applications

- Analytics: Google Analytics\Microsoft Clarity

- Applications of Messenger UI in Drupal Headless



## Technology Stack



- Front-end: Angular + Material + FlexLayout

- 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 the[Development Guide](https://ui.builder.design/?path=/docs/guide--page)



## Development Environment Setup



```javascript

// 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.



```javascript

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](http://localhost:4200/home)

- User login:[http://localhost:4200/me/login](http://localhost:4200/me/login)

- Web builder: [http://localhost:4200/builder](http://localhost:4200/builder)

- Drupal Media: [http://localhost:4200/media](http://localhost:4200/media)

- Drupal Blocks:[http://localhost:4200/block](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:



```javascript

loadPageContent(pageUrl = this.pageUrl): Observable {

    if (environment.production) {

      const landingPath = '/api/v1/landingPage?content=';

      const pageUrlParams = `${this.apiUrl}${landingPath}${pageUrl}`;



      return this.http.get(pageUrlParams).pipe(

        tap((page) => {

          this.updatePage(page);

        }),

        catchError(() => {

          return this.http.get(`${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(`${this.apiUrl}/assets/app/404.json`);

      }

    }

  }

```



For base configuration, refer to [Xinshi Messenger Storybook Global Configuration](https://ui.builder.design/?path=/docs/base-config--page)



## 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



 web builder

 web builder

 web builder

 web builder

 web builder

 web builder

 web builder

 web builder

 web builder



[![Star History Chart](https://api.star-history.com/svg?repos=biaogebusy/web-builder&type=Date)](https://star-history.com/#biaogebusy/web-builder&Date)