Htaccess slim and angular2

1

I have problems with a htaccess, maybe you can help me. My system consists of an angular2-app (single page client side app, index.html) and a slim-v3 php REST API (index.php).
The angular2-app accesses the REST API. If possible, i would like to use the same domain for the angular2-app and the slim REST API.

At the moment, the htaccess looks like this:

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteCond %{REQUEST_URI}::$1 ^(/.+)(.+)::\2$
RewriteRule ^(.*) - [E=BASE:%1]
RewriteRule ^(.*)$ %{ENV:BASE}index.php [NC,L]

If i start the angular2-app via index.html and go to content like e.g. http://www.example.com/mycontent/id then everything works fine. If I call the URL http://www.example.com/mycontent/id directly, then I get a 404 from Slim (PHP)

When i change the htaccess to:

RewriteEngine On
RewriteBase /
RewriteRule ^ index \ .html $ - [L]
RewriteCond% {REQUEST_FILENAME}! -f
RewriteCond% {REQUEST_FILENAME}! -d
RewriteRule. / Index.html [L]

the direct call of http://www.example.com/mycontent/id works correctly, but the Slim-Framework does not work anymore.

Does one have an idea? Thank you

2

You have 2 choices.

  1. split in two separated server the front and the back, front with ngnix and server with apache or ngnix + php (cleanest way).

  2. use one single server, that handle all the request. The apis prefixed by /api and handled by slim, the other will be redirected to the angular app (and its own router).

Little example:

.htaccess

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

index.php
…

$app->get('/api/users', UserController::class, ':list');
$app->get('/api/products', UserController::class, ':list');

// not sure about this syntax
$app->any('*', function($req, $res){
    return $this->renderer->render($res, "/index.html");
})

Remember to register a render handler into the container.