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
Addbutton next to it. Select the component you want to add from the select dropdown and clickAddto 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 Manageroption 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.
156 Dec 8, 2022
2 Feb 21, 2022
2 Apr 13, 2022
0 Dec 31, 2016
0 Mar 30, 2020
646 Dec 28, 2022
4 Dec 12, 2022
11 Mar 22, 2022
0 Aug 10, 2021
610 Dec 26, 2022
117 Nov 27, 2022
234 Dec 23, 2022
6 Dec 28, 2022
3 Nov 23, 2022
4 Sep 4, 2022
103 Nov 24, 2022
13 Dec 14, 2022
115 Dec 31, 2022
6 Apr 29, 2022