How to install Laravel 4 with Twitter Bootstrap on Linux VPS

by

laravelThe following article will guide you through the steps of installing and configuring Laravel 4 and Twitter Bootstrap on a Debian Wheezy Linux VPS.

What is Laravel?

Laravel is an elegant PHP web framework for web artisans with expressive and elegant syntax. Laravel 4 uses Composer for dependency management as the framework itself depends on a number of external packages to function correctly.

The tutorial assumes you already have :

  • Webserver (e.x Nginx, Apache etc..)
  • PHP >= 5.3.7
  • MCrypt PHP Extension
  • Database server

if you are our customer then please do not hesitate to contact us if you require any further information or assistance on how to set-up LAMP or LNMP stack on your server. We are here 24×7 and full server management is included with all our VPS hosting plans.

– Install some necessary tools:

apt-get install curl git -y

– change to your webserver document root directory

cd /var/www/

– set-up composer

curl -sS https://getcomposer.org/installer | php
mv -v composer.phar /usr/local/bin/composer

– create your Laravel 4 project via composer

composer create-project laravel/laravel laravel4-project
cd laravel4-project/

– install/update the dependencies via composer

composer update

– create a database to use in your laravel project

mysql -u root -p
mysql> create database laravel;
mysql> grant all on laravel.* to laravel_user@localhost identified by 'MyVerySecretPass';
mysql> flush privileges;
mysql> \q

– set-up a virtual host directive in your webserver (assuming you have apache)

vim /etc/apache2/sites-available/my.laravel4-project.org

<VirtualHost *:80>
    ServerName my.laravel4-project.org
    ServerAlias www.my.laravel4-project.org
    DocumentRoot /var/www/laravel4-project/public

    <Directory /var/www/laravel4-project/public>
        Options -Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/my.laravel4-project.org-error.log
    LogLevel warn
    CustomLog ${APACHE_LOG_DIR}/my.laravel4-project.org-access.log combined
</VirtualHost>

– enable the virtual host directive and restart the webserver

a2ensite my.laravel4-project.org
a2enmod rewrite
service apache2 restart

– set-up laravel database configuration in app/config/database.php

vim app/config/database.php

edit the ‘mysql’ section so it looks something like:

....
'mysql' => array(
        'driver'    => 'mysql',
        'host'      => 'localhost',
        'database'  => 'laravel',
        'username'  => 'laravel_user',
        'password'  => 'MyVerySecretPass',
        'charset'   => 'utf8',
        'collation' => 'utf8_unicode_ci',
        'prefix'    => '',
),
....

– set-up twitter bootstrap in your laravel 4 project

cd public/
wget http://twitter.github.io/bootstrap/assets/bootstrap.zip
unzip bootstrap.zip
rm -f bootstrap.zip
mv bootstrap/* .
rm -rf bootstrap/
wget http://code.jquery.com/jquery-1.10.1.min.js -P js/
mkdir ../app/views/layouts/
vim ../app/views/layouts/master.blade.php
<!DOCTYPE html>
<html>
    <head>
        <title>
            @section('title')
            RoseHosting.com Testing
            @show
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CSS are placed here -->
        {{ HTML::style('css/bootstrap.css') }}
        <style>
        @section('styles')
            body {
                padding-top: 60px;
            }
        @show
        </style>
        {{ HTML::style('css/bootstrap-responsive.css') }}

    </head>

    <body>
        <!-- Navbar -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>

                    <a class="brand" href="#">Laravel</a>

                    <!-- Everything you want hidden at 940px or less, place within here -->
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="{{{ URL::to('') }}}">Home</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Container -->
        <div class="container">

            <!-- Content -->
            @yield('content')

        </div>

        <!-- Scripts are placed here -->
        {{ HTML::script('js/jquery-1.10.1.min.js') }}
        {{ HTML::script('js/bootstrap/bootstrap.min.js') }}

    </body>
</html>

– set-up the url of your application in ‘app/config/app.php’

vim app/config/app.php
....
'url' => 'http://my.laravel4-project.org',
....

– test the set-up

vim app/routes.php
Route::get('/test', function()
{
	return View::make('layouts.master');
});

– set-up the permissions of your project

cd /var/www/laravel4-project/
chown www-data: -R ../laravel4-project/

test the set-up by navigating to http://my.laravel4-project.org/test .

Laravel 4 documentation can be found here.

PS. If you liked this post please share it with your friends on the social networks using the buttons on the left or simply leave a reply below. Thanks.

 

4 thoughts on “How to install Laravel 4 with Twitter Bootstrap on Linux VPS”

  2. Really great and simple tutorial. I wish I’d found this a few hours ago.

    One improvement maybe to show a screenshot of the results of “test” .

    Kindest Regards

    Ray

    Reply

  3. When including scripts with {{ HTML::script(‘js/jquery-1.10.1.min.js’) }}, is it loaded asynchronously, or is it simply a script tag?

    Reply

    • Hi,

      as you can github.com/laravel/framework/blob/master/src/Illuminate/Html/HtmlBuilder.php#L66-L96, the method script() is called via a facade which simply returns <script> tag. it should not be rendered asynchronously by the blade engine.

      Reply

Leave a Comment