setup PHP with ReactJS development

2 years ago · ca5b525f22
parent 5757d76c8c
commit ca5b525f22
16 changed files with 35 additions and 23 deletions
--- a/config.php
+++ b/config.php
--- a/front/App.css
+++ b/front/App.css
--- a/front/App.test.tsx
+++ b/front/App.test.tsx
--- a/front/App.tsx
+++ b/front/App.tsx
--- a/front/index.css
+++ b/front/index.css
--- a/public/index.html
+++ b/public/index.html
@ -1,30 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
+
+    <script type="module" src="<?= FRONT_ADDR ?>/@vite/client"></script>
+
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
+
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@ -39,5 +42,8 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
+
+    <script src="index.tsx" type="module"></script>
+
  </body>
 </html>
--- a/front/index.tsx
+++ b/front/index.tsx
--- a/front/logo.svg
+++ b/front/logo.svg
--- a/front/react-app-env.d.ts
+++ b/front/react-app-env.d.ts
--- a/front/reportWebVitals.ts
+++ b/front/reportWebVitals.ts
--- a/front/setupTests.ts
+++ b/front/setupTests.ts
--- a/public/front
+++ b/public/front
@ -0,0 +1 @@
+../front
--- a/public/index.php
+++ b/public/index.php
@ -1,7 +1,7 @@
 <?php

-global $router;
-require "./vendor/autoload.php";
+require "../vendor/autoload.php";
+require "../config.php";

 use App\Controller\HelloPageController;

--- a/src/View/hello.html
+++ b/src/View/hello.html
@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-</head>
-<body>
-
-<h1>Hello</h1>
-<h3>World</h3>
-
-</body>
-</html>
--- a/src/View/hello.php
+++ b/src/View/hello.php
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script type="module">
+        import RefreshRuntime from "http://localhost:5173/@react-refresh"
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => {}
+        window.$RefreshSig$ = () => (type) => type
+        window.__vite_plugin_react_preamble_installed__ = true
+    </script>
+
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body id="root">
+    <script src="http://localhost:5173/index.tsx" type="module"></script>
+</body>
+</html>
--- a/vite.config.ts
+++ b/vite.config.ts