Deployment

Delivering The Frontend Via The Backend

In the react frontend directory running “npm run build” is required to create the build directory. This directory has to be moved to the backend main folder.
The fetch routes in the frontend can now be e.g. fetch(“/tasks”)

Old version before Node.js 20.11.0

import express from "express";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.use("/tasks", taskRouter) // Routes must be on top
app.use("/", express.static(path.join(__dirname, "/dist"))); // dist folder in the backend main directory
// for express v5+
app.get(/.*/, (req, res) => res.sendFile(__dirname + "/dist/index.html"));
// before express v5
app.get("/*", (req, res) => res.sendFile(__dirname + "/dist/index.html"));

Since Node.js 20.11.0, Deno 1.40.0 and Bun 1.0.23

import express from "express";
import path from "path";

const app = express();

app.use("/tasks", taskRouter); // Routes must be on top
app.use("/", express.static(path.join(import.meta.dirname, "/dist"))); // dist folder in the backend main directory
// for express v5
app.get(/.*/, (req, res) => res.sendFile(path.join(import.meta.dirname, "/dist/index.html")));
// before express v5
app.get("/*", (req, res) => res.sendFile(path.join(import.meta.dirname, "/dist/index.html")));

Deploy React App To gh-pages

1. npm install gh-pages --save-dev

Only for apps with create-react-app: In package.json (above “name”)

2. "homepage": "http://<github name>.github.io/<repository name>"

Only for apps with vite: In vite.config.js

export default defineConfig({
  base: '/<repository-name>/',  // e.g., /my-portfolio/
})

In package.json (under “scripts”)

3. "predeploy": "npm run build",

Only for apps with create-react-app:

4. "deploy": "gh-pages -d build"

Only for apps with vite:

4. "deploy": "gh-pages -d dist"

Add and commit changes and start deploying with:

5. npm run deploy

React Router with Github Pages

React router is out of the box not working with github pages

Alternative 1 is to use HashRouter:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import { HashRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
    <StrictMode>
        <HashRouter>
        <App />
        </HashRouter>
    </StrictMode>)

And in the App.jsx as usual

import { Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

Routes With Github Repo Names

Alternative 2 to make react router work with github pages is to wrap the routes in routes with the name of the github repository

In the example the github repo name is “deploy-example”

To handle both routes for production and development, we would need to use environment variables

e.g. const basePath = process.env.NODE_ENV === ‘production’ ? ‘/deploy-example’ : "";

Replacing “/deploy-example” with “basePath” in the code

import './App.css'
import { Route, Routes, NavLink } from 'react-router-dom';
function App() {

    return (
      <>
      <nav>
        <NavLink to="/deploy-example/">Startseite</NavLink>
        <NavLink to="/deploy-example/about">Über uns</NavLink>
        <NavLink to="/deploy-example/contact">Kontakt</NavLink>
      </nav>
      <Routes>
        <Route path="/deploy-example">
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
      </>
    )
}

Configure Password Protection With .htaccess

Inside .htaccess:

AuthType Basic
AuthName "Zugriff auf geschützten Bereich"
AuthUserFile /is/htdocs/wp1103945_7YVQFOGUJE/www/beiersdorf-aktion.de/htdocs/.htpasswd
require user Beiersdorf

Inside .htpasswd:

Beiersdorf:$apr1$zj54pfib$DwkmzsfOuo2HzR2pCtZvL/

(Generate encrypted password with a website)

To find the path for AuthUserFile, copy showpath.php into the .htaccess folder

showpath.php:

<?php
    $dir = dirname(__FILE__);
    echo "<p>Der Pfad ist: " . $dir . "</p>";
    echo "<p>Der Pfad zur  .htpasswd Datei ist daher: " . $dir . "/.htpasswd" . "</p>";
?>

(showpath.php call in the browser and read the path)

404 Error After Refresh On Vercel

Create a file called vercel.json on the root level of your project

Place the following content inside that file:

{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }

{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }