singlepage-js

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Visit https://www.singlepagejs.com for full documentation.

Introduction

Singlepage.js is a pure Javascript portal platform for building modular Web applications. The platform is composed of three components:

CLI for bootstrapping, developing, and deploying applications
UI composition framework for constructing Web applications from Vue.js components
Web services framework for developing backend services

Singlepage CLI

Create minimal or full app boilerplate
Development support via "singlepage serve" that serves from memory and uses livereload for hot reloads
Build app distribution for deployment

Application Composition Framework

Interactive creation of Web application via drag-n-drop of Vue.js components
Component customization via auto-generated property editor
Support for custom component commands and property editor
Look & feel customization via CSS files and component window style overrides
Built-in page grid layouts with the ability to define your own
Internationalization via global message file as well as embedded component-specific messages

Web Services Framework

Service communication via HTTP/JSON
Support for developing and adding application-specific services
Role based access control
Default implmentation of core services

Quick Start

Installation

Install singlepage-js globally.

npm install -g singlepage-js

Application Setup

Global installation of singlepage-js provides the singlepage command that can be used to generate application boilerplate and serve your application.

# Create app boilerplate
singlepage create myapp

# Change to myapp directory and start serving boilerplate application
cd myapp
singlepage serve

View Application

Open a Web browser and access your application on http://localhost:8080.

Edit Application

Click on the Login button on the top right corner. Use admin/admin as your username/password. The Login button will be replaced by a button that shows current user information. Click on the button and select Turn on Edit Mode. This will show editing commands in the same dropdown. It also shows a gear icon and a drag icon on each portal window (component). The following is a quick summary of supported edit operations:

Add Component: Each column in the grid shows a select box with Add button next to it. Select the component you want to add from the select dropdown and click Add to add that component to the column
Edit Component Properties: Click on the gear icon on a portal window and select "Edit Settings" to set component properties
Delete Component: Select "Delete Component" from the portal window menu
Rearrange Components: You can drag and drop components by clicking on the drag icon on the portal window
Add Page: Select "New Page" from the top right dropdown and enter requested page metadata
Delete Page: Select "Delete Current Page" from the top level dropdown
Change Page Order: Drag and drop the top menubar page links to the desired position
Add Folder: Open Page Manager by selecting Page Manager option from the top portal menu and click on "New Folder" button

Deploy Application

Use build command to create your distribution. The distribution is created in the dist folder under your application directory. You can use spstart.js script in the bin directory to run the server.

cd myapp
singlepage build
node ./dist/bin/spstart.js

You can simply copy the dist directory to your production environment to deploy it. Additional steps such as installing node and running npm install may be needed depending on your hosting provider and your method of deployment.

Current Tags

0.5.0 ... latest (9 months ago)