Getting Started With Reflex

Editor’s Note: On the 28th of June 2023, Pynecone rebranded to Reflex in order “to [align] with [the] goal of … remaining flexible and powerful.” (Source)
The text of this article has been updated to reflect these changes. The URL (slug) and header image have been retained.

Python. To some, it is the best thing since sliced bread. While you may not feel quite so strongly about it, Python is an undeniably popular language, consistently appearing among the top-ranked (or top-used) languages among developers, to say nothing of data scientists. And no wonder. It’s a general-purpose language that is capable of powering low-level, embedded applications, desktop applications and even web applications. With its utility across different fields and its open nature, the ecosystem contains a wide variety of tools seemingly tailored to match your specific needs. Nowhere is this variety more evident than in web development, where a developer has among the options to choose from Django, a batteries-included framework, and Flask, a barebones, micro-framework. The one thing that many popular frameworks have in common, though, is that they’re not 100% pure Python.

“Hang on a minute,” you’re probably thinking. “Last I checked, <insert your favourite framework name here> is a Python web framework. Python, not JavaScript or Go.”

via GIPHY (Fun fact, this a misquote.)

In order to build out a full-stack Django application, for example, one needs to be familiar with HTML, CSS, JavaScript and Django’s templating language. Enter Reflex, formerly known as Pynecone, a web framework that promises to free you of all that pesky JavaScript by granting you superpowers the ability to write your (stateful) frontend and back-end in Python.
That premise has been the basis for the development of other tools/frameworks like Streamlit and Anvil. But as the newest kid on the block, Reflex gets to be the focus of this article. (Would you be interested in learning about similar tools? If so, please let us know in the comments.)

Reflex is a web framework that was launched in December 2022 that promises to enable you to “[build] web apps in minutes. Deploy with a single command.” But how does it accomplish this? Off the Reflex website:

“Create your whole app in a single language. Don’t worry about writing APIs to connect your frontend and backend.”

The best way to see this in action is by writing a bit of code. Before that, however, a disclaimer: As of the date of publication, Reflex is still in beta. As such, some things may change with the passage of time and continued development of the framework. And, this goes without saying, it is definitely NOT suitable for use in production environments.
With that out of the way…

Prerequisites

To get Reflex up and running, you will need the following installed:

• Python 3.7+
  Some prior experience working with Python will definitely help but isn’t a requirement.
• NodeJS 16.8.0+
  Worry not, you won’t be required to write any actual JavaScript code.

Installation

While not mandatory, it is highly advisable to create a virtual environment for your project.
Once done, install the Reflex package:

pip install reflex

Create the Project

Unlike frameworks like Django which create the directory where your code will reside during project creation, you must first create the project directory, or folder, before creating the project.

# Create the project directory and change to it.
mkdir hello_world
cd hello_world

# Create the project.
reflex init

Migrating Existing Projects

If you had excitedly started working on a Pynecone project before the rebranding, you have not been left behind.
To migrate from Pynecone to Reflex, simply run the init command highlighted above in a directory that has the pcconfig.py file.

reflex init

Project Structure

Creating the project should result in a directory layout as follows:

hello_world
|___ .web
|___ assets
|___ hello_world
    |___ __init__.py
    |___ hello_world.py
|___ rxconfig.py

• .web: The compiled frontend output is stored here. You don’t really need to touch its contents unless debugging.
• assets: Static assets e.g., images, fonts, etc., are stored here.
• hello_world: The app logic is stored here. The directory and the Python file, hello_world.py, are named after the project parent directory.
• rxconfig.py: Application configuration is done here.

Run the Project

Running the application is as simple as:

reflex run

Running the above command will start the application at http://localhost:3000/.

If you wish to run the app on a different port:

reflex run --frontend-port 3001

Note for Windows Users:

As you run the application, you will likely see the message:

[WARNING] We strongly advise you to use Windows Subsystem for Linux (WSL) for optimal performance when using Reflex. Due to compatibility issues with one of our dependencies, Bun, you may
experience slower performance on Windows. By using WSL, you can expect to see a significant speed increase.

While your application will run, you will see performance gains if you switch to WSL.

And that’s it. You’ve got your first Reflex application up and running.
Future articles will guide you through more complex concepts like routing, states and components where you will really get to see the power of Reflex. Until then, stay tuned.