Reflex Web Framework

Common errors

• ModuleNotFoundError: No module named 'reflex'

  cause The Reflex library is not installed in your current Python environment.
  fix Run `pip install reflex` in your active Python environment.

• reflex: command not found

  cause The Reflex CLI executable is not in your system's PATH. This often happens if Reflex was installed in a virtual environment that is not activated, or if the installation was incomplete.
  fix Ensure your virtual environment is activated before running `reflex` commands. If you're not using a virtual environment, verify `pip install reflex` completed successfully and your PATH is correctly configured for Python scripts.

• Error: The backend server failed to start.

  cause This generic error can indicate several issues, such as the default port (8000) being in use, a corrupt `reflex` project setup, or conflicts with other applications.
  fix Try changing the backend port with `reflex run --backend-port <new_port>`. If the issue persists, ensure no other process is using port 8000. For project corruption, consider `reflex init --clear-cache` or regenerating the project.

• Changes in my Python code are not updating in the browser.

  cause The Reflex development server might not be correctly detecting file changes, or the browser cache is serving an old version of the frontend.
  fix First, ensure `reflex run` is still active and hasn't crashed. If it is, try hard refreshing your browser (Ctrl+Shift+R or Cmd+Shift+R). If the problem persists, stop the server and restart it with `reflex run --clear-cache`.

Warnings

• breaking Reflex was formerly known as Pynecone. Upgrading from Pynecone (versions < 0.5.0) to Reflex (0.5.0+) involves significant API changes and is not a direct in-place upgrade.
  Fix: Review the migration guide on the official Reflex documentation for detailed instructions. It's often easier to start a new Reflex project and port your Pynecone logic.
• gotcha Event handlers in Reflex must be references to methods/functions, not function calls. Forgetting this will cause the handler to execute immediately instead of on the event.
  Fix: Pass the method/function name directly: `on_click=State.my_method` instead of `on_click=State.my_method()`.
• gotcha Sometimes, frontend changes might not reflect immediately due to browser or Reflex's build cache. This can lead to frustration during development.
  Fix: Try clearing your browser cache or run `reflex run --clear-cache` to force a rebuild of the frontend assets.
• deprecated The `app.compile()` method for deploying apps is deprecated. Application deployment is now managed automatically when calling `reflex deploy`.
  Fix: Remove any calls to `app.compile()`. Define your app with `app = rx.App(state=State)` and use `app.add_page(page_component, route='/')` for each page. Deployment is handled by the `reflex deploy` CLI command.

Install

• pip install reflex Install stable version

Imports

• reflex

  import reflex as rx

  The standard and recommended import alias for Reflex.
• State
  wrong:

  from reflex import State

  correct:

  class State(rx.State):

  While technically possible, directly importing 'State' is discouraged; it should be accessed as 'rx.State' after `import reflex as rx` for consistency and clarity within the framework's conventions.

Quickstart

This example creates a simple counter application. Save the code to a file (e.g., `your_app_name.py`). In your terminal, navigate to the directory containing the file. Run `reflex init` to initialize the project, then `reflex run` to start the development server. Access the app in your browser at `http://localhost:3000`.

import reflex as rx

class State(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

def index():
    return rx.center(
        rx.vstack(
            rx.heading(State.count, size="9"),
            rx.hstack(
                rx.button(
                    "Decrement",
                    color_scheme="red",
                    on_click=State.decrement,
                ),
                rx.button(
                    "Increment",
                    color_scheme="green",
                    on_click=State.increment,
                ),
            ),
            spacing="5",
        ),
        width="100vw",
        height="100vh",
    )

app = rx.App(state=State)
app.add_page(index, route="/")