-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #283 from frappe/for-release-v1.13
- Loading branch information
Showing
94 changed files
with
3,879 additions
and
2,635 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }}" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.