CODEWITHSUNDEEP
angularjsuploadlaravellaravel-4
user2002495
user2002495

Reputation: 2146

Angular JS + Laravel 4: How to compile for production mode?

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.

Upvotes: 1

Views: 3924

Answers (1)

Anshad Vattapoyil
Anshad Vattapoyil

Reputation: 23483

  • 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

Upvotes: 4

Related Questions