كيفية إستخدام ملفات React مع فلاسك Flask؟

Mohssen A Mohssen · 26 ديسمبر 2021

لدي تطبيق مبني بإستخدام React (عبر الأداة create-react-app) وقمت بتنفيذ الأمر npm run build لكي أحصل على ملفات المشروع النهائي، وأصبح لدي الملفات التالية:

- build
  |- static
  | |- css
  | |   |- style.css
  | |   |- style.css.map
  | |- js
  |     |- main.js
  |     |- main.js.map
  |- index.html
  |- service-worker.js

حاول أن أقوم بإضافة كل هذه الملفات في المجلد static الخاص بفلاسك لكي يمكن الوصول إليهم بدون كتابة مسارات routes مخصصة لهم، ثم قمت بعمل مسار لإرسال ملف index.html:

@static.route('/')
def serve_static_index():
    return send_from_directory('../client/build/', 'index.html')

لكن المشكلة الآن هو أن الموقع يعمل فقط إذا قام المستخدم بالدخول إلى الصفحة الرئيسية فقط، ولكن عند زيارة أي مسار مختلف (حتى وإن كان المسار موجود في تطبيق React عبر react-router-dom) فسوف يحصل على خطأ بعدم وجود هذا المسار.

كيفية إرسال هذه الملفات عندما يزور المستخدم أي مسار في التطبيق؟

سامح أشرف · 26 ديسمبر 2021

عندما تقوم بإستضافة تطبيقات ذات الصفحة الواحدة Single Page Application (SPA) فسيتم إدارة أغلب المسارات من خلال كود الواجهة الأمامية عبر JavaScript (لكي لا يتم إعادة تحميل الصفحة من الخادم) وبالتالي يجب أن يقوم الخادم بإرسال ملف index.html عند زيارة أي مسار (حتى إن لم يوجد هذا المسار في تطبيق فلاسك Flask) وذلك من خلال الكود التالي:

from flask import Flask, send_from_directory
import os

# يجب تحديد المجلد الصحيح الذي يحتوي على ملفات الواجهة الأمامية هنا
app = Flask(__name__, static_folder='client/build')

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')


if __name__ == '__main__':
    app.run()

بهذا الشكل سوف يتم إرجاع الملف index.html في كل المسارات غير المحددة بالفعل في التطبيق، أي أن أي مسار آخر موجود في فلاسك Flask سوف يعمل بدون مشكلة.

كيفية إستخدام ملفات React مع فلاسك Flask؟

السؤال

Mohssen A Mohssen

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية