הצבת אפליקצית ריאקט כחלק מוורדפרס

לכאורה עולם הוורדפרס מנותק מעולם הריאקט וכשאנו לומדים או עובדים עם ריאקט, הדבר האחרון שקשור לריאקט הוא וורדפרס. וורדפרס היא CMS – מערכת לבנייה והצגת תוכן שמניעה חלק משמעותי מהאינטרנט. ריאקט (החלק שאני כותב עליו) היא פריימוורק לפיתוח פרונט אנד שמבוסס על ג'אווהסקריפט. לכאורה לא אמור להיות בינהן קשר – מי שכותב בריאקט כותב בריאקט, למה הוא צריך את וורדפרס?

אבל זה בהחלט יכול להיות ונפוץ יותר ממה שאתם מתארים לעצמכם. ריאקט יכולה לחיות בכל סביבה – אפילו בתוך פריימוורקים אחרים (כמו אנגולר) וכמובן בתוך וורפרס. וורדפרס היא נהדרת, אבל יש דברים שהיה תתקשה לעשות – ריאקט יכולה להשלים את הפתרון של וורדפרס. וורדפרס מצידה יכולה לתת סביבה תומכת ומקיפה לכל אפליקצית ריאקט – כזו שמטפלת בשרת, ב-access control, חנות ווקומורס וכו'.

זה בדיוק היה ה-use case שלי. באתר שלי שבו יש את הספרים בעברית ללימוד ג'אווהסקריפט, Node.js וריאקט – בחרתי בוורדפרס כי זה אפשר לי להרים אתר מהר מאוד, כולל ווקומרס לסליקה וניהול משתמשים והרשאות. אבל וורדפרס לא נתנה לי פתרון מספיק טוב להקמת אתר תרגול. אתר התרגול הוא אתר שהיה אמור להכיל תוכן בפורמט Markdown (פורמט טקסטואלי פשוט שאמור להיות מוכר לכל מתכנת), צובע את הקוד לפי סטנדרטים שונים ומחולק לנושאים ומציג את הפתרונות השונים לפי דרישה. בעתיד תהיה אפשרות להריץ את הקוד ולשנות אותו.

הייתי יכול לעשות את זה בוורדפרס, אבל זה היה מסורבל מאוד. בריאקט כזו אפליקציה לוקחת הרבה פחות זמן לפיתוח כיוון שיש לא מעט רכיבים שתומכים בהצגת markdown ובצביעת הקוד, אז בחרתי לעשות אותה עם create react app.

ואני לא היחיד – אם אתם צריכים לבנות מנגנונים שנסמכים על ג'אווהסקריפט באופן כבד – כמו מחשבוני המרה למיניהם, קריאות API או עיצובים ופונקציונליות שבאים בחינם עם קומפוננטות שונות של ריאקט, אבל רוצים לעשות את זה במסגרת וורדפרס קיים – זה בהחלט אפשרי וגם מומלץ.

איך עושים את זה?

עובדים עם create react app כרגיל עד הרגע המאושר שבו אתם רוצים לבצע דיפלוימנט. צרו דף כלשהו בוורדפרס שבו תרצו להכניס את האפליקציה. page או post. זה תלוי בכם – אבל מהרגע הזה – זה קל.

שינויים שיש לעשות ב-create react app

סביר להניח שאתם רוצים למקם את האפליקציה שלכם בדף ספציפי בוורדפרס. למשל דף calculator או, במקרה שלי בדף שנמצא בכתובת heb-learnjs. על מנת לבצע את זה, אנו צריכים לגרום ל-create react app לא לבנות את האפליקציה כאילו היא רצה בכתובת הראשית של הדומיין.

זו הסיבה שחייבים להכניס ב-package.json את כתובת התיקיה שבה אתם תציבו את הקבצים של האפליקציה, כלומר מה שנוצר בתיקית ה-build. שימו לב שהכתובת הזו לא חייבת להיות זהה לכתובת של הדף שלכם. גם אם אתם רוצים להציב את אפליקצית הריאקט בדף שה-slug שלו הוא whatever או ב-whereever או אפילו בשניהם, אתם צייבים להעלות את קבצי ה-CSS, ה-JS והתמונות אל תיקיה כלשהי בשרת שלכם. אתם חייבים להכניס את כתובת התיקיה הזו ב-homepage ב-package.json שלכם. למשל:

 "homepage": "https://hebdevbook.com/my-directory",

כך נראה ה-package.json של האפליקציה שלי למשל:

{
  "name": "js-learn-app",
  "version": "1.0.0",
  "private": true,
  "homepage": "https://hebdevbook.com/react-app",
  "dependencies": {
    "@material-ui/core": "^4.9.8",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "directory-tree": "^2.2.4",
    "install": "^0.13.0",
    "jss-rtl": "^0.3.0",
    "npm": "^6.14.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-markdown": "^4.3.1",
    "react-scripts": "3.4.1",
    "react-syntax-highlighter": "^12.2.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "npm run build-md-json && react-scripts start",
    "build": "npm run build-md-json && react-scripts build",
    "test": "npm run build-md-json && react-scripts test",
    "build-md-json": "node ./build-md-json"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

זה הכל! שומרים ומריצים npm run build. כל הקבצים של ריאקט נבנים לתוך תיקית build

העלאת הקבצים לשרת

השלב הבא הוא לפתוח FTP ולהעלות את הקבצים שיש בתיקיה אל הכתובת שבחרתם. כלומר אל מה שיש ב-homepage. בדומה שלעיל: react-app

העליתם? הכנסו עם הדפדפן אל התיקיה, אתם אמורים לראות את האפליקציה שלכם רצה כמו שצריך. שימו לב שהיא רצה עצמאית ולא כחלק מוורדפרס. בואו ונגרום לה לרוץ כחלק מוורדפרס ובתוך הסביבה של וורדפרס.

שינוי וורדפרס

כדי למנוע כניסה ישירה אל האפליקציה, הסירו את קובץ ה-index.html. כל קבצי ה-CSS, ה-JS, התמונות ושאר המשאבים שם, אבל לא ה-index.html. מומלץ מאוד גם להציב access control על הקבצים עצמם. אבל על זה אני לא דן במסגרת מאמר זה.

השלב הבא הוא ליצור את העמוד שאמור להכיל את האפליקציה שלכם. זה יכול להיות פוסט או יכול להיות עמוד. אחרי שיצרתם אותו, צריך למצוא דרך לשנות את תוכנו ב-PHP. הדרך הקלה ביותר היא פשוט להעתיק את page.php מהתבנית שלכם וליצור בתבנית הבת של וורדפרס page-ID.php כשה-ID הוא ה-ID של העמוד. הכי פשוט שיש. כך למשל יצרתי עמוד שה-slug שלו הוא heb-learnjs. ה-id שלו היה 2000 (במקרה יצא). ככה אני יכול למצוא את ה-id של כל פוסט או עמוד:

אחרי שביררתי מה ה-id, העתקה של ה-page (או ה-post) מתבנית האם, הדבקה לתבנית הבת עם ה-id. במקרה שלי: page-2000.php. ככה וורדפרס מאפשרת לנו לדרוס תבניות של עמודים ספציפיים. כך אני יכול לבצע עריכה. אני יכול להשאיר את ה-headers, לבצע בדיקת access control או כל קוד PHP אחר שאני רוצה. אבל הדבר הכי חשוב הוא שמתישהו בדף הזה, היכן שאני רוצה שהאפליקציה תרוץ, צריך להיות echo שמדפיס את מה שיש ב-index.html. שימו לב שאם יש בדף את ההדרים של וורדפרס, צריך לחתוך מה-index.html שיש בתיקית build את ה-headers של ה-HTML כמובן. מה שחשוב מאוד שיהיה שם זה כל השאר. קבצי ה-CSS והג'אווהסקריפט. הנה מה שעשיתי אצלי:

<?php

$user_id = get_current_user_id();

$permission = global_security_check ( $user_id );

if ( !$permission ) {
   wp_die( 'אין לך זכות גישה לאתר התרגול. ניתן לפנות ל [email protected] ונסייע לך במהירות האפשרית' );
} else {
  // echo HTML input
}

מה שהיה חשוב לי זה שתהיה לי את הגישה לפונקציות של וורדפרס על מנת שאוכל לבצע access control. אבל כמובן שברגע שיש לי אפליקציה שרצה בוורדפרס, אני יכול להתבסס על ה-API של וורדפרס כדי לקבל מידע. רק צריך להקפיד שה-fetch ישלח את כל העוגיות כדי שה-access control יעבוד.

סיכום

עולם הווב הוא רחב מאוד ויש בו הרבה אפליקציות ואתרים וגם דרכים לביצוע דברים. כאשר כדאי להכיר כמה שיותר כלים כדי לתת פתרונות טובים יותר. אפליקציות ריאקט הן בהרבה מקרים פתרון טוב וגם וורדפרס הוא פתרון טוב – אין מניעה להשתמש בשני הפתרונות ביחד כשצריך.

כמה הערות:

1. תהליך הבילד והדיפלוימנט הם ידניים פה ומועדים לפורענות כמובן, אבל אין שום בעיה לבצע אוטומציה של התהליך הזה.
2. בדוגמה שהראיתי פה עדיין אפשר להכנס לצ'אנקים של הקבצים ישירות, אפשר בקלות להכניס תיקיות לתוך ה-access control של וורדפרס (יש כמה פתרונות לזה). אבל קחו בחשבון שכל אפליקצית ריאקט קל להעתיק.
3. אם אתם בוני אתרים בוורדפרס אבל לא מכירים ריאקט – זה הזמן ללמוד. יש לי כאן באתר אוסף מדריכים פשוט ביותר שמלמד את העקרונות של ריאקט וכמובן בספר "ללמוד ריאקט בעברית" אני מלמד על הפריימוורק הפופולרי באופן מקיף.