• pynecone Self-Hosting example
  • The demo of my working case
  • pcconfig.py
    • Explanation of pcconfig.py
    • The plan for nginx setting.
  • Nginx Settings
    • /etc/nginx/nginx.conf
    • /somepath/my-nginx-sites-enabled/xxxxx-backend.mydomain.net
    • /somepath/my-nginx-sites-enabled/xxxxx-frontend.mydomain.net

pynecone Self-Hosting example

The demo of my working case

In my case, my frontend code is running on
https://pynecone-frontend.covidicq.net/
And backend code is running on
https://pynecone-backend.covidicq.net/
It's work for my snake game example.

The source code of snakegame is on
https://github.com/pynecone-io/pynecone-examples/tree/main/snakegame
And welcome to play and give me feedback
and I can improve it more:)
https://youtu.be/q2ydu3Wl-T0 <– [Video]Work for App, pc browser and mobile browser,
https://youtu.be/ZxBTrUvR3jo <– [Video]Play on native modible app
https://files.covidicq.net/python/snakegame.apk <- Download android apk

How do I make my snake game on self-hosting ?

I will guide you how to setting that in the following tutorial.

pcconfig.py

import pynecone as pc
my_deploy_config = pc.Config(
    app_name="myapp",
    port=3711,
    backend_port=8701,
    api_url="https://xxxxx-backend.mydomain.net",
    bun_path="$HOME/.bun/bin/bun",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.PROD,
)
config = my_deploy_config

Explanation of pcconfig.py

The both frontend code and backend code refers to this same configuration.
This config is says these three things
frontend will service in http://localhost:3711
backend will service in http://localhost:8701
In the frontend's source code, it will communicate with the backend on
https://xxxxx-backend.mydomain.net

The plan for nginx setting.

After we have this config, we need to add nginx 
setting that can match to this config.

In my strategy, I assign one domain for the frontend and another domain for the backend.
So when I setup my nginx setting, my plan is
(1)mapping https://xxxxx-backend.mydomain.net -> http://localhost:8701
(2)mapping https://xxxxx-frontend.mydomain.net -> http://localhost:3711
After these two things are finished, everything can run well .

The following is my detail setting related to nginx

Nginx Settings

/etc/nginx/nginx.conf

...
include /somepath/my-nginx-sites-enabled/*
...

/somepath/my-nginx-sites-enabled/xxxxx-backend.mydomain.net

server{
    server_name xxxxx-backend.mydomain.net;
    location / {
        proxy_pass http://localhost:8701;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
   }
    listen 443 ssl; # managed by Certbot
    ssl_certificate /xxx/xxx/fullchain.pem; # managed by Certbot
    ssl_certificate_key /xxx/xxx/privkey.pem; # managed by Certbot
}

/somepath/my-nginx-sites-enabled/xxxxx-frontend.mydomain.net

server{
    server_name xxxxx-frontend.mydomain.net;
    location / {
        proxy_pass http://localhost:3711;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
    }
    listen 443 ssl; # managed by Certbot
    ssl_certificate /xxx/xxx/fullchain.pem; # managed by Certbot
    ssl_certificate_key /xxx/xxx/privkey.pem; # managed by Certbot
}

The above two setting of nginx is the same.
What they do is support secure websocket and secure http.

In my case, I use AWS router-53 for DNS.
So the domain can mapping to the IP address that running my code.