feat(project): remove github pages

docs/backend-services.md

@@ -1,7 +1,7 @@
 # Backend dependencies and architecture
 
 The application is built as a single page web app that can run without its own dedicated backend. This is useful for
-hosting it with a very simple, static host, like github pages. The server serves the static web content and the frontend
+hosting it with a very simple, static host. The server serves the static web content and the frontend
 calls the [JW Player Delivery API](https://developer.jwplayer.com/jwplayer/docs) directly.
 However, for additional functionality, the application can also connect to other backends to provide user
 accounts / authentication, subscription management, and checkout flows.

docs/build-from-source.md

@@ -119,9 +119,3 @@ It is recommended that this value be provided via a .env.local file or a github
 
 If you are using pre-compiled builds instead of building the code yourself, you can also set this value with the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey).
 Keep in mind, if the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey) is provided, it will be used even if the `APP_PLAYER_LICENSE_KEY` environment variable is set.
-
-### APP_GITHUB_PUBLIC_BASE_URL
-
-This value is used to set the URL of links in the app correctly when running on [github pages](easy-deployments.md#github-pages).
-By default, if `APP_GITHUB_PUBLIC_BASE_URL` is empty, the value will be based on the `git remote get-url origin` command.
-You can also pass your own `APP_GITHUB_PUBLIC_BASE_URL` envvar by running `APP_GITHUB_PUBLIC_BASE_URL=/my-base/ yarn deploy:github`.

docs/easy-deployments.md

@@ -10,7 +10,6 @@ The instructions in this document will help you deploy your fork of the ott-web-
 ## Supported Platforms
 
 - [Google Firebase](#google-firebase): Free, easy to use [web hosting service](https://firebase.google.com/) with [integrations](https://firebase.google.com/docs/hosting/github-integration) to deploy directly from github
-- [GitHub Pages](#github-pages): Static hosting [directly from a repository](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) though with some limitations
 
 ### Google Firebase
 
@@ -25,27 +24,3 @@ First, in your fork, you will need to update the project ID in [.firebaserc](.fi
 The easiest way to deploy is to use the [Firebase-Github integration](https://firebase.google.com/docs/hosting/github-integration). You can find the action [.yml specifications here](https://github.com/marketplace/actions/deploy-to-firebase-hosting) to deploy to a preview channel for each PR and to the live channel for each merge to your main branch. If you want to manually setup the work, you can find those instructions [here](https://github.com/FirebaseExtended/action-hosting-deploy/blob/main/docs/service-account.md).
 
 You can also manually deploy using the Firebase CLI, as described [here](https://firebase.google.com/docs/hosting/quickstart).
-
-### Github Pages
-
-#### Technical Limitations
-
-Github pages is bare bones static hosting, not optimized for single page apps. This means that urls do not automatically redirect to index.html. For this reason, the Github deploy scripts configure the application to use [hash routing](https://v5.reactrouter.com/web/api/HashRouter), which may be undesirable for production applications.
-
-Github pages also has some [usage limits](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits). These limits are determined by Github and are likely to change and evolve, but at the moment they are primarily on the repo size, the bandwidth, and the number of builds per hour. After reviewing the current Github pages limits, if you anticipate exceeding these, you should consider other paid hosting solutions.
-
-#### Usage Instructions
-
-1. (Optional) If you need a customization option, review `yarn deploy:github --help`.
-2. Confirm that you can [build this project from source](./build-from-source.md). Be sure to install optional dependencies.
-3. Enable the [Github Pages feature](https://docs.github.com/en/pages/getting-started-with-github-pages) for the `gh-pages` branch in your repository.
-4. Run `yarn deploy:github`. Be sure to follow the instructions that appear on the screen. If you want to connect your github deployment to a custom domain remember to add `--custom-domain=mydomain.com`.
-
-### Technical Documentation
-
-The `yarn deploy:github` command executes a simple nodejs script located in `scripts/deploy-github.js`. The script executes the following commands:
-
-1. Runs `yarn build` with [`APP_GITHUB_PUBLIC_BASE_URL`](build-from-source.md#APP_GITHUB_PUBLIC_BASE_URL) envvar.
-2. Runs `yarn gh-pages -o origin -d build`.<br /><br />You can change the remote from _origin_ to _myremote_ by running `yarn deploy:github --github-remote=myremote`. The `yarn deploy:github` command uses the GitHub remote to compute the default value for `APP_GITHUB_PUBLIC_BASE_URL`.
-
-> **TIP**: Before each of the previous steps, the script will ask if you want to continue. You can prevent these confirmation inquiries by providing `--build` or `--deploy` arguments to `yarn deploy:github`.

package.json

@@ -35,8 +35,7 @@
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
     "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
-    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test-commit",
-    "deploy:github": "node ./scripts/deploy-github.js"
+    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test-commit"
   },
   "dependencies": {
     "@adyen/adyen-web": "^5.42.1",

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import QueryProvider from '#src/containers/QueryProvider/QueryProvider';
 import '#src/screenMapping';
@@ -38,13 +38,11 @@ export default function App() {
     );
   }
 
-  const Router = import.meta.env.APP_PUBLIC_GITHUB_PAGES ? HashRouter : BrowserRouter;
-
   return (
     <QueryProvider>
-      <Router>
+      <BrowserRouter>
         <Root />
-      </Router>
+      </BrowserRouter>
     </QueryProvider>
   );
 }

src/components/CreditCardNumberField/CreditCardNumberField.tsx

@@ -5,8 +5,6 @@ import TextField from '../TextField/TextField';
 
 import styles from './CreditCardNumberField.module.scss';
 
-import { getPublicUrl } from '#src/utils/domHelpers';
-
 type Props = {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -15,15 +13,15 @@ type Props = {
 };
 
 const cardIssuers: { [key: string]: string } = {
-  visa: getPublicUrl('/images/payments/visa.svg'),
-  mastercard: getPublicUrl('/images/payments/mastercard.svg'),
-  maestro: getPublicUrl('/images/payments/maestro.svg'),
-  amex: getPublicUrl('/images/payments/amex.svg'),
-  discover: getPublicUrl('/images/payments/discover.svg'),
-  diners: getPublicUrl('/images/payments/diners.svg'),
-  dinersclub: getPublicUrl('/images/payments/diners.svg'),
-  unionpay: getPublicUrl('/images/payments/unionpay.svg'),
-  hiper: getPublicUrl('/images/payments/hiper.svg'),
+  visa: '/images/payments/visa.svg',
+  mastercard: '/images/payments/mastercard.svg',
+  maestro: '/images/payments/maestro.svg',
+  amex: '/images/payments/amex.svg',
+  discover: '/images/payments/discover.svg',
+  diners: '/images/payments/diners.svg',
+  dinersclub: '/images/payments/diners.svg',
+  unionpay: '/images/payments/unionpay.svg',
+  hiper: '/images/payments/hiper.svg',
 };
 
 const CreditCardNumberField: React.FC<Props> = ({ value, error, onChange, onBlur, ...props }: Props) => {

src/components/ErrorPage/ErrorPage.tsx

@@ -6,7 +6,6 @@ import styles from './ErrorPage.module.scss';
 import { IS_DEMO_MODE, IS_DEVELOPMENT_BUILD, IS_PREVIEW_MODE } from '#src/utils/common';
 import DevStackTrace from '#components/DevStackTrace/DevStackTrace';
 import { useConfigStore } from '#src/stores/ConfigStore';
-import { getPublicUrl } from '#src/utils/domHelpers';
 
 interface Props {
   disableFallbackTranslation?: boolean;
@@ -37,7 +36,7 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
   return (
     <div className={styles.errorPage}>
       <div className={styles.box}>
-        <img className={styles.image} src={getPublicUrl(logo || '/images/logo.png')} alt={'Logo'} />
+        <img className={styles.image} src={logo || '/images/logo.png'} alt={'Logo'} />
         <header>
           <h1 className={styles.title}>{title || 'An error occurred'}</h1>
         </header>

src/components/Header/Header.tsx

@@ -13,7 +13,6 @@ import CloseIcon from '#src/icons/Close';
 import Button from '#components/Button/Button';
 import Popover from '#components/Popover/Popover';
 import UserMenu from '#components/UserMenu/UserMenu';
-import { getPublicUrl } from '#src/utils/domHelpers';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 import IconButton from '#components/IconButton/IconButton';
 import Language from '#src/icons/Language';
@@ -172,7 +171,7 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={getPublicUrl(logoSrc)} onLoad={() => setLogoLoaded(true)} />
+            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav} aria-label="menu">

src/utils/dom.ts

@@ -1,5 +1,3 @@
-import { getPublicUrl } from './domHelpers';
-
 export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 let size: number;
@@ -26,7 +24,7 @@ export const addScript = (src: string): Promise<void> => {
     const script: HTMLScriptElement = document.createElement('script');
     script.type = 'text/javascript';
     script.async = true;
-    script.src = getPublicUrl(src);
+    script.src = src;
     script.onload = () => resolve();
     script.onerror = (error) => {
       console.info('Error loading external script', error);

src/utils/domHelpers.ts

@@ -2,17 +2,6 @@ export const canUseDOM = !!(typeof window !== 'undefined' && window.document &&
 
 let size: number;
 
-export function getPublicUrl(url: string) {
-  if (url.startsWith('http')) {
-    return url;
-  }
-
-  const baseUrl = import.meta.env.APP_GITHUB_PUBLIC_BASE_URL || '';
-  const trimSlashes = (s: string) => s.replace(/^\/+|\/+$/g, '');
-
-  return (baseUrl ? '/' : '') + [baseUrl, url].map(trimSlashes).join('/');
-}
-
 export default function scrollbarSize(recalc?: boolean) {
   if ((!size && size !== 0) || recalc) {
     if (canUseDOM) {

types/env.d.ts

@@ -4,7 +4,6 @@ interface ImportMetaEnv {
   readonly APP_DEFAULT_CONFIG_SOURCE: string | undefined;
   readonly APP_PLAYER_ID: string | undefined;
   readonly APP_PLAYER_LICENSE_KEY: string | undefined;
-  readonly APP_GITHUB_PUBLIC_BASE_URL: string | undefined;
   readonly APP_DEFAULT_LANGUAGE: string | undefined;
   readonly APP_ENABLED_LANGUAGES: string | undefined;
 }