Setting up the Project

Second post in the Mini Facebook Clone Series

Posted on October 18, 2016 in Facebook Clone, Laravel PHP Framework, vue.js

Let's start

Just to pre-warn you, I do use a Mac, so most of the instructions are based on Mac users. I will do my best to alert you to commands that will not work on Windows based machines, but please do contact me if you find a mistake or an error. I would recommend using a different terminal that CMD Prompt on Windows. In the past, I have used the Git Bash terminal which gets installed with Git.

We'll first start by downloading and setting up a fresh Laravel project. Now, I am assuming here that you have either Homestead setup, Valet or some form of web development setup. If you haven't, then I would recommend something like Homestead as it is very easy to use and well documented. If you aren't sure about using Virtual Machines, then I would recommend something like MAMP or XAMPP to get started quickly.

You will need Composer installed also. Composer is a PHP Dependency Manager which Laravel uses to install its components.

Laravel is built up from lots of components. Some of which you could use within non-Laravel projects.

You will also need to have Node.js installed. Node.js can be installed easily using the installers provided from their website. This will allow us to use the NPM package manager to pull in our JavaScript dependencies.

Installing our fresh installation

You can install Laravel using a couple of methods. My favourite way is their Laravel Installer. This gives us the ability to create a new project with ease. For example:

laravel new ProjectName

The other methods would be either using Composer to create the project or cloning the GitHub repository. All of which are explained here within Laravel Installation Guide.

So, to start, open your terminal and navigate to your web directory and run the following command. I will show you the Laravel installer way and the Composer way for convenience:

# Laravel Installer
laravel new mini-facebook-clone
# Composer
composer create-project --prefer-dist laravel/laravel mini-facebook-clone

You should see something similar to:

Image of terminal output

If you now open the newly created project within you IDE you will see the following folder structure:

  • app
  • bootstrap
  • config
  • database
  • public
  • resources
  • routes
  • storage
  • tests
  • vendor
  • .env
  • .env.example
  • .gitattributes
  • .gitignore
  • artisan
  • composer.json
  • composer.lock
  • gulpfile.js
  • package.json
  • phpunit.xml
  • readme.md
  • server.php
  • yarn.lock

So, going over a few of these now, you have your app folder which is where most of your application code will go. The app folder contains your Models, Controllers and more. This folder has now been stripped down. You may notice if you've used previous versions of Laravel that some folders are missing like the Events folder. These now get created if and when you need them. You may also notice that the routes folder has been moved to its own folder in the root of the project. Another folder to make a note of now is the resources folder. The resources folder contains your views, javascript, css/sass/less and other resources you might require. You also have your public folder which is where your public facing scripts, styles and images will live.

Now if everything is working you should hopefully see the following: (Please note that I am using Homestead and have setup in my hosts file the address http://mini-facebook-clone.dev. If you are not using Homestead or valet check the documentation of your setup to find out how to set up hosts or you can use the following command from you terminal if you have PHP setup from the command line: php artisan serve)

Image of successful installation

Great, we have a working installation of Laravel.

Next

In the next part of the series, we will be implementing Laravel built in Authentication and going over how Laravel now comes with Vue as the default JavaScript framework.


comments powered by Disqus