SPA-Builder - Drag and Drop Page BuilderSPA-Builder - Drag and Drop Page Builder
SPA-Builder is a no code drag and drop page builder. This will turn your designed html page into React Page.SPA-Builder - Drag and Drop Page Builder
SPA-Builder is a no code drag and drop page builder. This will turn your designed html page into ...Overview
When visiting "Live demo"Â Please make sure to click on "Remove Frame" button to test out software properly
SPA-Builder is the easiest, quickest way to design elegant, mobile responsive pages for your business or personal website. SPA-Builder is made in Node.js and React.js, making it a modern single page CMS. It is using MySQL database through sequelize.js ORM. It is protected against ddos or xss attack. Making a React website is now hassle free!
For demo Credentials > username: Tanmoy Sen ; password: 123456
Features
- Responsive Page Builder
You can make pages by dragging and dropping elements to canvas, more than 20+ premade components and elements available. Make Responsive design for different screen sizes.
You can also make custom component as your need.
- Code Generator
This app generates Html, Css and Js code as you design. You can get the code anytime just by clicking on this ""  icon. Also you can import your premade template.
- Form Builder
By dragging and dropping form into canvas you can make dynamic form with text area, button, checkbox and many more!
- Table Maker
Build your table by just filling out a form. No need to worry about the database. SPA-Builder got your back!
- Multiple Image Upload
Upload multiple images using SPA-Builder asset manager. You can limit max upload.
- User Management System
Admin can create user and assign them role and give them restricted permission.
- React-Bootstrap theme
- 3 command installation
- Customizable
- Dynamic menu
- Full access control ..... and many more features.
Requirements
- Node.js 11 or higher
- Mysql Server 4.1.13 or higher
- Apache / Nginx
Instructions
- Step One
Unzip the app, Open spa-builder folder in your code editor and open the terminal. type (npm install)Â This will install all the node dependency on your local machine.
- Step Two
Now create a .env file in the spa-builder folder. And paste these in your .env file. Replace the dummy values with your own credentials for these variables --
DATABASE_HOST=//name of your mysql host
DATABASE_NAME=//name of your mysql database
DATABASE_USERNAME=//your database username
DATABASE_PASSWORD=//your database password
JWT_KEY=//your secret key
JWT_EXPIRE=//token expired time
CLOUDINARY_NAME=//cloudinary account name
CLOUDINARY_API_KEY=//cloudinary api key
CLOUDINARY_API_SECRET=//cloudinary secret
FRONT_URL=http://localhost:3000
FRONT=http://localhost:3000
EMAIL_SERVICE=gmail
EMAIL_USERNAME=//[email protected]
EMAIL_PASSWORD=//your mail password
EMAIL_FROM=//[email protected]
- Step Three
If you want to edit something and test the app in your local environment, you can do that by running (npm run dev). Its totally optional.
Now if you had successfully updated your code or not updated! type (npm run build) in your editor terminal and hit enter to build your react app production ready
after successfully build your application now you can upload it in your hosting server! Need any help with uploading your server? Leave a comment. Hope we can solve the problem together.
Other items by this author
Category | Scripts & Code / JavaScript / Miscellaneous |
First release | 29 May 2022 |
Last update | 29 May 2022 |
Files included | .css, .html, Javascript .js |
Tags | cms, Automatic, user management, drag & drop, builder, drag and drop, page builder, NodeJS, crud, reactjs, website builder, webpage builder, drag and drop page builder, access control, role management |