I have an apache server with a joomla installation in the root directory. Now i want to host a React.js app with react router in a subdirectory /react. This app has different views on different subpaths and also pulls information from the url parameters, so i basically need to rewrite any url with the pattern %ROOT%/react/* to /react/index.html
How can i do that? I already tried multiple variations of
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} /react/(.*) [NC]
RewriteRule ^ /react/index.html [L]
but without success. Any ideas?
Related
i have hosted my react app on domain example.com
when i hit example.com/blog i want to load my wordpress site.
For that i have placed wordpress in folder named blog inside public folder of react app
for that i have placed .htaccess file in public folder to handle that
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog1
RewriteRule ^blog1$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ./blog1 [L]
</IfModule>
but that doesn't worked for me.
may be i am using the wrong approach to achieve this,as i don't have much experience in react.
The easiest way that worked for me:
You need to have a PHP server.
Build your react app and upload via FTP to public_html.
Upload wordpress to public_html/blog folder and setup db for it.
Update your .htaccess file for React routing:
<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>
Default wordpress .htaccess file after install in subdirectory:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /blog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>
# END WordPress
Without knowing more about the problem.
You may need ensure that the react app and WordPress app use different uri paths if they both run on the same domain.
You need to link outside the app when you are making a request to the WordPress theme and vice versa when you link to your react app. Using an a tag rather than the typical react link.
e.g. using the traditional tag rather than the component
You will probably need to use a reverse proxy file and configure it to be able to run two apps on one server.
You could use a specific react library developed for WordPress called Frontity. This page might help clarify things. Frontity Connection to Wordpress
I'm currently running php on an apache server locally, with a React frontend.
This is how my current .htaccess is laid out:
Options -MultiViews
RewriteEngine On
RewriteRule ^api/(.*)$ api/$1\.php [L]
RewriteCond %{REQUEST_URI} !^/api.*?
RewriteRule ^ index.html [QSA,L]
The bottom condition is so that routing works in my React app. I'm then taking the production build and copying it into my htdocs.
The routing works, however, I want to be able to call the .php files inside my /api directory without using the file extension. So I want anything that comes after /api/ to be redirected to whatever is entered, followed by .php.
E.g. /api/authentication would go to /api/authentication.php, and /api/register would go to /api/register.php, and so on.
With this current setup, I'm getting a 500 internal server error when making requests to /api/authentication etc.
Is there something wrong with my .htaccess file?
Your first rule is looping as you're matching .*. You may use:
Options -MultiViews
RewriteEngine On
RewriteRule ^index\.html$ - [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC]
RewriteRule ^api/(.+)$ api/$1.php [L,NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule !^api index.html [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC] will skip rewriting when a URI ends with .php.
I have a pair of apps which will be running on a shared Apache host. The apps are housed in a common directory on the server. Each application is housed within a "build" directory within its main directory. The client directory should be the default display, while admin should display at example.com/app/admin. And, to further complicate matters, admin uses React Router for its internal routing.
Here's a visual representation of the goal:
admin
|- build
|- index.html (example.com/app/admin, example.com/app/admin/page1, etc.)
client
|- build
|- index.html (example.com/app)
.htaccess
So I need to load the target pages while also enabling React Router to handle the routing for admin. I've tried about every combination of RewriteCond and RewriteRule I can think of in the .htaccess, but no luck so far. I feel like I'm getting closer with the rules below, but I'm still not quite there.
// .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/admin/build
RewriteRule ^admin$ admin/build [L]
RewriteCond %{REQUEST_URI} !^(/client/build|/admin)
RewriteRule ^(.*)$ client/build [L]
</IfModule>
This shows /build in the address bar, and any request to /admin/(.*) fails to redirect the .css and .js file requests to the build folder (so it is instead looking for /admin/static/css/ instead of /admin/build/static/css), although they load successfully on requests to /admin.
EDIT: Changed "App1" to "client" and "App2" to "admin"; masking those serves no purpose, and the fact that the directory shares a name with the page might somehow be relevant.
Finally got this sorted out. Final rewrite below.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} -f
RewriteRule .* - [L]
RewriteCond %{REQUEST_URI} !^/app/admin [OR]
RewriteCond %{REQUEST_URI} ^/app/admin/build
RewriteRule .* - [S=2]
RewriteRule admin/\w*/?$ admin/build/index.html [L]
RewriteRule admin/(.+)$ admin/build/$1 [L]
RewriteCond %{REQUEST_URI} !^(?:/app/client/build|/app/admin/build)
RewriteRule ^(.*)$ client/build/$1 [L]
</IfModule>
I am a bit out of my depth when it comes to most server tasks so bear with me on my descriptions and understanding...
I am trying to use htaccess to force https across domain with Angular app in a subdirectory.
Project structure
/ public
- .htaccess
- index.html
- styles.css
- main.js
- etc...
/ admin (angular app)
- .htaccess
- index.html
- etc...
I am trying to force https across the whole domain while still being able to deep link to the /admin (angular) routes.
/public/.htaccess
RewriteEngine On
RewriteCond %{HTTP_HOST} ^site\.co\.uk$ [OR]
RewriteCond %{HTTP_HOST} ^www\.^site\.co\.uk$
RewriteRule ^(.*)$ https://www.site.co.uk/$1 [R,L]
/public/admin/.htaccess
RewriteEngine on
RewriteOptions inherit
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
All /admin routes are still accessible via plain http and are not redirected. I have tried various combinations of ${SERVER_PORT} & ${HTTPS} but these never trigger. It always seems to return port 80 and https off and causes "too many redirects".
I'm trying to redirect show files in folder/dist when accessing folder/ in a webapp using .htaccess.
This works as desired on localhost (xampp apache) but when pushed to the server (AWS Elastic Beanstalk Apache) I get a error code 500 Internal Server Error.
I've created the webapp using the Yeoman Angular generator and it's running the webapp on an Apache server. The project is in a subfolder of the whole site (http://url.com/pages/webapp). Grunt creates the application in the dist folder and I this content is what I want the visitor to see when accessing the root of the webapp.
Basically I want to redirect/rewrite http://url.com/pages/webapp/ to http://url.com/pages/webapp/dist/
Im trying to accomplish this with a .htaccess that looks like this:
RewriteEngine On
RewriteRule ^$ dist/ [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^dist/
RewriteRule ^(.*)$ dist/$1
The exact same htaccess-content is used in other projects on the same server and they work fine. Only projects created with this generator has this issue.
Is the problem in my htacceess-file, other part of webapp or Elastic Beanstalk...?
I have tried adding AllowOverride All (root directory) and LoadModule rewrite_module modules/mod_rewrite.so to /etc/httpd/conf/httpd.conf but it didn't work.
I also didn't find anything interesting in error_log
I realize the problem is probably hard to solve with the information provided but I am hoping someone else has had a similar issue.
Thanks
Try this code in root .htaccess:
RewriteEngine On
RewriteRule ^$ dist/ [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/dist/ [NC]
RewriteRule ^(.*)$ dist/$1 [L]
Note leading / before dist in RewriteCond.