Menu Home

Setting up Laravel with Angular 2 on ubuntu 16

Spread the love

Angular (commonly referred to as “Angular 2+” or “Angular 2“) is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web applications. Angular is a complete rewrite from the same team that built AngularJS.

Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern. Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar.

As of March 2015, Laravel is regarded as one of the most popular PHP frameworks, together with Symfony, Nette, CodeIgniter, Yii2 and other frameworks.

I have just recently started working with Angular 2, and although it is clear to me that it should run as an individual application there will be a time I’ll have to incorporate it in my Laravel projects. I did some research and couldn’t find a single a simple tutorial explaining how to do it, maybe because the framework is still new or maybe because it is just not supposed to be done. So, after a few hours cracking the formula, I manage to come up with a simple, yet functional approach to this problem.

In this tutorial, I will show you how to setup Laravel 5.4 and Angular 2.

Prerequisites:

  • A freshly build ubuntu 16 machine, I will be using a Ubuntu Server 16.0.4 LTS virtual machine over ssh, you can use your local computer
  • A terminal application, I will use iTerm for mac
  • Understanding of running shell command

1. Install Laravel

Laravel 5.4 requires PHP 5.6.4+, OpenSSL, PDO, Mbstring, Tokenizer and XML. I won’t be using apache for this tutorial, instead, I’ll use the built-in development server.

We need to install Laravel dependencies first.

Open a terminal and connect to your remote machine if you’re working over ssh.

ssh user@127.0.0.1

Update to your system to latest changes

sudo apt-get update && sudo apt-get upgrade

Install PHP MySQL and PHP dependencies

sudo apt-get install php mysql-server mysql-client php-mysql php-xml php-mcrypt openssl php-mbstring

Install composer globally

sudo apt-get install curl php-cli php-zip git unzip zip
cd ~
curl -sS https://getcomposer.org/installer -o composer-setup.php
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Composer should now be available globally, try it out

composer

Now that we have composer ready to use we can install the Laravel installer

composer global require "laravel/installer"

Make sure you include Laravel installer in your path.

echo -e 'PATH="$PATH:$HOME/.composer/vendor/bin"\n' >> ~/.bashrc

Navigate to your projects folder and create a blank Laravel project

cd ~/project
laravel new todo

Laravel comes with a development server, let’s use that to test

php artisan serve --host=127.0.0.1

You should get a page like this:

If you’re using a remote server you have to set the –host variable to the remote server IP address.

That’s it, Laravel is ready to use.

2. Install Angular 2

For the next steps we will need node and npm, so let’s start by installing both of them. The are several different ways you can do this I’ll install it globally using the official repo and I’ll be using version 6.10.2 which is the latest LTS version, I like LTS versions.

First, add the PPA file

sudo apt-get install python-software-properties
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

And then we can install it

sudo apt-get install nodejs

Let’s test all went well

node -v && npm -v

You should get something similar to this:

v6.10.2
3.10.10

Now that we have npm and node installed you can install Angular. Laravel comes with Vue pre-installed, you can leave it there, I decided to remove it.

npm remove --save-dev vue

I also removed laravel-mix, I will be building my own webpack config

npm remove --save-dev laravel-mix

Then you need to install Angular CLI that will be used to build the front-end

sudo npm install -g @angular/cli

Delete your current package.json file, you won’t need it

rm package.json

 

Add angular to your project

ng new --directory ./ todo

Change the build target by modifying the .angular-cli file to look like this

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "todo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "public/dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  }
}

I only changed the outDir property to “public/dist”

3. Putting it all together

We first need to add a new view to our Laravel project. Copy the index.html file inside public/dist to resources/views/ and change the extension to PHP

cp src/index.html resources/views/index.php

And then make sure your routes return that same view.

You can do it in the web.php file:

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('index');
});

Or in the controllers

/**
 * Show the application dashboard.
 *
 * @return \Illuminate\Http\Response
 */
public function index(\Illuminate\View\Factory $view)
{

    return $view->make('index');
}

And this is what you will end up with

That’s it, now you can write your api and your client both in the same project and serve them in apache/nginx like you would normally do.

Categories: Tutorials

Tagged as:

Claudio Pinto

Leave a Reply

Your email address will not be published. Required fields are marked *