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?
Related
Third party application which I'm trying to integrate, asking to put a file inside a .well-known folder. how can I make that file accessible from URL? (example.com/.well-known/token.txt). site is deployed as a gitlab page. every attempt I tried gives 404 error.
If you put your ".well-known" folder inside the "static" folder it should get deployed to the root of your website as you expect.
I am getting a problem in deploying my app to the server. The problem is i have folders inside the webroot which points to the .css and .js files.
I was doing the basic cakephp function $this->Html->css('bootstrap') when my simple css files were in the css folder but now there are some other folders inside the webroot because of using the plugins for the frontend UI.
For this i have changed my url to like this $this->Html->css('/global/plugin/file')
Problem is on local it is working fine because of virtual host example.com but on live server i have domain like this 192.168.00.00/mysite so it go to the main directory to and link the ip 192.168.00.00 instead of going to 192.168.00.00/mysite.
Is there any good way to solve this and add the flexibility to the url so that my local and live will not be disturbed while i push my code through git?
Just removes '/' from $this->Html->css('/global/plugin/file') to below
<?php
$this->Html->css('global/plugin/file');
$this->Html->script('global/plugin/file'); //example loading file.js
?>
I already had an issue about this one including my JS and CSS inside a folder but when I removed '/' it solve my problem.
Confirm that their is a file.css inside plugin inside webroot\css\global\plugin\file.css windows path or LINUX path /webroot/css/global/plugin/file.css
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.
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.
So i have watched the 5 part youtube videos by David Mosher about Angular JS (vids great by the way). In the part 2 (http://www.youtube.com/watch?v=hqAyiqUs93c), it has a practical mysql database usage which I almost wanted.
I'm going to use AngularJS along with Laravel 4, but I had no idea which files I'm going to upload for the web hosting later. I'm trying to run the web app under "/public" folder in my root on localhost (localhost/public/) but the css and js points to the wrong directory (points to the root: '/css/style.css').
Another method I have tried is by copying all the files to the root and moved all files inside "public" to root. Then I navigate to "localhost/public/". All works fine in script paths, except that it doesn't seemed to do any connection to the database (either the laravel or angular failed).
Is there any proper way to do this for practical use (without using php artisan serve or grunt run or lineman run on the server)? Which files I should upload later?
EDIT: the reason is my web hosting doesn't allow me to install nginx or run code remotely using putty, so I need a manual way to do this. Thanks.
First install latest laravel in your localhost. See doc.
Assuming you have completed composer install command.
Then move your all public folder contents to the project root.
Next change the line 21 in index.php from,
require __DIR__.'/../bootstrap/autoload.php';
to
require __DIR__.'/bootstrap/autoload.php';
and line 35 content
$app = require_once __DIR__.'/../bootstrap/start.php';
to
$app = require_once __DIR__.'/bootstrap/start.php';
Now you can access project without public folder.
Place your css, js and other assets folder in root like http://localhost/laravel/css
Note that the laravel blade and angular also using {{ syntax for compilation.So you need to change the laravel blade syntax to {= and =}.Otherwise you will get conflict.
To do this open vendor/laravel/framework/src/Illuminate/View/Compilers/BladeCompiler.php file and change line 45 to this
protected $contentTags = array('{=', '=}');
and line 52 to this
protected $escapedTags = array('{={', '}=}');
Now you can use {{ for angular and {= for blade.
For linking your assets, use HTMLBuilder functions, see doc here.
Now use these in blade,
{= HTML::style('css/style.css') =} // links localhost/project/css/style.css
{= HTML::script('js/jquery.js') =}
Use migrations and db seeds in localhost and make an exported copy of db for online hosting
After completing project, copy entire project content to online server and change db configuration and import database.
Directory Structure for Online
There will be a public directory for your file hosting, where you put your files in web root.
That may be htdocs or public_html and now it's your project public root.Now the directory structure will be,
-- app
-- bootstrap
-- css
-- images
-- js
-- vendor