Angular and PHP .htaccess file redirecting problem

Question

I am deploying on linux apache hosting angular frontend and php slim app framework backend.

In localhost I have on localhost:4200 angular and localhost:80 in xampp apache php

and the path worked

now I have www.mydomain.org/ .(all deployed angular ) .(.htaccess) .folder (slimapp )*php

inside folder I have :

Public
- index.php
src
- config
  - db.php
- routes
  - event.php,login.php,user.php

.htaccess

<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]

index.php

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
header('Access-Control-Allow-Headers: token, Content-Type');

require_once '../vendor/autoload.php';
require_once '../slimapp/src/config/db.php';

// Customer Routes

$app = new \Slim\App;
require_once "../slimapp/src/routes/user.php";
require_once "../slimapp/src/routes/login.php";
require_once "../slimapp/src/routes/event.php";


$app->run();

My question is, I can not understand how link all path together.

Because Angular, needs that .htaccess cause without not works refresh page I tried in all different ways but is only works, so I need that on index.html

But now works refresh but I can't use php backend.

How can I use it, I need edit .htaccess, where index.php have to be on path?

Considering that for example api rest : slimapp/event is in my pc thanks to apache settings and file host localhost/slimapp/public/index.html/event (is a get call that retrieve event from db)

How need to be new path? in real domain?

DLzer · Accepted Answer · 2019-11-19 16:30:45Z

1

I use the exact same stack for writing applications ( Angular Front End / Slim API ). My first application ran into the same exact issue you were having, that being that both frameworks needed the .htaccess redirect and were fighting for control.

My solution was rather simple. Angular being the front end controller i placed directly in my public facing folder ( in my case /public_html ). Slim was placed in a folder inside my public folder named /api.

This way Angular has it's own .htaccess file in the public folder, and my API was accessible via the /public_html/api path and was able to have it's own .htaccess file.

My file structure:

/public_html
   .htaccess ( ANGULAR )
   { Angular Files }
   /api
     .htaccess
     { Slim Files ( index.php ) }

App URL: https://myapplication.com API URL: https://myapplication.com/api

Your Angular .htaccess should contain the redirect:

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ https://yourapp.com/index.html [QSA,L]

Your Slim .htaccess should contain something like:

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

answered Nov 19, 2019 at 16:30

DLzer

15911 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matteo sperti Over a year ago

Thanks a lot this helped me :)

DLzer Over a year ago

No problem! Can you please mark my post as the answer. Thank you!

Collectives™ on Stack Overflow

Angular and PHP .htaccess file redirecting problem

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related