Laravel 5.2 + Angular 2.0 setup guide

#This guide will walk you through the steps needed to setup an empty project using the 2 frameworks into a single repository.

##You will need to have installed:

apache: >= 2.4.9
php: >= 5.5.12
composer: >= 1.2.1
node: >= 4.1.0
npm: >= 3.0.0
git: >= 1.9.5

###Make a project folder.

mkdir C:/wamp/www/laravel-angular-app

cd laravel-angular-app

###Install Laravel via composer.

composer create-project --prefer-dist laravel/laravel server "5.2.*"

###In your etc\hosts file add:

  127.0.0.1       laravel-angular-app.dev

###In apache2.4.9\conf\extra\httpd-vhosts.conf add:

  <VirtualHost *:80>
      ServerName laravel-angular-app.dev
      ServerAlias www.laravel-angular-app.dev
      DocumentRoot "C:/wamp/www/laravel-angular-app/server/public"
      ErrorLog "logs/laravel-angular-app.dev-error_log"
      CustomLog "logs/laravel-angular-app.dev-access_log" common
      ServerAdmin [your email]
      <Directory "C:/wamp/www/laravel-angular-app/server/public">
          Options Indexes FollowSymLinks
          AllowOverride All
          Order allow,deny
          Allow from all
      </Directory>
  </VirtualHost>

###Restart Apache to apply the new vhost settings.

###Remove fronend related tools and assets, since we will use Angular for this job.

cd server

rm gulpfile.js

rm package.json

rm -rf resources/assets folder

Open http://laravel-angular-app.dev/ in web browser to check it's working.

###Now go back into the main folder

cd ..

###Install Angular CLI globally.

npm install -g @angular/cli

###Install Angular via Angular CLI.

ng new web-client --directory=client --skip-git

cd client

You can now enter ng serve and open http://localhost:4200 if you want just to see your Angular app working. You shouldn't have to run this command again after you're done with the setup.

###Now go back into the main folder

cd ..

###Make a new git repository, set a remote, commit and push all your files.

git init

git commit -m "Initial commit"

git remote add origin [your remote]

git push origin master

You should now have each of the 2 frameworks working properly on their own. It's time to connect them.

cd client

###In angular-cli.json change:

"apps.outDir" value to "../server/public/client"

Now when ng build command is run directly with no parameters it will direct it's output there.

###In package.json change:

"scripts.start" to "ng build --watch --output-path=../server/public/client"

This creates an npm alias to that command.

###Now run it:

npm start

###Go back into server folder

cd server

###In app/Http/routes.php change "/" route output to:

  Route::get('/', function () {
    return response()->file(public_path() . '/client/index.html', ['Content-Type' => 'text/html; charset=UTF-8']);
  });

Now when root http route is hit, Angular's index.html file will be returned by Laravel.

###Remove Laravel's default welcome view, since we doesn't use it anymore.

rm resources/views/welcome.blade.php

###In public/.htaccess just after "RewriteEngine On" add:

  # Reroute requests from angular cli generated index.html file
  RewriteRule ^client/ - [L]
  RewriteRule ^(.+).(js|bundle.js|css)$ client/$1.$2 [L]

This makes internal redirect for js, bundle.js or css files into the client folder. We need that since the links generated automatically in index.html doesn't have a "client/" prefix. The first rewrite rule protects us from infinite redirect loops, caused by the second one.

###In your .gitignore file add:

  /public/client

Since this is code, generated by the Angular CLI and we doesn't need to keep it into our repository.

###Commit and push your changes again.

git commit -m [Some message]

git push

Open http://laravel-angular-app.dev/ in web browser to check it's working. You should see the Angular app this time.

You are good to go!

IvayloAtanasov/Laravel-Angular-Setup.md