Setup working routing and prepare the app for deploy.

Author: skrustev

package.json

@@ -3,6 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest"
+  },
   "dependencies": {
     "@igniteui/material-icons-extended": "^3.0.0",
     "@testing-library/jest-dom": "^6.1.3",
@@ -35,13 +42,6 @@
     "vite": "^4.4.9",
     "vitest-canvas-mock": "^0.3.3"
   },
-  "scripts": {
-    "start": "vite",
-    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "test": "vitest"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",

public/web.config

@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<configuration>
+    <system.webServer>
+        <rewrite>
+            <rules>
+                <rule name="React Routes" stopProcessing="true">
+                    <match url=".*" />
+                    <conditions logicalGrouping="MatchAll">
+                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
+                    </conditions>
+                    <action type="Rewrite" url="/react-grid-examples/" />
+                </rule>
+            </rules>
+        </rewrite>
+    </system.webServer>
+</configuration>

src/app/views/home/home-view.tsx

@@ -115,14 +115,14 @@ export default function HomeView() {
     ],
   ]);
   const location = useLocation();
-  const [gridView, setGridView] = useState("/inventory")
+  const [gridView, setGridView] = useState("inventory");
 
   useEffect(() => {
     registerIcon("file_download", FILE_DOWNLOAD, "custom");
   }, []);
 
   useEffect(() => {
-    setGridView(location.pathname.replace("/home", ""));
+    setGridView(location.pathname.replace("/home/", ""));
   }, [location]);
 
   return (
@@ -137,7 +137,7 @@ export default function HomeView() {
         )}
       </div>
       <div className="router-container">
-        <iframe src={gridView} height='100%' width='100%' style={{ border: 0 }}/>
+        <iframe src={import.meta.env.BASE_URL+ gridView} height='100%' width='100%' style={{ border: 0 }}/>
       </div>
     </div>
   );

src/main.tsx

@@ -5,7 +5,7 @@ import App from './app/app';
 import { routes } from "./app/app-routes";
 import 'react-app-polyfill/ie11';
 
-const basename = import.meta.env.VITE_BASENAME || '/';
+const basename = import.meta.env.BASE_URL || '/';
 
 /** Required in IE11 for Charts */
 Number.isNaN = Number.isNaN || function(value) {

vite.config.ts

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '/react-grid-examples/',
   build: {
     chunkSizeWarningLimit: 10 * 1024 * 1024, // 10 MB
   },