# Flask-React
A Flask extension for server-side React component rendering with template-like functionality using Node.js.
## Features
- 🚀 Server-side React component rendering with Node.js
- 🎯 Flask template integration (like Jinja2)
- 🔄 Support for conditions, loops, and data binding
- 📦 Component management system
- 🎨 Props passing and state management
- 🔧 Easy Flask integration
- âš¡ Fast Node.js-based rendering engine
## Prerequisites
**Node.js is required** for server-side React rendering. Install Node.js before using this extension:
```bash
# Install Node.js (https://nodejs.org/)
# Verify installation:
node --version
npm --version
```
## Installation
```bash
pip install flask-react-ssr
```
## Quick Start
```python
from flask import Flask
from flask_react import FlaskReact
app = Flask(__name__)
react = FlaskReact(app)
@app.route('/')
def home():
return react.render_component('HelloWorld', {
'name': 'Flask React',
'items': ['Feature 1', 'Feature 2', 'Feature 3']
})
```
## Usage
### Creating Components
Create React components in your `components/` directory:
```jsx
// components/HelloWorld.jsx
function HelloWorld({ name, items }) {
return (
<div>
<h1>Hello {name}!</h1>
{items && items.length > 0 && (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>
);
}
```
### Template-like Rendering
```python
@app.route('/user/<username>')
def user_profile(username):
user_data = get_user(username)
return react.render_component('UserProfile', {
'user': user_data,
'is_authenticated': current_user.is_authenticated,
'permissions': get_user_permissions(username)
})
```
### Conditional Rendering
```jsx
// components/UserProfile.jsx
function UserProfile({ user, is_authenticated, permissions }) {
return (
<div>
<h1>{user.name}</h1>
{is_authenticated && (
<div className="authenticated-content">
<p>Welcome back!</p>
{permissions.includes('admin') && (
<button>Admin Panel</button>
)}
</div>
)}
{!is_authenticated && (
<div>
<p>Please log in to see more content.</p>
</div>
)}
</div>
);
}
```
## Configuration
```python
# Basic configuration
app.config['FLASK_REACT_COMPONENTS_DIR'] = 'components' # Components directory
app.config['FLASK_REACT_CACHE_COMPONENTS'] = True # Enable caching
app.config['FLASK_REACT_NODE_EXECUTABLE'] = 'node' # Node.js executable path
app.config['FLASK_REACT_NODE_TIMEOUT'] = 30 # Node.js process timeout
```
## Setup for Development
1. **Install Node.js dependencies**:
```bash
# Flask-React includes a package.json with all required dependencies
npm install
```
2. **Create components directory**:
```bash
mkdir components
```
The `package.json` includes all necessary dependencies:
- React and ReactDOM for SSR
- Babel presets for JSX, TypeScript, and modern JavaScript
- Proper Node.js version requirements (16+)
## Troubleshooting
### Node.js Not Found
If you get "Node.js not found" errors:
- Ensure Node.js is installed and in your PATH
- Set the Node.js path explicitly: `app.config['FLASK_REACT_NODE_EXECUTABLE'] = '/path/to/node'`
### Component Not Found
- Check that your components are in the correct directory
- Verify file extensions (.jsx, .js, .ts, .tsx are supported)
- Ensure component names match file names
### Rendering Timeout
- Increase timeout: `app.config['FLASK_REACT_NODE_TIMEOUT'] = 60`
- Check for infinite loops in your components
## License
MIT License
Raw data
{
"_id": null,
"home_page": null,
"name": "flask-react-ssr",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "flask, react, ssr, server-side-rendering, node.js, jsx",
"author": null,
"author_email": "Baraa Khanfar <baraa60@icloud.com>",
"download_url": "https://files.pythonhosted.org/packages/ab/d8/855bd23296c5600b278634377dc5938c877fd461d4123a406218e0cc60e1/flask_react_ssr-0.1.2.tar.gz",
"platform": null,
"description": "# Flask-React\n\nA Flask extension for server-side React component rendering with template-like functionality using Node.js.\n\n## Features\n\n- \ud83d\ude80 Server-side React component rendering with Node.js\n- \ud83c\udfaf Flask template integration (like Jinja2)\n- \ud83d\udd04 Support for conditions, loops, and data binding\n- \ud83d\udce6 Component management system\n- \ud83c\udfa8 Props passing and state management\n- \ud83d\udd27 Easy Flask integration\n- \u26a1 Fast Node.js-based rendering engine\n\n## Prerequisites\n\n**Node.js is required** for server-side React rendering. Install Node.js before using this extension:\n\n```bash\n# Install Node.js (https://nodejs.org/)\n# Verify installation:\nnode --version\nnpm --version\n```\n\n## Installation\n\n```bash\npip install flask-react-ssr\n```\n\n## Quick Start\n\n```python\nfrom flask import Flask\nfrom flask_react import FlaskReact\n\napp = Flask(__name__)\nreact = FlaskReact(app)\n\n@app.route('/')\ndef home():\n return react.render_component('HelloWorld', {\n 'name': 'Flask React',\n 'items': ['Feature 1', 'Feature 2', 'Feature 3']\n })\n```\n\n## Usage\n\n### Creating Components\n\nCreate React components in your `components/` directory:\n\n```jsx\n// components/HelloWorld.jsx\nfunction HelloWorld({ name, items }) {\n return (\n <div>\n <h1>Hello {name}!</h1>\n {items && items.length > 0 && (\n <ul>\n {items.map((item, index) => (\n <li key={index}>{item}</li>\n ))}\n </ul>\n )}\n </div>\n );\n}\n```\n\n### Template-like Rendering\n\n```python\n@app.route('/user/<username>')\ndef user_profile(username):\n user_data = get_user(username)\n return react.render_component('UserProfile', {\n 'user': user_data,\n 'is_authenticated': current_user.is_authenticated,\n 'permissions': get_user_permissions(username)\n })\n```\n\n### Conditional Rendering\n\n```jsx\n// components/UserProfile.jsx\nfunction UserProfile({ user, is_authenticated, permissions }) {\n return (\n <div>\n <h1>{user.name}</h1>\n {is_authenticated && (\n <div className=\"authenticated-content\">\n <p>Welcome back!</p>\n {permissions.includes('admin') && (\n <button>Admin Panel</button>\n )}\n </div>\n )}\n {!is_authenticated && (\n <div>\n <p>Please log in to see more content.</p>\n </div>\n )}\n </div>\n );\n}\n```\n\n## Configuration\n\n```python\n# Basic configuration\napp.config['FLASK_REACT_COMPONENTS_DIR'] = 'components' # Components directory\napp.config['FLASK_REACT_CACHE_COMPONENTS'] = True # Enable caching\napp.config['FLASK_REACT_NODE_EXECUTABLE'] = 'node' # Node.js executable path\napp.config['FLASK_REACT_NODE_TIMEOUT'] = 30 # Node.js process timeout\n```\n\n## Setup for Development\n\n1. **Install Node.js dependencies**:\n```bash\n# Flask-React includes a package.json with all required dependencies\nnpm install\n```\n\n2. **Create components directory**:\n```bash\nmkdir components\n```\n\nThe `package.json` includes all necessary dependencies:\n- React and ReactDOM for SSR\n- Babel presets for JSX, TypeScript, and modern JavaScript\n- Proper Node.js version requirements (16+)\n\n## Troubleshooting\n\n### Node.js Not Found\nIf you get \"Node.js not found\" errors:\n- Ensure Node.js is installed and in your PATH\n- Set the Node.js path explicitly: `app.config['FLASK_REACT_NODE_EXECUTABLE'] = '/path/to/node'`\n\n### Component Not Found\n- Check that your components are in the correct directory\n- Verify file extensions (.jsx, .js, .ts, .tsx are supported)\n- Ensure component names match file names\n\n### Rendering Timeout\n- Increase timeout: `app.config['FLASK_REACT_NODE_TIMEOUT'] = 60`\n- Check for infinite loops in your components\n\n## License\n\nMIT License\n",
"bugtrack_url": null,
"license": null,
"summary": "A Flask extension for server-side React component rendering using Node.js",
"version": "0.1.2",
"project_urls": {
"Bug Tracker": "https://github.com/baraakh30/flask-react/issues",
"Homepage": "https://github.com/baraakh30/flask-react",
"Repository": "https://github.com/baraakh30/flask-react"
},
"split_keywords": [
"flask",
" react",
" ssr",
" server-side-rendering",
" node.js",
" jsx"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "e57d7bfa9d301bb2107e686c283da30cc5d33ee009c13fb32a423957916972c2",
"md5": "730091b3f57d1ecb3ff232f020b13285",
"sha256": "7690f695152b66b96ebc19347d9a509a0ee59a4db266842e33d09cccf72b3f63"
},
"downloads": -1,
"filename": "flask_react_ssr-0.1.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "730091b3f57d1ecb3ff232f020b13285",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 13552,
"upload_time": "2025-09-10T20:29:52",
"upload_time_iso_8601": "2025-09-10T20:29:52.648473Z",
"url": "https://files.pythonhosted.org/packages/e5/7d/7bfa9d301bb2107e686c283da30cc5d33ee009c13fb32a423957916972c2/flask_react_ssr-0.1.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "abd8855bd23296c5600b278634377dc5938c877fd461d4123a406218e0cc60e1",
"md5": "1f51370d5b04032a39a436e63de884b4",
"sha256": "8e04230bc6f642e0762c0c9cac91037d76b9af09290109f52d2e7a9a923ca20d"
},
"downloads": -1,
"filename": "flask_react_ssr-0.1.2.tar.gz",
"has_sig": false,
"md5_digest": "1f51370d5b04032a39a436e63de884b4",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 16975,
"upload_time": "2025-09-10T20:29:53",
"upload_time_iso_8601": "2025-09-10T20:29:53.808340Z",
"url": "https://files.pythonhosted.org/packages/ab/d8/855bd23296c5600b278634377dc5938c877fd461d4123a406218e0cc60e1/flask_react_ssr-0.1.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-10 20:29:53",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "baraakh30",
"github_project": "flask-react",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "Flask",
"specs": [
[
">=",
"2.0.0"
]
]
},
{
"name": "Jinja2",
"specs": [
[
">=",
"3.0.0"
]
]
},
{
"name": "pytest",
"specs": [
[
">=",
"6.0.0"
]
]
},
{
"name": "pytest-cov",
"specs": [
[
">=",
"2.10.0"
]
]
},
{
"name": "black",
"specs": [
[
">=",
"21.0.0"
]
]
}
],
"lcname": "flask-react-ssr"
}
JSON
