[TOC]
# 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.