Rocket Builder `Free DnD Tool`

STATUS: Work in Progress - Website builder that uses Vanilla JS and a Remote Server for components injection - Actively supported by AppSeed.

👉 Rocket Builder - Live DEMO
👉 FULL Specs, Google Drive Link
🫶 Contribute - see the open issues

Roadmap & `Features`

Status	Item	info
✅	Core	`Vanilla JS`
✅	Components	`Bootstrap 5`
✅	Remote Components Server	https://components-server.onrender.com/kits/bs5/
✅	Persistence (local storage)	Save, Restore, Clear
✅	One-Page Layout	`Single Component` Drag & Drop
✅	Component Customization	Text-Only
✅	Grid Components	This allows to inject predefined rows (2,3,4 columns)
✅	USE Remote Components	`Yes`
✅	Component Customization	Texts, Links
❌	Component Customization	Images
❌	Component Customization	CSS
❌	PAGE Customization	CSS
❌	PAGE Customization	JS
❌	Manage SEO	Title, Description, Keywords
❌	Handle Multiple Pages	-
❌	Dashboard Layout	`Multiple Components` Drag & Drop

`Compile the Builder`

Tested with Node 16.x, 18.x.

$ git clone https://github.com/app-generator/rocket-builder.git
$ cd rocket-builder/builder
$ yarn
$ yarn dev    # development (LIVE Reload)
$ yarn build  # production  (dist FOLDER)

Components `Server` (distant)

Managed by Flask (optional). By default, a LIVE Components Server is used.

$ cd rocket-builder/backend
$
$ virtualenv env
$ # Or
$ python -m venv env 
$
$ source env/bin/activate  # Linux
$ # Or
$ .\env\Scripts\activate   # Windows
$
$ pip install -r requirements.txt
$ flask run --debug

Here is the output:

http://localhost:5000/
http://localhost:5000/kits/, returns available KITS
- 'material-kit'
- 'kit2'
http://localhost:5000/kits/material-kit/, return Material Kit assets

{
    "name": "Material Kit BS5 ",
    "version": "0.0.0",
    "type": "kit",
    "material-kit": {
        "layouts": "base.html",
        "components": {
            "footers": {
                "footer.html": "NA"
            },
            "headers": {
                "header.html": "NA"
            },
            "navigation": {
                "navigation.html": "NA"
            },
            "general": {
                "section1.html": "NA"
            }
        }
    }
}

Add new component

Navigate to backend/apps/templates/bs5/components
create the component like footer.html
Edit the file and add the HTML code
Compute the Base64 hash using service:
- https://www.base64encode.org/
Update info.json and add the new component using existing category or a new one
- Syntax:

... (truncated) ...
        "components": {
            "footer": {
                "footer.html": "BASE64_Hash HERE"
            }, 
        }   
... (truncated) ...

NOTE: The UI Builder uses the local storage to cache the info.json pulled from the server.

In order to have the latest version, please open an incognito window or clean manually the data from the local storage.

License EULA

For more information regarding licensing, please contact AppSeed, < support@appseed.us >.

Rocket Builder Free DnD Tool - Provided by AppSeed.

nastassiadanilova/rocket-builder

Rocket Builder Free DnD Tool

Roadmap & Features