Build a New App with Laravel and EmberJS in Vagrant

Nowadays, everything is turning into a web application. Even simple websites have a mobile app relying on a REST Api. Web applications are accessible everywhere – on a laptop, desktop, tablet, mobile, and recently on wearable devices like smartwatches. Everything is becoming smaller and faster – front ends are becoming separated from back ends, and only communicate with the server through APIs.

What will we be building?

In this series, we are going to create a photo uploading app. For the front-end, we will use EmberJs and Foundation 5. EmberJs is a front-end framework featuring good integration with REST Apis. Foundation 5 will help us make a fast prototype of our front end. For hosting, we will use Heroku’s free tier (for more information about PHP on Heroku, see here). For the back-end, we will use Laravel. The source code will be available per-part, and in final shape in the final part of this series. You can download the code for part 1 here.

Let’s get started

A good way to start a new project in PHP is using Vagrant. Vagrant gives us the space to experiment a lot from project to project. I can have different PHP versions if I want with Apache for one project, Nginx for another. If something goes bad, I revert all my work and simply vagrant up after that – and I never pollute my host operating system with various other installations.

The easiest way to get started is by following this quick tip, which will take you through a fast installation process and show you a working Laravel app in a matter of minutes so you can start hacking away. If you’re still not convinced why you should use Homestead and Vagrant, see here.

My Homestead.yaml looks like this.

Now that the box is running we have have to install Laravel. Firstly, lets use ssh to make a connection with the box.

vagrant ssh

Then navigate to the folder that will host our app.

cd Code

Here we need to download Laravel and then install the dependencies with Composer.

After Composer has finished installing all the packages, test in the browser by searching for localhost:8000 . If you have done everything right you will see this:

The files of the sample app are now available both inside the Vagrant VM and in your host operating system for editing with your favorite IDE.

Heroku

The below actions are all executed inside the VM, while logged in with vagrant ssh unless stated otherwise. For a more detailed overview of Heroku on Vagrant and installing of addons, see this post, otherwise, see below.

If you don’t already have an account on Heroku, create one by following this link and download the Heroku Toolbelt. This is a client cli that simplifies our work with Heroku. We can install addons from this cli, create new projects and with the help of git we can also push every change. After creating an account on Heroku and installing Heroku Toolbelt you have to log in to start using it.

heroku login

After executing this command, we have a connection with Heroku. Now we can start creating a new project there.

To start using Laravel on Heroku we need to do some small changes. First, create a file and name it Procfile. Add this line inside that file.

web: vendor/bin/heroku-php-apache2 public

This is a configuration file. Heroku needs it to know what it is dealing with. With this, we specified PHP and Apache. We can also use python, java, ruby, scala and more . When installing Heroku Toolbelt, Foreman is installed too. It is used for executing Procfiles locally, helping you maintain dev/prod parity. If you are curios as to what else a Procfile can do, follow this link from the official Heroku documentation.

The second step is to remove the Composer.lock from .gitignore. After we are finished with git, let’s go back to Heroku.

heroku create

This creates a new project on Heroku.

git push heroku master

This will push everything to Heroku. Let’s test it. If everything goes well then we will see the Laravel logo we also saw when we tested it on Homestead Improved.

If you have problems with the rsa keys then read this article. If you want to know more about PHP on Heroku, see here and here.

Installing front-end packages

We’ll use Bower for front-end package installation . You are free to use anything you want, even downloading as zip from Github or from official pages. Navigate to the public folder in the Laravel folder.

cd public

There’s no need to install Bower because Homestead comes with nodeJs, npm and Bower pre-installed.

bower init

Then install the packages: Foundation 5, EmberJs and Ember Data. Ember data is a library used by Ember and is stand-alone. It will help us with the REST Api as a Rest Adapter.

Bower has installed everything for us, including all the dependencies.

Front-end skeleton

Lets start building the fundamentals of our project. Bower has installed the dependencies and put them in bower_components. We also need a folder to put our static files in. Create a folder called static in the public directory. Then create three folders inside: js, css and img. In the js folder create an app.js file and in the css folder, a style.css file.

The first thing I always do when starting a new project with Laravel is to generate a key for secure password hashing.

php artisan key:generate

Create a new view in app/views. Call it index.php. This will be the landing page. We need to import all the javascript libraries and the styles inside that file.

This is the skeleton of the view – we can build from that. This is an one-page app which makes this file the only view in the entire application. Everything that we are going to build with Ember will be only in this file.

To use the index.php view we have also to change the routes.php file located inside the app folder. Change the file to this:

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

Test it in your browser. Open localhost:8000. A blank page with a title will appear. If we look at the inspector (ctrl+shift+i), there are no errors. Every file loads without problems. Upload all the changes to Heroku and see if it works there.

git add .
git commit -m "testing"
git push heroku master

Database configuration

Database configuration with Laravel is easy when dealing with different environments. We have to configure it in a way that works both on Homestead and on Heroku. On Heroku, Postgresql is not installed when the app is created, so we have to install it using the toolbelt. This addon does not require you to have a credit card:

heroku addons:add heroku-postgresql

In /app/config/database.php change the default key to point to postgres.

'default' => 'pgsql',

Different config values are used for Postgres on Heroku and on Homestead. So how can these values be used in each case? From the original quick tip, we know the default Postgres port is 54320 and the user/pass combination for our development environment is homestead/secret.

We have to change the values for the production environment (Heroku, in this case).

Create a new folder called production inside /app/config. Copy the database.php located in /app/config/local and put it in the production config folder. Also put a copy inside the testing folder. When you want to test your application, you have to configure the database for that environment, too. Laravel stores the configurations for Homestead by default in the local/database.php folder.

Heroku stores the configuration of postgres as an environment variable. In the end, the file should look something like this.

Artisan is a nice tool for cutting down development time. Migrations and seeders are just a bit of artisan magic.

php artisan migrate

This will execute the up method on every migration file and creates the schema defined inside that method. On the other hand, php artisan migrate:reset will execute the down method and in most cases will revert all the changes that the up method did. If you create a schema with the up method, revert everything in the down method.

The database now has a table called users with a simple structure. Using the Seeders the database will be filled with data. After all, it’s better to have the data in the database by running one command than doing it manually every time the database changes.

A seeder class has to extend the Seeder class. Also, add this code inside /app/database/seed/DatabaseSeeder.php because artisan doesn’t include custom files when running php artisan db:seed. Instead, you have to use php artisan db:seed --class=UserTableSeeder to use that particular class. I prefer to run php artisan db:seed and let the DatabaseSeeder do all the work.

This only adds one user inside the users table. More users are needed for testing an application. We’ll handle this in part 2.

After inserting this snippet inside DatabaseSeeder.php located in /app/database/seeds, run the following command:

php artisan db:seed

A new row with our values has been created inside the users table.

Heroku again

We have a database with a simple table on Homestead. But can these changes be made on Heroku? Use git to push the code online and find out.

git add .
git commit -m "adding database"
git push heroku master

Afterwards execute artisan on Heroku.

heroku run php artisan migrate
heroku run php artisan db:seed

Put heroku run before any php/artisan command and it will work. Since this environment is in production mode, a question will appear on the screen. Hit enter and the users table will be created and seeded. If you have more seeders and migration files, the question would appear more often.

Wrapping up

In this article, we’ve built a skeleton for our application. It is now running in our local environment and on Heroku. In a situation where you deal with local development and cloud development, you can spend a significant amount of time dealing with configurations and being on the same page with two different environments. Next, we will finish creating the database. We’ll be creating some seeders with a fake data generator, and we’ll use a filesystem library to deal with local files. Stay tuned!

Aleksander is young developer who loves to play with the newest web technologies. In his free time, he reads about PHP, Firefox OS or experiments with a new language. Currently, his main interests are PHP design patterns, laravel, dart and cloud.

Aldo Ziflaj

I’m actually developing something like this, using AngularJS instead of EmberJS, and with a REST backed build with Laravel. The philosophy is the same though, on the client-side.
Good idea on involving Heroku. Would it make any difference if the “push to Heroku” stage was done finally after fully developing the application?

Aleksander Koko

Actually it’s like the Agile strategy. You make some changes and see how it looks. When you develop something for the first time using Heroku is a good idea to test it a lot to fully understand what you do. Heroku is PaaS so if you don’t have previous experience using PaaS better test as you can.

I saw your AngularJs and it’s pretty good. I tested that for a client of mine and it is a nice tool. They really liked the implementation of Ionic (i saw you article) but I’m translating that project on Titanium as it has better performance and it is the best of hybrid world. Although I like to use Ember instead as it didn’t fit to much for me. Ember has some good integration if you use Ember Data. Using Ember Data doesn’t require you to do any single Ajax call. Ember organizes itself it’s data. I haven’t used Angular very much put consider Emberjs in the next application. It is very powerfull.

Aldo Ziflaj

Angular VS Ember is a long conversation that may never ends, but that is not the point. Thanks for the advice.

Would the application work in the same way if it is not previously tested after every small change?

Aleksander Koko

It depends on the use case. Lets say you want to save some files. On local development it’s easy. On Heroku you can’t. Heroku doesn’t allow to save a file when the application is running. You can see it on the other articles. That’s why it is a good method to testing as much as you can. Heroku differs from the local development. It is platform as a service. It doesn’t allow you to do many other things. It’s limited.

Talented Unicorn

I’m following this tutorial and at the database configuration I get an exception about the DATABASE_URL variable, it seems that it’s not set. Is there something I need to do prior to this step? Thanks.

Thanks for your response but when I run “php artisan migrate:make create_users_table” I get an exception error: {“error”:{“type”:”ErrorException”,”message”:”Undefined index: host”,”file”:”/home/vagrant/Code/Laravel/app/config/local/database.php”,”line”:37}}

after applying the step above to my local/database.php

Aleksander Koko

You don’t have to change anything in local/database.php because everything is already set up. You only have to change the pgsql which is the driver of the database. The configuration is already set up and ready to use with Homestead. You only have to change the config on production/database.php . Feel free to ask if any other errors occur .

cirkut

For anyone having this same issue, be sure to include your hostname in the environments.php under local. If not, you have to run ‘php artisan migrate:make –env=local’.

You can find your hostname on a *NIX computer by running ‘hostname’ in your terminal.

Aleksander Koko

Click on the addon and see the Connection Settings. Try to put the information using these settings. You can find there the host, port, password and the info that you need to configure the database.

Jake Jackson

Great tutorial. It would be good to see it updated to reflect Larvel 5 which appears to have a different folder structure than mentioned.

Aleksander Koko

Hi @disqus_lzA4RxxNJI:disqus . I’m working on that right now :) We will update this series in a month or so