Version 0.1b
This is a bootstrap project seed, which should help getting easily started with a simple Laravel/Angular webapp. They idea came from http://www.sitepoint.com/ and [https://laravel-angular.readme.io/](Laravel Angular Material Starter). The motivations to build my own project seed, was that I like a different approach on some topics and that I wanted to learn more about webapps and the Laravel Framework.
The project is pretty barebones, only a simple example of and Angular frontend with a single call to a Laravel Api is provided. Build and Production Tasks for gulp/Elixir come out of the box.
Clone the repository and install all dependencies, with the following terminal commands. Composer and Node should already be installed on your system.
composer install
npm install
bower install
The standard Laravel Elixir Tasks are extended with a few tasks. Sourcemaps will be generated depending on the Elixir.config.
All files will be minified/uglifyed in --production.
gulp && gulp watch
gulp --production
The Bower Tasks uses the main-bower-files package to grab all dependencies JS and CSS files. Call the Bower Tasks independently with the following commands.
gulp bower-js
gulp bower-css
- Print the filepaths from the selected dependencies to the terminal, with the option setting
debugging: truefrom main-bower-files - To exclude packages from the selection see the projects
bower.jsonfile. - In
--productionmodus the files will be minified/uglifyed.
The following files will be created by the Bower Tasks.
public/css/vendor.css
public/css/vendor.map.css
public/js/vendor.js
public/js/vendor.map.js
The angular-js Task grabs all JS files from frontend/**/*.js an concate them. Angular-tpl furthermore uses the
gulp-angular-templatecache package to build an independent
angular module, which injects the frontend/**/*.html templates into the Browser-Cache. Call the Angular Tasks independently
with the following commands.
gulp angular-js
gulp angular-css
- Print the filepaths from the selected files to the terminal, with the option setting
showFiles: truefrom gulp-size - In
--productionmodus the files will be uglifyed.
The following files will be created by the Angular Tasks.
public/js/app.js
public/js/app.map.js
frontend/templates.js // this file will be added to app.js in --production
The reason for splitting the templates from the main app.js file while developing, is to
keep gulp snappy when lifereload is used.
Use this snippet in the main blade template to load the generated template.js while in debug mode.
@if ( Config::get('app.debug') )
<script src="../frontend/templates.js"></script>
@endif
Standard Elixir Style Task.
gulp styles
The following file will be created by the style task.
public/css/app.css
To use autoprefixer with plain CSS, the laravel-elixir-postcss package is needed. As laravel-elixir 4.2.1 only supports
autoprefixer for sass/less.
Angular Tasks
gulp angular-js
gulp angular-tpl
The frameworks is pretty vanilla, only two Controllers and three Routes were added. Also Laravel debug bar will be installed with composer install command.
FrontendController calls resources/views/index.blade.php, which then starts the Angular App. The ApiController is just a
single Example Class with a single Method which returns an array.
app/Http/Controller/apiController.php
app/Http/Controller/frontendController.php
Three routes were added to app/Http/routes.php, the /api route will be used by Angular's Restangular.
Route::get('/', 'FrontendController@serveApp');
Route::get('/unsupported-browser', 'FrontendController@unsupported');
Route::get('/api', 'ApiController@index');
All Angular files are in the folder frontend/. Since I prefer a modular approach all modules are subfolder from frontend/components/.
Rename constants.example.js to constants.js and fill out the credentials.
The module api in the folder frontend/components/api/ calls the Laravel Api at http:localhost/api
- Up to date php Versions for osX - http://php-osx.liip.ch
- Check folders for correct permissions.
bootstrap/cache/andstorage/ - ERROR: failed to open stream: Permission denied' in /PATH_TO/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:81. Try to
mkdir storage/framework/views. Afterwards typephp artisan cache:clearfollowed bychmod -R 777 storageandcomposer dump-autoload - Can't update composer - file_put_contents(PATH_TO/bootstrap/cache/XXX): failed to open stream: No such file or directory - Try to
mkdir /bootstrap/cache/folder, www.laracasts.com
- Laravel5 oh-my-zsh plugin
- CSScomb - an
.csscomb.jsonconfig file is provided in the bootstrap project
- Version 0.1 beta Release