1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Application architecture | pywebview (v2.4)</title>
<meta name="description" content="Build GUI for your Python program with JavaScript, HTML, and CSS">
<link rel="preload" href="/2.4/assets/css/0.styles.e542dfbb.css" as="style"><link rel="preload" href="/2.4/assets/js/app.ab883ad2.js" as="script"><link rel="preload" href="/2.4/assets/js/32.6c8529fe.js" as="script"><link rel="prefetch" href="/2.4/assets/js/10.946430c0.js"><link rel="prefetch" href="/2.4/assets/js/11.9f37de77.js"><link rel="prefetch" href="/2.4/assets/js/12.cc649247.js"><link rel="prefetch" href="/2.4/assets/js/13.94ca571d.js"><link rel="prefetch" href="/2.4/assets/js/14.a047eef4.js"><link rel="prefetch" href="/2.4/assets/js/15.788bb271.js"><link rel="prefetch" href="/2.4/assets/js/16.694894b2.js"><link rel="prefetch" href="/2.4/assets/js/17.2edfeaf2.js"><link rel="prefetch" href="/2.4/assets/js/18.7b4619dc.js"><link rel="prefetch" href="/2.4/assets/js/19.ec102f84.js"><link rel="prefetch" href="/2.4/assets/js/2.06af3526.js"><link rel="prefetch" href="/2.4/assets/js/20.b1804ec3.js"><link rel="prefetch" href="/2.4/assets/js/21.82f7ca23.js"><link rel="prefetch" href="/2.4/assets/js/22.0e759d36.js"><link rel="prefetch" href="/2.4/assets/js/23.8e7b242c.js"><link rel="prefetch" href="/2.4/assets/js/24.720f51e9.js"><link rel="prefetch" href="/2.4/assets/js/25.3af86868.js"><link rel="prefetch" href="/2.4/assets/js/26.562c94d4.js"><link rel="prefetch" href="/2.4/assets/js/27.7c95cefd.js"><link rel="prefetch" href="/2.4/assets/js/28.d5836b93.js"><link rel="prefetch" href="/2.4/assets/js/29.528821ab.js"><link rel="prefetch" href="/2.4/assets/js/3.c462cbf1.js"><link rel="prefetch" href="/2.4/assets/js/30.e6e32fda.js"><link rel="prefetch" href="/2.4/assets/js/31.c651468e.js"><link rel="prefetch" href="/2.4/assets/js/33.96fe48c6.js"><link rel="prefetch" href="/2.4/assets/js/34.1503f1f8.js"><link rel="prefetch" href="/2.4/assets/js/35.2c565ae8.js"><link rel="prefetch" href="/2.4/assets/js/36.60799f3e.js"><link rel="prefetch" href="/2.4/assets/js/37.5656488c.js"><link rel="prefetch" href="/2.4/assets/js/38.30116eb6.js"><link rel="prefetch" href="/2.4/assets/js/39.8b7a8ec5.js"><link rel="prefetch" href="/2.4/assets/js/4.cc18902f.js"><link rel="prefetch" href="/2.4/assets/js/40.14c37596.js"><link rel="prefetch" href="/2.4/assets/js/5.b85830ed.js"><link rel="prefetch" href="/2.4/assets/js/6.fe285e19.js"><link rel="prefetch" href="/2.4/assets/js/7.5eeb60d8.js"><link rel="prefetch" href="/2.4/assets/js/8.b9ad99cd.js"><link rel="prefetch" href="/2.4/assets/js/9.6a770a26.js">
<link rel="stylesheet" href="/2.4/assets/css/0.styles.e542dfbb.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/2.4/" class="home-link router-link-active"><!----> <span class="site-name">pywebview (v2.4)</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/2.4/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/2.4/examples/" class="nav-link">Examples</a></div><div class="nav-item"><a href="/2.4/contributing/" class="nav-link">Contributing</a></div><div class="nav-item"><a href="https://pywebview.flowrl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Current version
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/r0x0r/pywebview/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
Changelog
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/2.4/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/2.4/examples/" class="nav-link">Examples</a></div><div class="nav-item"><a href="/2.4/contributing/" class="nav-link">Contributing</a></div><div class="nav-item"><a href="https://pywebview.flowrl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Current version
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/r0x0r/pywebview/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
Changelog
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>Basics</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/2.4/guide/installation.html" class="sidebar-link">Installation</a></li><li><a href="/2.4/guide/usage.html" class="sidebar-link">Usage</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Development</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/2.4/guide/api.html" class="sidebar-link">API</a></li><li><a href="/2.4/guide/architecture.html" class="active sidebar-link">Application architecture</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/2.4/guide/architecture.html#local-web-server" class="sidebar-link">Local web server</a></li><li class="sidebar-sub-header"><a href="/2.4/guide/architecture.html#serverless" class="sidebar-link">Serverless</a></li></ul></li><li><a href="/2.4/guide/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/2.4/guide/freezing.html" class="sidebar-link">Freezing</a></li><li><a href="/2.4/guide/security.html" class="sidebar-link">Security</a></li><li><a href="/2.4/guide/virtualenv.html" class="sidebar-link">Virtual environment</a></li><li><a href="/2.4/guide/renderer.html" class="sidebar-link">Web engine</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="application-architecture"><a href="#application-architecture" aria-hidden="true" class="header-anchor">#</a> Application architecture</h1> <p>There are two ways to build your application using <em>pywebview</em>:</p> <ol><li>By running a local web server</li> <li>Going serverless with <em>pywebview</em>'s JS API and serving local files.</li></ol> <h2 id="local-web-server"><a href="#local-web-server" aria-hidden="true" class="header-anchor">#</a> Local web server</h2> <p>Running a local web server is a traditional way to build your local application. This way everything is served from a local web server and <em>pywebview</em> points to the URL provided by the server. In this model the server is responsible for both serving static contents and handling API calls.
When building an application this way, you should protect your API calls against CSRF attacks. See <a href="/2.4/guide/security.html">security</a> for more information.</p> <p><a href="https://github.com/r0x0r/pywebview/tree/master/examples/flask_app" target="_blank" rel="noopener noreferrer">Flask-based application<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><strong>Pros</strong>:</p> <ul><li>Ability to pack an existing web application as a local one.</li> <li>Easier debugging with an external browser.</li></ul> <p><strong>Cons</strong></p> <ul><li>Has to rely on a third party server software</li> <li>Security considerations must be taken into account</li></ul> <h2 id="serverless"><a href="#serverless" aria-hidden="true" class="header-anchor">#</a> Serverless</h2> <p>Another way to build an application is to use <em>pywebview</em>'s provided JS API and serve static files locally. When built this way, the application does not rely on any external libraries.</p> <p><strong>Pros</strong>:</p> <ul><li>No external dependencies</li> <li>More straightforward architecture</li> <li>No risk of CSRF attacks</li></ul> <p><strong>Cons</strong></p> <ul><li>Debugging has to be done inside the application using provided debugging tools</li></ul> <p><a href="https://github.com/r0x0r/pywebview/tree/master/examples/todos" target="_blank" rel="noopener noreferrer">Serverless application<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/r0x0r/pywebview/edit/docs/docs/guide/architecture.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/2.4/guide/api.html" class="prev">
API
</a></span> <span class="next"><a href="/2.4/guide/debugging.html">
Debugging
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/2.4/assets/js/app.ab883ad2.js" defer></script><script src="/2.4/assets/js/32.6c8529fe.js" defer></script>
</body>
</html>
|
