How do I configure my .htaccess file for React App in Subdirectory?

Question

I want to host my react app in a subdirectory on my shared hosting account. Ie in the directory domain.com/mydirectory/. But when I type domain.com/mydirectory/ in the search bar it opens the index of the directory & not the React App itself.

I have already created a build version for my app. Hence the index.html file is at the root of the directory with the static folder & all the other contents that where created during the react-build script.

How can I make it work properly ? How can I configure my .htaccess file or what fix should I consider ?

Yoke

Answer 1

You can try to add a .htaccess file in your React directory with that source code into it.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectory
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

Diopside

May be you will get a blank page because the server didn't find your static directory modify the index.html file links like that /static/ to /subdirectory/static/. – Diopside

Works like a charm :D but don't forget to uncomment the module in conf. Ref. gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042 – Memoried

I am a front end dev. Any chance you guys would show the proper way to do this and force SSL? I've managed it before but have to search each time...thank you. – Bandy

@MegPhillips91for ssl you can user certbot – Contaminant

@Bandy you can try using this command to redirect to https. RewriteCond %{SERVER_PORT} 80 RewriteRule ^(.*)$ example.com/$1 [R,L] – Helldiver

Answer 2

Just copy and paste following in your .htaccess

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Thorncombe

Answer 3

This .htaccess file worked for me. In my situation, I cloned the entire Git repository of a React project, not just the 'build' folder.

Options -MultiViews
RewriteEngine On

# Serve files from the "static" directory directly
RewriteCond %{REQUEST_URI} ^/static/
RewriteRule ^static/(.*)$ build/static/$1 [L]

# Handle client-side routing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ build/index.html [QSA,L]

Aronoff

Answer 4

Incase you are using Nginx, the above .htacess method doesn't work. My context is deploying am app but with a react-vite app in a sub folder to an nginx server. Am using react router v6.20.

1. You need to configure your vite app well in the vite.config file.

export default {
  base: '/mydirectory',
}

2. Add the same basename in your react router configuration in your main.js. Mine looks like this

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";
import Root from "./routes/root";
import ErrorPage from "./error-page";
import About from "./AboutPage";

const router = createBrowserRouter(
    [
        {
            path: "/",
            element: <Root />,
            errorElement: <ErrorPage />,
            children: [
                {
                    path: "/about",
                    element: <About />,
                },
            ],
        },
    ],
    {
        basename: "/mydirectory",
    }
);

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

Make sure to replace "mydirectory" with your own.

3. Create a build.

npm run build

4. Go to your Ngnix file. Configure it this way in your nginx server block

location /mydirectory {
  try_files $uri $uri/ /mydirectory/index.html;
}

This is what worked for me using Nginx.

Damalas

Answer 5

Using RewriteRule . /index.html [L] might work if the rest of the .htaccess is fairly simple. To be more specific include every view in the file

RewriteRule ^ - [L]
RewriteRule ^view-one /index.php [L]
RewriteRule ^view-two /index.php [L]
RewriteRule ^ /api/index.php

In our project we needed the last line for a api in php. We could not use another subdomain for this as authentication and authorization was done in php and required the same __Secure_session cookie for both the fe and be.

Manas