PROPOSAL: Add startUI.appBasename option in next.config.js

README.md

@@ -87,6 +87,21 @@ Create a `.env` file at the root of the project with the following content:
 NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api
 ```
 
+## Change the app basename
+
+Udpate the `startUI.appBasename` in the `next.config.js` to change the url where the `app` (folder) is serve.
+
+ℹ️ Only accept first level path like ✅ `admin` (❌ `sub/path` will not work)
+
+```js
+// next.config.js
+module.exports = {
+  startUI: {
+    appBasename: 'app',
+  },
+}
+```
+
 ## Show hint on development environments
 
 Setup the `NEXT_PUBLIC_DEV_ENV_NAME` env variable with the name of the environment.
@@ -229,6 +244,8 @@ Then expose the `/out` folder.
 
 💡 You will need to setup your server to rewrite all `/app/*` urls to serve the `app.html` file.
 
+⚠️ If you changed the `startUI.appBasename` You will need to setup your server to rewrite all `/your-basename/*` urls to serve the `your-basename.html` file.
+
 #### Using Apache as your web server
 
 If you are using [apache](https://httpd.apache.org/) to statically deploy your app, you can use the following configuration for `public/.htaccess` :

next.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  startUI: {
+    appBasename: 'app',
+  },
   experimental: {
     outputStandalone: true,
   },
@@ -20,8 +23,8 @@ module.exports = {
       },
       // Rewrite everything else to use `pages/app`
       {
-        source: '/app/:any*',
-        destination: '/app/',
+        source: `/${this.startUI.appBasename}/:any*`,
+        destination: `/${this.startUI.appBasename}/`,
       },
     ];
   },

src/app/App.spec.tsx

@@ -1,8 +1,9 @@
 import { App } from '@/app/App';
+import { APP_BASENAME } from '@/constants/routing';
 import { act, render, screen } from '@/test/utils';
 
 beforeEach(() => {
-  window.history.pushState({}, '', '/app');
+  window.history.pushState({}, '', `/${APP_BASENAME}`);
 });
 
 test('Mount App without errors', async () => {

src/app/App.tsx

@@ -11,6 +11,7 @@ import {
   AuthenticatedRouteGuard,
   PublicOnlyRouteGuard,
 } from '@/app/router/guards';
+import { APP_BASENAME } from '@/constants/routing';
 import { Error404, ErrorBoundary } from '@/errors';
 
 const AdminRoutes = React.lazy(() => import('@/app/admin/AdminRoutes'));
@@ -22,7 +23,7 @@ const DashboardRoutes = React.lazy(
 export const App = () => {
   return (
     <ErrorBoundary>
-      <BrowserRouter basename="/app">
+      <BrowserRouter basename={`/${APP_BASENAME}`}>
         <Layout>
           <Suspense fallback={<Loader />}>
             <Routes>

src/constants/routing.ts

@@ -0,0 +1,3 @@
+import nextConfig from '../../next.config';
+
+export const APP_BASENAME = nextConfig.startUI.appBasename ?? 'app';

src/pages/app.tsx → src/pages/[app].tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
 
 import { Flex, Progress } from '@chakra-ui/react';
+import { GetStaticPaths, GetStaticProps } from 'next';
 import dynamic from 'next/dynamic';
 
 import { Viewport } from '@/components';
+import { APP_BASENAME } from '@/constants/routing';
 
 const Loading = () => (
   <Viewport>
@@ -36,3 +38,22 @@ const App = () => {
   return isLoading ? <Loading /> : <AppComponent />;
 };
 export default App;
+
+// Allows easy url change within the next.config.js
+export const getStaticPaths: GetStaticPaths = () => {
+  return {
+    paths: [
+      {
+        params: {
+          app: APP_BASENAME,
+        },
+      },
+    ],
+    fallback: false,
+  };
+};
+
+// Needed for getStaticPaths
+export const getStaticProps: GetStaticProps = () => ({
+  props: {},
+});

src/pages/index.tsx

@@ -5,11 +5,12 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import { Loader } from '@/app/layout';
+import { APP_BASENAME } from '@/constants/routing';
 
 const Index = () => {
   const router = useRouter();
   useEffect(() => {
-    router.push('/app');
+    router.push(`/${APP_BASENAME}`);
   }, [router]);
 
   return (