I have a web project, powered by Symfony2 for the RESTful API, and by AngularJS for the front. It seemed logical to divide the project in two subprojects : one for the backend, and the other one for the frontend. The frontend build system is made with Gulp.
What I am trying to do is configuring my web server, Apache2, so it would first try to match the request URL to the front-end files, and, if it didn't matched with any of those files, then pass to Symfony's front controller. How should I configure Apache2 in order to make this working ?
For the moment, I have put my two subprojects one next to the other in the file hierarchy, and configured Gulp to output compiled files to the web/ folder of my Symfony project, but I don't find that solution very efficient.
Use .htaccess.
If you are using $routeParams then set 404 url for everything that don't match.
Then write rule for this page with redirection:
RewriteCond %{REQUEST_URI} !^/?404$
RewriteRule .* index [R=301,L]
This is a sketch, but if You are using html5mode on false, then it may work.
Related
I have a React Application. I am using some routes that receives parameters in the URL (by GET), for example myapp.com/products/1 that works pretty good in local enviroment but no in my CentOS server. I have to mention that I am using npm run build to generate the static files.
For other side, I have running Caddy as HTTP server in the CentOS server, there I have problem only with the routes that includes parameters, so now am wondering if caddy have something to be with this issue.
Here the React people say:
If you’re using Apache, you need to create a .htaccess file in the
public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
So, how can I do that in Caddy. I have currently these lines for the site:
mysite.com {
root PathToProject/build/
log logs/pagelog.log
}
What is missing in order to can use parameters in the URL?
I have this config in my Caddyfile
rewrite {
if {path} not_match ^\/0.0.0.0
to {path} {path}/ /?_url={uri}
}
See if that helps, it took care of my routing issue (similar to what u have mentioned) for React App.
I uploaded my app in the server i changed the folder structures i made the changes in index.php.Everything is working fine i can get the views(im using angular for the frontend and satellizer for the tokens)but whenever i try to make a call to my api through my app it doesnt send the token(im using jwt tokens).The token get on local storage but its not being send with every request,if i put the token in my url everything is working fine so im guessing its a problem with satellizer.should i change something in satellizer.js?
nvm i found it i should had change the .htaccess
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
I'm having trouble to decide how I should do to make my websites urls cleaner. The thing is, it's done with Angular AND Symfony2. Angular providing the front, and Symfony2 providing the api.
Here's my website's structure :
/api
/app => configurations go here
/bin => binaries
/src => your bundles/MVC code
/vendor => Symfony and 3rd party bundles
/web => this is where the web server document root should be pointed to
/front
/api -> Symlink to /api/web in the symfony part, working, but with app.php and app_dev.php
/css -> frontend CSS
/img -> frontend Images
/js -> frontend JS for AngularJS
/lib
/partials -> html templates used by AngularJS
index.html
Now the urls I get are www.project.dev/ which is home, rendered by AngularJS (/front), works perfectly, and www.project.dev/api/app(_dev).php/... rendered in Symfony2 but I want to remove the part :
app(_dev).php
I have two empty .htaccess, in / and in /api, do I need to use them ? Or do I have to use the Angular-route system ?
How am I suppose to do it ?
It's not clear how exactly you have your Symfony application setup, but I would recommend using the default Symfony directory structure, as it will simplify troubleshooting problems. The default directory structure is something like this:
/Symfony
/app => configurations go here
/bin => binaries
/src => your bundles/MVC code
/vendor => Symfony and 3rd party bundles
/web => this is where the web server document root should be pointed to
Since your document root is pointed to /web, you can have directories in there for your public assets, such as your /js, /img, and /css (Or you can look into Assetic, it allows lots of cool things like combining and compressing js or css.). The /web directory also has a .htaccess file included so that the app(_dev).php is removed from the URL.
Your /api can then be built using the standard Symfony routing, controllers, and views. You should read the Symfony routing documentation to get a grasp of how that works. A summary of how this works is:
create the route (ex. /api/users)
point the route to a Controller action (see the docs)
in the controller action, return the desired response
That's how I would recommend you structure your application. But if you would rather stick with the structure that you have, you will need to add a .htaccess file to the /api directory (which I assume points to the /web directory of the Symfony application), and take a look at this post for what the .htaccess file could contain.
I am trying to use AngularJS for the front-end and Laravel for the back-end. As such, I have setup the following folder structure:
/app
/app (contains Laravel)
/bootstrap
/vendor
/public
/api (want to place index.php for laravel here)
/app (AngularJS files)
app.js
bootstrap.js
index.html
And so I was hoping that by calling /api/myController/ I would get access to myController within the Laravel framework. However, when I call /api/ I get the following error:
The page isn't redirecting properly. Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
How can I accomplish this?
You could do that, and make changes in the index.php file and possibly in the start.php file on where to load the other files from, but you'd need to make sure any time you updated laravel you fixed up any references.
Why not just move the entire laravel application to inside the api folder?
I am trying to build a web application which should use Laravel as a RESTful backend API and AngularJS on client side.
I read all the other post on Stackoverflow about the issue, but no one is definitely answering my doubts, at least, I did not find a definitive source example.
For instance...
Should I develop two completely distinct applications, a backend one with Laravel and another, purely client, with AngularJS?
But in this case: how to handle them through a single domain (or virtual host)?
Or should I create AngularJS templates inside Laravel, in the "views" folder and from them call Laravel services? I doubt this is the best approach: in this case the backend is not completely decoupled from the frontend implementation.
Also, how to correctly handle routing? I mean: I would like to manage from AngularJS routes like menu/page navigation, calling Laravel only to retrieve data and fill my views.
Moving the "public" folder as suggested in this post (Angular JS + Laravel 4: How to compile for production mode?) may help?
Thanx in advance for suggestions, examples...
Finally I found a working solution, perfect in my scenario, which does not require a subdomain.
In this case Laravel acts exclusively as a RESTful web service, no server side views or templates: the presentation layer is completely demanded to AngularJS.
Let's say I have two completely decoupled applications (FE e WS) inside the same root folder:
root
|__fe
|__ws
I modified virtual host settings under Apache httpd-vhosts.conf file the following way:
<VirtualHost *:80>
ServerName myapp.com
DocumentRoot "\www\root\fe"
alias /ws "\www\root\ws\public"
<Directory "\www\root\ws\public">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
I then added "RewriteBase /ws" into my laravel/public/.htacces file:
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteBase /ws
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [NC,L]
</IfModule>
This way I can write in the browser (for instance):
http://myapp.com (AngularJS client side root)
http://myapp.com/ws/users (RESTful service endpoint for "users")
And then define a client side, AngularJS routing the following way:
app.config(function($routeProvider) {
$routeProvider
.when('/', {controller: 'HomeController', templateUrl: 'templates/home.html'})
.when('/users', {controller: 'UsersController', templateUrl: 'templates/users.html'})
.otherwise({redirectTo: '/'});
});
Linking it to a RESTful resource this way:
app.factory('User', function($resource) {
return $resource('http://myapp.com/ws/users');
});
app.controller('UsersController', function($scope, User) {
$scope.title = "Users";
$scope.users = User.query();
});
I enabled HTML5 history API, adding this line to configure my Angular application:
$locationProvider.html5Mode(true);
together with (inside index.html head section):
<base href="/" />
<meta name="fragment" content="!" />
So the last requirement to solve problems like browser page refresh, deep linking, or direct page bookmark, is to add a .htaccess file in the root of the folder which contains the Angular application:
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [NC,L]
</IfModule>
Hope it helps!
This is a half comment half answer, it got too long.
Matteo as you pointed out there are basically three different places you can do some sort of routing/redirecting with this stack. Ordinarily I haven't seen an advantage to doing the redirects at the Apache level, I imagine this might be more useful for localization or perhaps some sort of load/disk balancing. However you will have your VirtualHost configuration if you have multiple domains pointing to this address and you need to route those initial requests to the appropriate index.html (so if you consider this routing this would be my server side routing).
Generally speaking after that I rely on the Angular $routeProvider to handle client side "routes" really just mapping a URL to a view (possibly passing along some data).
I haven't gotten fancy with setting up a router in my PHP code to create a proper RESTful interface. In my particular case the data is being stored in a fairly abstract way and I had to do a fair amount of work in the PHP to get it organized in a coherent way, any straight ORM type solution wasn't going to work. This attempt has led me to consider options like MongoDB though since it should alleviate the workload necessary for doing the translation from persistent storage to client side and back.
Anyhow all that said I use $http to just make my calls from custom services to particular PHP endpoints that I need. My PHP folder with my scripts sits right next to where my index file is served up so requests from angular are all relative paths from the server root which keeps it simple. So they are physically "nested" so to speak or living side by side but the PHP code never writes any templates or affects the presentation it just gets data and serves it up (as JSON), so conceptually they remain separate.