environment structure
$home = /dev/frappe-bench/
1. Create new app
bench new-app myapp1
and key in App Description and other information.
App wil appear in
$home/apps/myapp1
App structure
myapp1
├── MANIFEST.in
├── README.md
├── license.txt
├── myapp1
│ ├── __init__.py
│ ├── config
│ │ ├── __init__.py
│ │ ├── desktop.py
│ │ └── docs.py
│ ├── hooks.py
│ ├── modules.txt
│ ├── myapp1
│ │ └── __init__.py
│ ├── patches.txt
│ ├── templates
│ │ ├── __init__.py
│ │ ├── generators
│ │ │ └── __init__.py
│ │ ├── includes
│ │ └── pages
│ │ └── __init__.py
│ └── www
├── myapp1.egg-info
│ ├── PKG-INFO
│ ├── SOURCES.txt
│ ├── dependency_links.txt
│ ├── not-zip-safe
│ ├── requires.txt
│ └── top_level.txt
├── requirements.txt
└── setup.py
2. Create webview and page controller
create html in folder www/myapp1_index.html
<p class="intro">Car</p>
<p>Brand: {{car.brand}}</p>
<p>Color: {{car.color}}</p>
create py in folder www/myapp1_index.py for page context data
import frappe
def get_context(context):
context.car = dict(brand="Toyota",color="Red")
3. Create js and css
create folder public/js and public/css in ../myapp1/myapp1/
for public/css create myapp-demo.css
.intro {
background-color:yello;
}
for public/js create myapp-demo.js
alert("Hello from myapp-demo.js");
Create build.json at public/build.json to config the js/css file
{
"myapp1/css/myapp1.css": [
"public/css/myapp-demo.css"
],
"myapp1/js/myapp1.js": [
"public/js/myapp-demo.js"
]
}
4. From hooks.py file add configuration
# include js, css files in header of web template
web_include_css = "/assets/myapp1/css/myapp1.css"
web_include_js = "/assets/myapp1/js/myapp1.js"
5. Final app tree
myapp1
├── __init__.py
├── config
│ ├── __init__.py
│ ├── desktop.py
│ └── docs.py
├── hooks.py
├── hooks.pyc
├── modules.txt
├── myapp1
│ ├── __init__.py
├── patches.txt
├── public
│ ├── build.json
│ ├── css
│ │ ├── myapp-demo.css
│ │ └── myapp1.css
│ └── js
│ ├── myapp-demo.js
│ └── myapp1.js
├── templates
│ ├── __init__.py
│ ├── generators
│ │ └── __init__.py
│ ├── includes
│ └── pages
│ └── __init__.py
└── www
├── myapp1_index.html
├── myapp1_index.py
6. Install app with command
bench --site site1.local install-app myapp1
bench --site site1.local sync-www
7. Run app
http://localhost:8000/myapp1_index
Source code
https://github.com/wisaruthk/myapp1.git
kajookdev 