Skip to content

Instantly share code, notes, and snippets.

@alexsasharegan
Created September 7, 2016 00:36
Show Gist options
  • Save alexsasharegan/173878f9d67055bfef63449fa7136042 to your computer and use it in GitHub Desktop.
Save alexsasharegan/173878f9d67055bfef63449fa7136042 to your computer and use it in GitHub Desktop.
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>
@webdevolps
Copy link

Thanks you my friend!! Perfect, It Work!

@rainerbez
Copy link

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

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 via email

@TheKidGuy
Copy link

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

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

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

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

@yungwarlock
Copy link

Love it
I really appreciate this

@rodude123
Copy link

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

@jesustorcat
Copy link

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

Completely necessary. Thanks!

@jiangyv1718
Copy link

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

SI PUDIERA TE BESARIA! Muchas gracias!

@codebdy
Copy link

codebdy 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

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

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

@howmarketing
Copy link

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

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

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

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

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.

@eastonyarbrough
Copy link

Sir you are a god among men. I've been trying to figure this out for hours.

@sanjyotshenoy
Copy link

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>

Thank you so much!

@Maryam-Rasheed
Copy link

Will this work for dreamhost server as well?
I'm new and facing the same problem. Surfing on the internet for almost a week tried everything but nothing worked for me.

@jorovipe97
Copy link

Will this work for dreamhost server as well? I'm new and facing the same problem. Surfing on the internet for almost a week tried everything but nothing worked for me.

Technically if your hosting is using Apache it will work, the only thing you will need is to create the file via FTP (Or your preferred way) in the folder of your website.

Here a link to dreamhost docs about creating the file.

@Ragandev
Copy link

Ragandev commented Feb 3, 2024

When i host under direct domain its worked, But in sub folder blank page with favicon only displayed

@Miodragt
Copy link

for starting react app on different Port , you can use make file .env and in here you add next code PORT= 80 example if you start develop on port 80, or build app at this port.
This is possible because babel and other when build production code for final app looking this file and accepted . But , you must get attantion for admin premision on this port.
And setting virtual in access httpdocs .

@risecommerce
Copy link

For Nginx add / merge the following in your nginx config file
location / {
try_files $uri $uri/ /index.html;
}

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