CODEWITHSUNDEEP
angularjsapache.htaccessmod-rewriteslim
kiss_lawrence
kiss_lawrence

Reputation: 37

.htaccess redirect to index.html and index.php doesn't work together

I have a project with angularjs for front end and slim for backend api. Therefore I want to map any api/(...) to server/index.php, and map anything else to index.html. However I can't get them work together with .htaccess. api/(...) will direct to index.html instead of index.php.

This is the htaccess I'm using:

RewriteEngine on
RewriteBase /
RewriteRule ^api/ server/index.php [L]
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(jpg|png|js|css|html)$ - [L]
RewriteRule ^.* index.html [L]

This is the file structure I have now (with some files omitted):

root/
    index.html
    server/
        index.php
    .htaccess

I tried to add some random characters in .htaccess file, and got a 500 error, so the .htaccess file works. I also tried to remove the last line for index.html rule, and the api works after commenting out.

Please help me with this problem, thanks!

Upvotes: 0

Views: 1925

Answers (2)

Sabaoon Bedar
Sabaoon Bedar

Reputation: 3689

I know that the question got answered but it might help those people who want to host their React (front end) and Laravel (backend) on cpanel of GoDady.

Assuming that you people know the basics of cpanel, first go to the public_html and to your folder where your domain or subdomain is located.

you need to upload the application to the public html but remember when you are building react static files (npm run build) you need to define the domain name or the sub folder name with the key homepage in you package.json

enter image description here or if you want to add the static files in sub folder then it is must to do

"homepage": "http://ghulam.covidbaml.com/yourSubFolderNameHere",

so, I am assuming my folders structure on the cpanel (public_html)

public_html/Static React build Files

public_html/ server (the server folder is also located in same place which contained laravel files)

Now we can write .htaccess which is really imported assuming godady linux hosting.

htaccessFile below:

Options -MultiViews

RewriteEngine on
# Rule to start the laravel api on work
RewriteRule ^server/public/index\.php$ - [L]
# Redirect to index.php
RewriteRule ^api$ server/public/index.php [L]
RewriteRule ^api/.* server/public/index.php [L]



# now I am redirecting the React index file (index.html)

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

note:

RewriteRule ^ index.html [QSA,L]

The above command is for the purpose of react routing that it doesn't give 404 error while you refresh the page.

Upvotes: 1

kiss_lawrence
kiss_lawrence

Reputation: 37

I finally figured out why from the best answer in this link -> view

The problem is that [L] command will not terminate the rewriting process totally, it will match from the beginning again. So in the first iteration, api/ will be changed to server/index.php. Then in the next iteration, server/index.php will be matched to index.html.

Apache will terminate rewriting process when the pattern and substitute are the same. So the way to work around it is to add termination rules. I update my htaccess, and now it works.

RewriteEngine on

# Final rule for assets
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(php|jpg|png|js|css|html)$ - [L]

# Final rule for back end index
RewriteRule ^server/index\.php$ - [L]
# Redirect to back end index
RewriteRule ^api$ server/index.php [L]
RewriteRule ^api/.* server/index.php [L]

# Final rule for front end index
RewriteRule ^index\.html$ - [L]
# Redirect to front end index
RewriteRule ^.* index.html [L]

Upvotes: 2

Related Questions