Skip to content

Commit

Permalink
Merge pull request #283 from frappe/for-release-v1.13
Browse files Browse the repository at this point in the history
  • Loading branch information
surajshetty3416 authored Jan 2, 2025
2 parents 87e402a + 3e036f9 commit 2185b3f
Show file tree
Hide file tree
Showing 94 changed files with 3,879 additions and 2,635 deletions.
4 changes: 0 additions & 4 deletions .github/helper/install_dependencies.sh
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ set -e

echo "Setting Up System Dependencies..."

sudo apt update
sudo apt remove mysql-server mysql-client
sudo apt install libcups2-dev redis-server mariadb-client-10.6

install_wkhtmltopdf() {
wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb
sudo apt install ./wkhtmltox_0.12.6-1.focal_amd64.deb
Expand Down
60 changes: 60 additions & 0 deletions .github/workflows/docker-image.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
name: Build Container Image
on:
workflow_dispatch:
push:
branches:
- master
- develop
tags:
- "*"

jobs:
build:
name: Build

runs-on: ubuntu-latest

steps:
- name: Checkout Entire Repository
uses: actions/checkout@v4

- name: Set up QEMU
uses: docker/setup-qemu-action@v3

- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
with:
platforms: linux/amd64

- name: Login to GitHub Container Registry
uses: docker/login-action@v2
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}

- name: Set Branch
run: |
export APPS_JSON='[{"url": "https://github.com/frappe/builder","branch": "${{ github.ref_name }}"}]'
echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
echo "FRAPPE_BRANCH=${{ github.ref_type == 'tag' || github.ref_name == 'master' && 'version-15' || 'develop' }}" >> $GITHUB_ENV
- name: Set Image Tag
run: |
echo "IMAGE_TAG=${{ github.ref_name == 'develop' && 'develop' || 'stable' }}" >> $GITHUB_ENV
- uses: actions/checkout@v4
with:
repository: frappe/frappe_docker
path: builds

- name: Build and push
uses: docker/build-push-action@v6
with:
push: true
context: builds
file: builds/images/layered/Containerfile
tags: >
ghcr.io/${{ github.repository }}:${{ github.ref_name }},
ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
build-args: |
"FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
"APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"
2 changes: 1 addition & 1 deletion .github/workflows/server-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
ports:
- 12000:6379
mariadb:
image: mariadb:10.6
image: mariadb:10.8
env:
MYSQL_ROOT_PASSWORD: root
ports:
Expand Down
193 changes: 125 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,104 +1,161 @@
<div align="center">
<a href="https://frappe.io/products/builder">
<img src="https://raw.githubusercontent.com/frappe/builder/master/frontend/public/builder_logo.png" height="80" alt="Frappe Builder Logo">
</a>
<h2>Frappe Builder</h2>
<p>Crafting Web Pages Made Effortless!</p>

![Frappe Builder](https://github.com/user-attachments/assets/e906545e-101e-4d55-8a25-2c4f6380ea5e)
[Web page design credit](https://www.figma.com/community/file/949266436474872912)

<a href="https://frappe.io/products/builder">
<img src="https://raw.githubusercontent.com/frappe/builder/master/frontend/public/builder_logo.png" height="80" alt="Frappe Builder Logo">
</a>


<h1>Frappe Builder</h1>

**Crafting Web Pages Made Effortless**


![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/builder)
[![codecov](https://codecov.io/github/frappe/builder/branch/develop/graph/badge.svg)](https://codecov.io/github/frappe/builder)
[![unittests](https://github.com/frappe/builder/actions/workflows/server-tests.yml/badge.svg)](https://github.com/frappe/builder/actions/workflows/server-tests.yml)

<div>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/7b013cc1-fe40-4b3c-a765-d8c3697bf81e">
<img width="1402" alt="Frappe Builder Screenshot" src="https://github.com/user-attachments/assets/d20cec8a-9e30-4ad5-9fc0-9c136fffa916">
</picture>
</div>

[Website](https://frappe.io/builder) - [Documentation](https://docs.frappe.io/builder)
</div>

# Frappe Builder
## Frappe Builder

Frappe Builder is a low-code website builder designed for simplicity, speed, and flexibility. Craft beautiful websites effortlessly with an intuitive visual builder. Whether you're a designer looking for ease or a developer seeking customization, Frappe Builder empowers you. It also features a click-to-publish option that gives you the complete end-to-end website creation experience.

## Key Features
### Motivation

- **Intuitive Visual Builder:** Simplify your workflow with a Figma-like editor.
- **Responsive Views:** Ensure your sites look great on any device without the fuss.
- **Frappe CMS Integration:** Easily fetch data from your database and create dynamic pages.
- **Scripting Capabilities:** Customize with client scripts, global scripts, and styles.
- **Efficient Workflow:** Use subtle shortcuts like image dropping and streamlined page copying and more to efficiently develop pages.
- **One-Click Publishing:** Instantly share your creations with the world in a single click.
- **Performance Excellence:** Frappe Builder does not bloat web pages with unnecessary scripts hence pages built with Frappe Builder are highly performant, consistently scoring high on Google Lighthouse tests.
Most existing solutions were either too complex, too restrictive, or difficult to integrate with the Frappe ecosystem. Additionally, pages built with these tools were often bloated with unnecessary scripts and styles. I wanted to take a stab at solving this problem while prioritising performance from day one. I aimed to address two major issues with this project: providing an intuitive way to design a web page and enabling one-click publishing. As a web developer, it helps me scratch my own itch, and I hope it helps others too.

## Getting Started
### Key Features

### Managed Hosting
-**Intuitive Visual Builder:** Simplify your workflow with a Figma-like editor.
- 📱 **Responsive Views:** Ensure your sites look great on any device without the fuss.
- 🛠️ **Frappe CMS Integration:** Easily fetch data from your database and create dynamic pages.
- 🧑‍💻 **Scripting Capabilities:** Customize with client scripts, global scripts, and styles.
- 🚀 **One-Click Publishing:** Instantly share your creation with the world in a single click.
-**Performance Excellence:** Frappe Builder does not bloat web pages with unnecessary scripts hence pages built with Frappe Builder are highly performant, consistently scoring high on Google Lighthouse tests.

Get started with your personal or business site with a few clicks on [Frappe Cloud](https://frappecloud.com/builder/signup).
### Under the Hood

### Docker (Recommended)
- [Frappe Framework](https://github.com/frappe/frappe): A full-stack web application framework.
- [Frappe UI](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.

The quickest way to set up Frappe Builder and take it for a test ride.

Frappe framework is multi-tenant and supports multiple apps by default. This docker compose is just a standalone version with Frappe Builder pre-installed. Just put it behind your desired reverse-proxy if needed, and you're good to go.

If you wish to use multiple Frappe apps or need multi-tenancy. Take a look at our production ready self-hosted workflow, or join us on Frappe Cloud to get first party support and hassle-free hosting.

**Step 1**: Setup folder and download the required files
## Getting Started (Production)

mkdir frappe-builder
cd frappe-builder
### Managed Hosting

**Step 2**: Download the required files
Get started with your personal or business site with a few clicks on Frappe Cloud - our official hosting service.
<div>
<a href="https://frappecloud.com/builder/signup" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/try-on-fc-white.png">
<img src="https://frappe.io/files/try-on-fc-black.png" alt="Try on Frappe Cloud" height="28" />
</picture>
</a>
</div>

Docker Compose File:

wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/builder/develop/docker/docker-compose.yml
### Self Hosting

Frappe Builder bench setup script
Follow these steps to set up Frappe Builder in production:

wget -O init.sh https://raw.githubusercontent.com/frappe/builder/develop/docker/init.sh
**Step 1**: Download the easy install script

**Step 3**: Run the container and daemonize it
```bash
wget https://frappe.io/easy-install.py
```

docker compose up -d
**Step 2**: Run the deployment command

**Step 4**: The site [http://builder.localhost](http://builder.localhost) should now be available. The default credentials are:
```bash
python3 ./easy-install.py deploy \
--project=builder_prod_setup \
--email=email@example.com \
--image=ghcr.io/frappe/builder \
--version=stable \
--app=builder \
--sitename subdomain.domain.tld
```

> username: administrator
> password: admin
Replace the following parameters with your values:
- `email@example.com`: Your email address
- `subdomain.domain.tld`: Your domain name where Builder will be hosted

### Self-hosting
The script will set up a production-ready instance of Frappe Builder with all the necessary configurations in about 5 minutes.

If you prefer self-hosting, follow the official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
## Getting Started (Development)

## Want to just try out or contribute?
### Docker

### Codespaces
You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, run following command:

https://github.com/frappe/builder/assets/13928957/c96ce2ce-9eb3-4bd5-8e92-0b39d971cb00
**Step 1**: Setup folder and download the required files

1. Open [this link](https://github.com/codespaces/new?hide_repo_select=true&ref=master&repo=587413812&skip_quickstart=true&machine=standardLinux32gb&devcontainer_path=.devcontainer%2Fdevcontainer.json&geo=SoutheastAsia) and click on "Create Codespace".
2. Wait for initialization (~15 mins).
3. Run `bench start` from the terminal tab.
4. Click on the link beside "8000" port under "Ports" tab.
5. Log in with "Administrator" as the username and "admin" as the password.
6. Go to `<random-id>.github.dev/builder` to access the builder interface.
```bash
mkdir frappe-builder && cd frappe-builder
wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/builder/develop/docker/docker-compose.yml
wget -O init.sh https://raw.githubusercontent.com/frappe/builder/develop/docker/init.sh
```

### Local Setup
**Step 2**: Run the container

1. [Install Bench](https://github.com/frappe/bench).
2. Install Frappe Builder app:
```sh
$ bench get-app builder
```
3. Create a site with the builder app:
```sh
$ bench --site sitename.localhost install-app builder
```
4. Open the site in the browser:
```sh
$ bench browse sitename.localhost --user Administrator
```
5. Access the builder page at `sitename.localhost:8000/builder` in your web browser.
```bash
docker compose up
```

## Need help?
Wait until the setup script creates a site and you see `Current Site set to builder.localhost` in the terminal. Once done, the site [http://builder.localhost:8000](http://builder.localhost:8000) should now be available.

Join our [telegram group](https://t.me/frappebuilder) for instant help.
**Credentials:**
Username: `Administrator`
Password: `admin`

## License
### Local Setup

[GNU Affero General Public License v3.0](LICENSE)
1. [Setup Bench](https://docs.frappe.io/framework/user/en/installation).
1. In the frappe-bench directory, run `bench start` and keep it running.
1. Open a new terminal session and cd into `frappe-bench` directory and run following commands:
```bash
bench get-app builder
bench new-site builder.localhost --install-app builder
bench browse builder.localhost --user Administrator
```
1. Access the builder page at `builder.localhost:8000/builder` in your web browser.

**For Frontend Development**
1. Open a new terminal session and run the following commands:
```bash
cd frappe-bench/apps/builder
yarn install
yarn dev --host
```
1. Now, you can access the site on vite dev server at `http://builder.localhost:8080`

**Note:** You'll find all the code related to Builder's frontend inside `frappe-bench/apps/builder/frontend`

<h2></h2>

### Links

- [Telegram Public Group](https://t.me/frappebuilder)
- [Discuss Forum](https://discuss.frappe.io/c/frappe-builder/83)
- [Documentation](https://docs.frappe.io/builder)
- [Figma Plugin (Beta)](https://www.figma.com/community/plugin/1417835732014419099/figma-to-frappe-builder)

<br>
<br>
<div align="center">
<a href="https://frappe.io" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
</picture>
</a>
</div>
8 changes: 8 additions & 0 deletions builder/api.py
Original file line number Diff line number Diff line change
Expand Up @@ -215,3 +215,11 @@ def get_apps():
app_list += filter(lambda app: app.get("name") != "builder", apps)

return app_list


@frappe.whitelist()
def update_page_folder(pages: list[str], folder_name: str) -> None:
if not frappe.has_permission("Builder Page", ptype="write"):
frappe.throw("You do not have permission to update page folder.")
for page in pages:
frappe.db.set_value("Builder Page", page, "project_folder", folder_name, update_modified=False)
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"table_fieldname": "client_scripts"
}
],
"modified": "2023-11-27 13:05:19.427647",
"modified": "2024-11-13 20:08:54.615438",
"modified_by": "Administrator",
"module": "Builder",
"name": "Builder Client Script",
Expand Down Expand Up @@ -73,5 +73,6 @@
],
"sort_field": "modified",
"sort_order": "DESC",
"states": []
"states": [],
"track_changes": 1
}
11 changes: 9 additions & 2 deletions builder/builder/doctype/builder_page/builder_page.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"set_meta_tags",
"options_tab",
"authenticated_access",
"disable_indexing"
"disable_indexing",
"project_folder"
],
"fields": [
{
Expand Down Expand Up @@ -194,11 +195,17 @@
"fieldname": "disable_indexing",
"fieldtype": "Check",
"label": "Disable Indexing"
},
{
"fieldname": "project_folder",
"fieldtype": "Link",
"label": "Project Folder",
"options": "Builder Project Folder"
}
],
"index_web_pages_for_search": 1,
"links": [],
"modified": "2024-09-02 14:20:24.457766",
"modified": "2024-11-26 17:03:15.281018",
"modified_by": "Administrator",
"module": "Builder",
"name": "Builder Page",
Expand Down
Loading

0 comments on commit 2185b3f

Please sign in to comment.