Example product page graphql and redux

.gitignore

@@ -1,3 +1,3 @@
-reactapp/.env.development
-reactapp/src/config.js
+*.env.development
+*config.js
 

Controller/OrderHistory/Index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ *
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace IntegerNet\ReactApp\Controller\OrderHistory;
+
+use Magento\Framework\App\Action\HttpGetActionInterface as HttpGetActionInterface;
+use Magento\Framework\Controller\ResultFactory;
+
+class Index extends \Magento\Contact\Controller\Index implements HttpGetActionInterface
+{
+    /**
+     * @return \Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        return $this->resultFactory->create(ResultFactory::TYPE_PAGE);
+    }
+}

Controller/Index/Index.php → Controller/Product/Index.php

@@ -4,7 +4,7 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
-namespace IntegerNet\ReactApp\Controller\Index;
+namespace IntegerNet\ReactApp\Controller\Product;
 
 use Magento\Framework\App\Action\HttpGetActionInterface as HttpGetActionInterface;
 use Magento\Framework\Controller\ResultFactory;

react-src/orderHistory/.env

@@ -0,0 +1,2 @@
+MAGENTO_DEPLOY_JS_PATH='../../../view/frontend/web/js/order-history/'
+MAGENTO_DEPLOY_CSS_PATH='../../../view/frontend/web/css/order-history/'

reactapp/config/webpack.config.js → react-src/orderHistory/config/webpack.config.js

@@ -155,13 +155,13 @@ module.exports = function(webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: isEnvProduction
-        ? '../../view/frontend/web/js/[name].js'
+        ? process.env.MAGENTO_DEPLOY_JS_PATH + '[name].js'
         : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
-        ? '../../view/frontend/web/js/[name].chunk.js'
+        ? process.env.MAGENTO_DEPLOY_JS_PATH + '[name].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
@@ -538,8 +538,8 @@ module.exports = function(webpackEnv) {
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
-          filename: '../../view/frontend/web/css/[name].css',
-          chunkFilename: '../../view/frontend/web/css/[name].chunk.css',
+          filename: process.env.MAGENTO_DEPLOY_CSS_PATH + '[name].css',
+          chunkFilename: process.env.MAGENTO_DEPLOY_CSS_PATH + '[name].chunk.css',
         }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without

reactapp/package.json → react-src/orderHistory/package.json

@@ -28,7 +28,6 @@
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",
-    "husky": "^2.3.0",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
     "jest": "24.7.1",
@@ -56,13 +55,15 @@
     "terser-webpack-plugin": "1.2.3",
     "throttle-debounce": "^2.1.0",
     "ts-pnp": "1.1.2",
+    "typescript": "^3.6.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
     "webpack-dev-server": "3.2.1",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "4.2.0"
   },
   "devDependencies": {
+    "husky": "^2.7.0",
     "prop-types": "^15.7.2"
   },
   "scripts": {

react-src/orderHistory/src/config.js.template

@@ -0,0 +1,36 @@
+/**
+ * in development (npm run start) we use the PROXY env value, configured in .env.development
+ * so make sure that file exists (see .env.development.example)
+ * If the variable `REACT_APP_PROXY` is not set, it will use the fallback
+ *
+ * in production (npm run build) we use base_url from magento, set directly in <head><script>,
+ * or if that's not found, it will use the hardcoded fallback
+ */
+const isDevelopment = !!process.env.REACT_APP_PROXY;
+
+const baseUrl = isDevelopment
+  ? '/'
+  : window.BASE_URL || 'https://magento.test/';
+
+const config = {
+  baseUrl,
+  forgotPasswordLink: baseUrl + 'customer/account/forgotpassword/',
+  loginLink: baseUrl + 'customer/ajax/login/',
+  logoutLink: baseUrl + 'customer/account/logout/',
+  orderViewLink: baseUrl + 'sales/order/view/order_id/',
+  graphqlLink: baseUrl + 'graphql'
+};
+
+export default config;
+
+export const orderHistoryQuery = `{
+ customerOrders{
+  items{
+    grand_total,
+    id,
+    increment_id,
+    status,
+    created_at
+  }
+ }
+}`;