Self Hosting Guide and Discussion

[picklelo]

This is a short guide on how to deploy an app on your own server. In this example, we will use DigitalOcean, but you can use any hosting provider.

1. Get a Cloud VM

• Create an account on https://www.digitalocean.com
• Create An Ubuntu VM in a region closest to you

• Select an instance

• Create your instance

2. Setup the environment.

You should have a public IP address for your VM to SSH into.

ssh root@<your IP>

Make sure you have installed python3, pip, nodejs, and zip.

apt-get update
apt install python3-pip nodejs zip

Now install Reflex

pip install reflex

3. Clone and run your app

Clone your code - we will just run the snake game example app.

git clone https://github.com/reflex-dev/reflex-examples.git
cd reflex-examples/snakegame

Update the api_url in the rxconfig.py with your IP address. Make sure to include http:// in the front.

import reflex as rx


config = rx.Config(
    app_name="snakegame",
    api_url="http://<your IP>:8000",
    db_url="sqlite:///reflex.db",
    env=rx.Env.DEV,
)

Now you can init and run the app in production mode on port 80. (Feel free to test in dev mode first).

reflex init
reflex run --port 80 # dev mode test
reflex run --env prod --port 80

You should now see your app live at your IP address.

Screen.Recording.2023-04-10.at.8.07.52.PM.mov

The next step would be to point your domain name to your IP.

Of course, this is a very basic, manual way to deploy. We will make a similar guide with Docker, and we are working on our reflex deploy service for one command deployment.

Hope this helps!

[martiniifun]

is "--port 80" means "--backend-port 80"? :)

[milochen0418]

It change to use the following commands now.

$ reflex run --help
Usage: reflex run [OPTIONS]

  Run the app in the current directory.

Options:
  --env [dev|prod]                The environment to run the app in.
                                  [default: Env.DEV]
  --frontend-only                 Execute only frontend.
  --backend-only                  Execute only backend.
  --loglevel [debug|info|warning|error|critical]
                                  The log level to use.  [default:
                                  LogLevel.ERROR]
  --frontend-port TEXT            Specify a different frontend port.
  --backend-port TEXT             Specify a different backend port.
  --backend-host TEXT             Specify the backend host.
  --help                          Show this message and exit.

You can set fronend port by --frontend-port and backend port by --backend-port

[NanoscaleSimulations]

Does this override api_url in rxconfig?
Or do they have different purpose?

[NanoscaleSimulations]

How do you make the deployment run in the background?

[Lendemor]

There are different options, here are a few, but not all of them:

• Use screen and detach.
• Use tmux and detach from session.
• Use systemd and configure a service that will run it for you on your server.

[abhishekanish]

can anyone tell how can we deploy both frontend and backend on IIS server

[paoloemilioserra]

Any help on self-hosting in Azure? In a container app you only have one port for ingress so the deployment won't work for Reflex. My line of thinking is to have a Web App for the front end and a Container app for the back end. The web app then can reroute the requests to the back end. Is it possible to reroute the calls to the rx.State as well?

[Alek99]

You should only need one ingress port 8000, the 3000 port is only serving files so just egress. I don't have much experience with Azure though

[paoloemilioserra]

Thanks I'll give it a go and let you know

[paoloemilioserra]

@Alek99 I've tried as you suggested. I received an error 243, here is the log I got from the console in Azure.

2023-09-11T09:30:28.187139004Z ───────────────────────────── Starting Reflex App ──────────────────────────────
2023-09-11T09:30:41.302161530Z building site...
2023-09-11T09:30:41.302211384Z Woke at 2023-09-11 09:30:28.234367
2023-09-11T09:30:41.302219370Z Updated at 2023-09-11 09:30:40.729334
2023-09-11T09:30:41.302224409Z Elapsed: 0:00:12.494967
2023-09-11T09:30:41.302228567Z done
2023-09-11T09:30:41.307427477Z Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 45/45 0:00:00
2023-09-11T09:31:37.838120988Z Creating Production Build failed with exit code 243
2023-09-11T09:31:37.838695288Z
2023-09-11T09:31:37.839012386Z > export-sitemap
2023-09-11T09:31:37.839567662Z > next build && next-sitemap && next export -o _static
2023-09-11T09:31:37.839888277Z
2023-09-11T09:31:37.840427413Z npm ERR! code EACCES
2023-09-11T09:31:37.900155501Z npm ERR! syscall mkdir
2023-09-11T09:31:37.900751685Z npm ERR! path /app/.npm
2023-09-11T09:31:37.901176305Z npm ERR! errno -13
2023-09-11T09:31:37.901594393Z npm ERR!
2023-09-11T09:31:37.902284975Z npm ERR! Your cache folder contains root-owned files, due to a bug in
2023-09-11T09:31:37.902893694Z npm ERR! previous versions of npm which has since been addressed.
2023-09-11T09:31:37.903325175Z npm ERR!
2023-09-11T09:31:37.903860504Z npm ERR! To permanently fix this problem, please run:
2023-09-11T09:31:37.904425681Z npm ERR! sudo chown -R 1000:1000 "/app/.npm"
2023-09-11T09:31:37.904772193Z
2023-09-11T09:31:37.905439933Z npm ERR! Log files were not written due to an error writing to the directory:
2023-09-11T09:31:37.905456945Z /app/.npm/_logs
2023-09-11T09:31:37.906218899Z npm ERR! You can rerun the command with --loglevel=verbose to see the logs in
2023-09-11T09:31:37.906236532Z your terminal
2023-09-11T09:31:37.906774478Z - info Linting and checking validity of types...
2023-09-11T09:31:37.907296562Z - info Creating an optimized production build...
2023-09-11T09:31:37.907616323Z
2023-09-11T09:31:37.908255598Z warn - The content option in your Tailwind CSS configuration is missing or
2023-09-11T09:31:37.908271849Z empty.
2023-09-11T09:31:37.908867742Z warn - Configure your content sources or your generated CSS will be missing
2023-09-11T09:31:37.908883021Z styles.
2023-09-11T09:31:37.909325555Z warn - https://tailwindcss.com/docs/content-configuration
2023-09-11T09:31:37.910072866Z - info Compiled successfully
2023-09-11T09:31:37.910569910Z - info Collecting page data...
2023-09-11T09:31:37.911191334Z - info Generating static pages (0/46)
2023-09-11T09:31:37.918272779Z - info Generating static pages (11/46)
2023-09-11T09:31:37.918296243Z - info Generating static pages (22/46)
2023-09-11T09:31:37.918304478Z - info Generating static pages (34/46)
2023-09-11T09:31:37.918310750Z - info Generating static pages (46/46)
2023-09-11T09:31:37.918315910Z - info Finalizing page optimization...
2023-09-11T09:31:37.918344454Z
2023-09-11T09:31:37.918352379Z Route (pages) Size First Load JS
2023-09-11T09:31:37.918358300Z ┌ ○ / 7.02 kB 246 kB
2023-09-11T09:31:37.918363630Z ├ /_app 0 B 199 kB
2023-09-11T09:31:37.918368740Z ├ ○ /404 977 B 214 kB
2023-09-11T09:31:37.918374090Z ├ ○ /data/contents/0 (390 ms) 5.65 kB 245 kB
2023-09-11T09:31:37.918379269Z ├ ○ /data/contents/10 5.91 kB 245 kB
2023-09-11T09:31:37.918386092Z ├ ○ /data/contents/11 6.05 kB 245 kB
2023-09-11T09:31:37.918391783Z ├ ○ /data/contents/12 6.05 kB 245 kB
2023-09-11T09:31:37.918514334Z ├ ○ /data/contents/13 6.04 kB 245 kB
2023-09-11T09:31:37.919237347Z ├ ○ /data/contents/14 6.12 kB 245 kB
2023-09-11T09:31:37.919783977Z ├ ○ /data/contents/15 5.65 kB 245 kB
2023-09-11T09:31:37.920411750Z ├ ○ /data/contents/16 5.64 kB 245 kB
2023-09-11T09:31:37.921116048Z ├ ○ /data/contents/17 5.64 kB 245 kB
2023-09-11T09:31:37.921714987Z ├ ○ /data/contents/18 5.64 kB 245 kB
2023-09-11T09:31:37.922356035Z ├ ○ /data/contents/19 5.66 kB 245 kB
2023-09-11T09:31:37.922797447Z ├ ○ /data/contents/20 5.86 kB 245 kB
2023-09-11T09:31:37.923471588Z ├ ○ /data/contents/21 5.88 kB 245 kB
2023-09-11T09:31:37.924097738Z ├ ○ /data/contents/22 5.87 kB 245 kB
2023-09-11T09:31:37.924673133Z ├ ○ /data/contents/23 5.89 kB 245 kB
2023-09-11T09:31:37.925249790Z ├ ○ /data/contents/24 5.89 kB 245 kB
2023-09-11T09:31:37.925850552Z ├ ○ /data/contents/28 7.88 kB 247 kB
2023-09-11T09:31:37.926446986Z ├ ○ /data/contents/29 6.06 kB 245 kB
2023-09-11T09:31:37.927013995Z ├ ○ /data/contents/30 5.87 kB 245 kB
2023-09-11T09:31:37.927583049Z ├ ○ /data/contents/5 5.67 kB 245 kB
2023-09-11T09:31:37.928179714Z ├ ○ /data/contents/6 6.1 kB 245 kB
2023-09-11T09:31:37.928789190Z ├ ○ /data/contents/7 6.1 kB 245 kB
2023-09-11T09:31:37.929362281Z ├ ○ /data/contents/8 5.91 kB 245 kB
2023-09-11T09:31:37.929987409Z ├ ○ /data/contents/9 5.91 kB 245 kB
2023-09-11T09:31:37.930590325Z ├ ○ /data/subjects/0 6.96 kB 246 kB
2023-09-11T09:31:37.931169296Z ├ ○ /data/subjects/1 7.04 kB 246 kB
2023-09-11T09:31:37.931771301Z ├ ○ /data/subjects/2 4.11 kB 243 kB
2023-09-11T09:31:37.932371993Z ├ ○ /data/subjects/3 6.92 kB 246 kB
2023-09-11T09:31:37.932953870Z ├ ○ /data/subjects/4 6.89 kB 246 kB
2023-09-11T09:31:37.933512113Z ├ ○ /data/topics/0 7.95 kB 247 kB
2023-09-11T09:31:37.934144795Z ├ ○ /data/topics/1 5.01 kB 244 kB
2023-09-11T09:31:37.934765946Z ├ ○ /data/topics/10 8.51 kB 247 kB
2023-09-11T09:31:37.935382017Z ├ ○ /data/topics/11 8.52 kB 247 kB
2023-09-11T09:31:37.935989182Z ├ ○ /data/topics/12 7.95 kB 247 kB
2023-09-11T09:31:37.936565688Z ├ ○ /data/topics/2 5 kB 244 kB
2023-09-11T09:31:37.937210804Z ├ ○ /data/topics/4 8.58 kB 248 kB
2023-09-11T09:31:37.937676534Z ├ ○ /data/topics/5 8.01 kB 247 kB
2023-09-11T09:31:37.938215648Z ├ ○ /data/topics/6 8.02 kB 247 kB
2023-09-11T09:31:37.938901841Z ├ ○ /data/topics/7 8.03 kB 247 kB
2023-09-11T09:31:37.939560994Z ├ ○ /data/topics/8 8.12 kB 247 kB
2023-09-11T09:31:37.940237860Z ├ ○ /login 3.77 kB 243 kB
2023-09-11T09:31:37.940878447Z ├ ○ /signup 3.8 kB 243 kB
2023-09-11T09:31:37.941493278Z └ ○ /test 3.86 kB 243 kB
2023-09-11T09:31:37.942049126Z + First Load JS shared by all 201 kB
2023-09-11T09:31:37.942638236Z ├ chunks/framework-3671d8951bf44e4e.js 45.2 kB
2023-09-11T09:31:37.943232807Z ├ chunks/main-e9eee232725cfc0f.js 29.7 kB
2023-09-11T09:31:37.943777471Z ├ chunks/pages/_app-4538b49fadae4468.js 123 kB
2023-09-11T09:31:37.944316978Z ├ chunks/webpack-d36b50b5fb8708d9.js 1.05 kB
2023-09-11T09:31:37.944749926Z └ css/6183595e93b039a3.css 1.41 kB
2023-09-11T09:31:37.945089304Z
2023-09-11T09:31:37.945839898Z ○ (Static) automatically rendered as static HTML (uses no initial props)
2023-09-11T09:31:37.946164891Z
2023-09-11T09:31:37.946867325Z ✨ Loading next-sitemap config: file:///app/.web/next-sitemap.config.js
2023-09-11T09:31:37.947353842Z ✅ Generation completed
2023-09-11T09:31:37.947856079Z ┌───────────────┬────────┐
2023-09-11T09:31:37.948370889Z │ (index) │ Values │
2023-09-11T09:31:37.948843389Z ├───────────────┼────────┤
2023-09-11T09:31:37.949335207Z │ indexSitemaps │ 1 │
2023-09-11T09:31:37.949880715Z │ sitemaps │ 1 │
2023-09-11T09:31:37.950342365Z └───────────────┴────────┘
2023-09-11T09:31:37.950784358Z -----------------------------------------------------
2023-09-11T09:31:37.951211694Z SITEMAP INDICES
2023-09-11T09:31:37.951640071Z -----------------------------------------------------
2023-09-11T09:31:37.951950867Z
2023-09-11T09:31:37.952384346Z ○ http://localhost:3000/sitemap.xml
2023-09-11T09:31:37.952672649Z
2023-09-11T09:31:37.953058897Z
2023-09-11T09:31:37.953454132Z -----------------------------------------------------
2023-09-11T09:31:37.953784906Z SITEMAPS
2023-09-11T09:31:37.954265159Z -----------------------------------------------------
2023-09-11T09:31:37.954571386Z
2023-09-11T09:31:37.955682841Z ○ http://localhost:3000/sitemap-0.xml
2023-09-11T09:31:37.955695224Z
2023-09-11T09:31:37.955731442Z
2023-09-11T09:31:37.956261762Z - warn "next export" is deprecated in favor of "output: export" in
2023-09-11T09:31:37.956274516Z next.config.js https://nextjs.org/docs/advanced-features/static-html-export
2023-09-11T09:31:37.956707033Z - info using build directory: /app/.web/.next
2023-09-11T09:31:37.957114258Z - info Copying "static build" directory
2023-09-11T09:31:37.957614431Z - info Launching 3 workers
2023-09-11T09:31:37.958106769Z - info Exporting (0/46)
2023-09-11T09:31:37.958550415Z - info Copying "public" directory
2023-09-11T09:31:37.958997761Z - info Exporting (11/46)
2023-09-11T09:31:37.959464478Z - info Exporting (22/46)
2023-09-11T09:31:37.959947319Z - info Exporting (34/46)
2023-09-11T09:31:37.960428818Z - info Exporting (46/46)
2023-09-11T09:31:37.960914333Z Export successful. Files written to /app/.web/_static
2023-09-11T09:31:37.961426779Z Run with --loglevel debug for the full log.
2023-09-11T09:31:37.963061230Z Creating Production Build: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 9/9 0:00:51
2023-09-11T09:31:37.963959441Z [09:31:37] Reflex app stopped. console.py:81

[lzalewsk]

@paoloemilioserra Please take a look at Ingress additional port.

[ericfeunekes]

I did it by creating two web apps, one for the front end and one for the backend, then exposing the required ports and setting the API_URL env var. That approach works well. I'm still trying to get the authentication working (#2704), but overall this is the best I've been able to find.

[andresgmg]

Can I make the deployment in GitHub pages? I only use the frontend, Every time I try to upload it through a static page it generates a backend error on port 8000... but my page will not use a backend, nor will it have a backend

[morawer]

I have the same problem, my web is only forntend but i have the same error.

[bigshirtjonny]

How can I apply an SSL cert through this digital ocean config?