Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Apache Config for React Router
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
@MilanForrat
Copy link

MilanForrat commented Sep 24, 2020

Thank you so much, helped me out greatly here !

All I needed was those lines you posted, nothing else in my .htaccess for my react project using Apache

@jjr52
Copy link

jjr52 commented Oct 7, 2020

what is solution for that problem "example.com/component/othercomponent" ?

I was able to solve this by adding a <base href="http://example.com/"> tag to my document head.

For those also looking to solve this problem - I don't think you need the domain in this tag.
I set the value to <base href="/">
Which means it will also work in other domains / your local/test environment too.

@jjr52
Copy link

jjr52 commented Oct 7, 2020

I also used a reverse approach for the rewrite logic than others suggested earlier, so I specified my known directories that should route to index.html and leave everything else. This can be simpler if you have fewer known react routes than unknown other directories/files. It also removes the need for additional RewriteCondition lines. But it does mean you have to build your react routes to comply with defined prefixes or update your config if more are added.
I also put the directives in my apache ssl virtual hosts conf file - this will improve performance over setting this in .htaccess.
So the directive under my relevant VirtualHost is:

<Directory "${SERVER_ROOT}/web_dir">
    RewriteEngine On
    RewriteBase /
    RewriteRule ^/$ index.html [L]
    RewriteRule ^(dir1|dir2|dir_prefix1) ($|/) index.html [L]
</Directory/>

There is also some routing config required in webpack to capture the url parameters/etc (for a different thread!)

@antoniel
Copy link

antoniel commented Nov 15, 2020

Really nice

@damianryann
Copy link

damianryann commented Nov 18, 2020

Anybody able to help me with my .htaccess file?

My React App co-exists with my WP files. I can't get React Router to route whatever I need back in to index.html without causing /wp-admin/, /wp-content/, /wp-includes/ and /wp-json/ to fail. I feel it needs access to some of the PHP files also in the root with my React app.

Has anybody got them to coexist using a htaccess?

@alanleyva
Copy link

alanleyva commented Nov 19, 2020

Did you try this?

<IfModule mod_rewrite.c>
  RewriteRule ^(wp-admin|wp-content|wp-includes|wp-json)($|/) - [L]
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

@damianryann
Copy link

damianryann commented Nov 19, 2020

Did you try this?

<IfModule mod_rewrite.c>
  RewriteRule ^(wp-admin|wp-content|wp-includes|wp-json)($|/) - [L]
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Hi Alanleyva, I didn't try exactly that but I think the issue I am having is /wp-json/ isn't a physical directory so it seems to cause still cause fetch issues. My understanding is this is routing all none physical routes back to index.html, can we isolate certain roots and exclude them from this rule?

@webdevolps
Copy link

webdevolps commented Dec 11, 2020

Thanks you my friend!! Perfect, It Work!

@rainerbez
Copy link

rainerbez commented Dec 16, 2020

This works fine on url's like example.com/component (react router fires upcomponent), but fails on routes like example.com/component/othercomponent. The react router can navigate fine to these hypothetical url's once the app is loaded, but Apache is confused.

what is solution for that problem "example.com/component/othercomponent" ?

Use this instruction: https://gkedge.gitbooks.io/react-router-in-the-real/content/apache.html

Works perfectly for me!
I have this situation: example.com/realfolder/maincomponent/othercomponent

Put the following .htaccess file in the 'realfolder' and all works perfectly!

<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>

@beingawaisali
Copy link

beingawaisali commented Dec 27, 2020

what is solution for that problem "example.com/component/othercomponent" ?

I was able to solve this by adding a <base href="http://example.com/"> tag to my document head.

So simply I solved my solution. Thank you a lot ;)

@Miodragt
Copy link

Miodragt commented Dec 27, 2020

@TheKidGuy
Copy link

TheKidGuy commented Dec 29, 2020

Can someone help me I'm new to this and could not get the .htaccess file to work

https://stackoverflow.com/questions/65479871/using-react-router-v6-and-when-refresh-page-i-get-blank-page

@keyss-ankita
Copy link

keyss-ankita commented Mar 25, 2021

hi everyone.
I want to know the configuration of .htaccess file if I put contents of web-build (using expo build:web) in the sub-directory of main domain . Because my static paths(https://stiff.com/Home/about) are working fine but under sub-folder name(https://stiff.com/stiff2/Home/about) it is overriding to static path name(https://stiff.com/Home/about) .

@alanleyva
Copy link

alanleyva commented Mar 26, 2021

Do you have another .htaccess file on your sub-folder /stiff2/?
Can you share a bit of your folder structure and where are you saving this .htaccess file

@Miodragt
Copy link

Miodragt commented Mar 30, 2021

At last if you wish run React Node Express app to Apache and here port 80, you must setting environment variable to example server.js
const PORT = process.env.PORT || 80;

app.listen(PORT, () => {
console.log(Server is listening on port ${PORT});
});

And in package.json file set like init file
"main": "server.js",

And set webpack

webpack.config.js

const path = require('path');

module.exports = {
entry: './src/entry.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},

How webpack can make bundle.js file

@nerdraven
Copy link

nerdraven commented Apr 9, 2021

Love it
I really appreciate this

@rodude123
Copy link

rodude123 commented Apr 12, 2021

This doesn't work for me locally on Manjaro so I don't know what to say really

@jesustorcat
Copy link

jesustorcat commented May 11, 2021

Works Fine, but was necessary activate "mod_rewrite"
sudo a2enmod rewrite
sudo /etc/init.d/apache2 restart

Completely necessary. Thanks!

@jiangyv1718
Copy link

jiangyv1718 commented May 20, 2021

what is solution for that problem "example.com/component/othercomponent" ?

I was able to solve this by adding a <base href="http://example.com/"> tag to my document head.

For those also looking to solve this problem - I don't think you need the domain in this tag.
I set the value to <base href="/">

works for me thanks bro

@AquilesSP
Copy link

AquilesSP commented Jul 8, 2021

SI PUDIERA TE BESARIA! Muchas gracias!

@rxdrag
Copy link

rxdrag commented Jul 22, 2021

good

@a6yusuf
Copy link

a6yusuf commented Aug 8, 2021

How can I set my .htaccess to allow my app users to use their custom domain to access my react app, after they've pointed their dns to my ip address?

@Surajrgl
Copy link

Surajrgl commented Aug 27, 2021

I resolved it by implementing the following steps
Step 1
Add the following in package.json
"homepage": "."
Step 2
Added the following in .htaccess
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>
Step 3
Add the following in the public/index.html above meta:description
<script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>

@lucianmurmurache
Copy link

lucianmurmurache commented Sep 7, 2021

Exactly 5 years later, still works like a charm, thank you for this!

@howmarketing
Copy link

howmarketing commented Oct 13, 2021

RewriteCond %{HTTPS} on
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Should be?
RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

@gonzalo-massa
Copy link

gonzalo-massa commented Oct 14, 2021

I did found one solution

Just replace "api" with any subfolder you'll like to ignore

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

For multiple directories use (directory_one|directory_two)

Hi, just to learn: can you explain why this is necessary?
I don't understand why you have to exclude the folders explicitly. If they are real folders, they should be excluded by this rule: RewriteCond %{REQUEST_FILENAME} !-d right?

@alanleyva
Copy link

alanleyva commented Oct 14, 2021

To be honest, htaccess files are not my strong suit, it's more of a trial and error for me.
I'm sorry I can't be of help here, maybe someone else can explain better.

@Miodragt
Copy link

Miodragt commented Oct 14, 2021

How and in more application like is server application, ever exists some configuration file, who getting some away of work. In our case is file .htaccess. There we must setting how we wish , other word how is need us. Example for developing and run server for web, we can use different ports for that. In our case for web address use port 80. But if we don't say to server config. file some other port. Our work can't see any body. reason is wrong port who show application. For that we must reprograming configuration file and get order to server who port he must use for showing our application. This is one of solution. Other solution is in our react node express application, there in package.json file we get some proxy and for environment port write number port who is need. For that case we must make file .env . There we write const port =80; And that our server part see this and our application setting on this port.
All in all, two things are needed to solve any problem:

  • One is to find out how something works
  • second to identify the cause of the problem based on the first point.
    The reason for this approach is for the reason that no matter what is invented, the working principle is almost identical. If we look at the code functions, they are written the same in almost all program speeches, sometimes they have smaller differences. But it’s not something big. While the main point is to talk about how something is very good, fast, efficient. But when you start working on it, you can see that it is just a complication without any need. We used to have PHP, HTML, MySQl, PYTHON. If we go back a long time, we will notice the Astec C programming language, from which PHP, java, java script, c ++ were created. pascal, and many others. Under the pretext of how they are better. but do you judge for yourself.

@tinoreyna1984
Copy link

tinoreyna1984 commented Mar 15, 2022

Works great!

@aryanisml
Copy link

aryanisml commented May 13, 2022

Children routing not loading.
I have following configuration in .htaccess file

RewriteEngine On RewriteBase **%{ENV:REACT_APP_SUBPATH}/** RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . **/%{ENV:REACT_APP_SUBPATH}/**index.html [L]

In index.tsx file we mention that BrowserRouter basename=${ENV:REACT_APP_SUBPATH}

It is working for parent routes but children routes its not working means
http://sample.com/account -> this is working
http://sample.com/account/create -> this is not working it showing blank pages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment