ci: fix sample app for folder deployment (#2701)

Author: gavinbarron

.github/workflows/pr-chat.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Deploy pr mgt-chat
+name: Deploy mgt-chat sample app
 
 on:
   push:
@@ -36,6 +36,7 @@ jobs:
           cp samples/react-contoso/.env.sample samples/react-contoso/.env
           sed -i 's/REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"/REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"/g' samples/react-contoso/.env
           sed -i 's/REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"/REACT_APP_BACKEND_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT_BACKEND}}"/g' samples/react-contoso/.env
+          sed -i 's/REACT_APP_BASE_DIR="/"/REACT_APP_BASE_DIR="/next/mgt-chat""/g' samples/react-contoso/.env
 
       - name: Build 🛠
         run: |
@@ -47,4 +48,4 @@ jobs:
         with:
           branch: gh-pages
           folder: samples/react-contoso/build
-          target-folder: next/pr/mgt-chat
+          target-folder: next/mgt-chat

.github/workflows/storybook.yml

@@ -43,4 +43,5 @@ jobs:
           clean-exclude: |
             pr
             v3
+            mgt-chat
           token: ${{ secrets.GITHUB_TOKEN }}

samples/react-contoso/.env.sample

@@ -5,4 +5,5 @@ REACT_APP_SITE_NAME="Contoso Dashboard"
 REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"
 REACT_APP_URL_AZURE_FUNCTION="https://contoso.azurewebsites.net"
 REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"
+REACT_APP_BASE_DIR="/"
 

samples/react-contoso/package.json

@@ -2,6 +2,7 @@
   "name": "react-contoso",
   "version": "1.3.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
     "@fluentui/merge-styles": "^8.0.3",
     "@fluentui/react": "^8.0.0",

samples/react-contoso/src/Layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Header } from './components/Header';
 import { SideNavigation } from './components/SideNavigation';
 import { HomePage } from './pages/HomePage';
@@ -67,7 +67,7 @@ export const Layout: React.FunctionComponent = theme => {
   return (
     <FluentProvider theme={appContext.state.theme.fluentTheme}>
       <div className={styles.page}>
-        <HashRouter>
+        <BrowserRouter basename={process.env.BASE_DIR ?? '/'}>
           <Header></Header>
           <div className={styles.main}>
             <div
@@ -90,7 +90,7 @@ export const Layout: React.FunctionComponent = theme => {
               </Switch>
             </div>
           </div>
-        </HashRouter>
+        </BrowserRouter>
       </div>
     </FluentProvider>
   );

samples/react-contoso/src/index.tsx

@@ -21,7 +21,6 @@ brokerSettings.appId = process.env.REACT_APP_BACKEND_CLIENT_ID!;
 Providers.globalProvider = new Msal2Provider({
   clientId: process.env.REACT_APP_CLIENT_ID!,
   loginType: LoginType.Redirect,
-  redirectUri: window.location.protocol + '//' + window.location.host,
   scopes: [
     'Bookmark.Read.All',
     'Calendars.Read',