I bought a new laptop, so I need to install everything. In this video I’m taking you along the installation of Laravel Valet.

Tired of the localhost setup like MAMP, WAMP or XAMP?
Tired of the configuration, ‘etc/hosts’, and stuff like that.

We’ve been experimenting with Laravel Valet for the last months now and decided not to go back.
Its super easy, fast and reliable.

Installation

Before you start, make sure no other service is using port 80.

We’ll get started with installing Homebrew, the latest version of PHP (7.4 at this moment) and Composer

– You can update your Homebrew with “brew update”
– Installing the latest version of PHP using Homebrew : “brew install php”

We’re going to install Valet globally to our machine so we’ll use the following command.

composer global require laravel/valet

Once installed we can run valet install…

Defining the working directory

We need to attach Valet to an directory where we’ll keep our projects.
When navigated to the directory of your choice we can initiate this directory as the Valet directory by using the Park Command.

valet park

Once run, we can create new application projects in this directory.
The directory name of the project will also be the url for Valet. So for example is I have a directory called “pizzawebsite” I can use the URL http://pizzawebsite.test it’s as easy as that…

Sharing projects

It’s even possible to share a project with your team of client.
Thanks to the valet share command a publicly accessible url will be created using Ngrok.

Only Laravel projects? No, many more.

For those of thought Laravel Valet is only for Laravel projects… Nope !
It can be used for Laravel, Lumen, October CMS, Drupal, Craft CMS, Magento, WordPress and many more.

Here’s an overview of what you could use while developing a project with Laravel.
In order to create controllers, models, migrations, … we can use artisan.

Creating a Controller

php artisan make:controller MyController

When we want artisan to provide a controller with the “resource functions” (index, create, store, show, edit, update, destroy) predefined for us, we can simply add “–resource” to our command to provide these functions out of the box.

php artisan make:controller MyController --resource

Creating a Model

php artisan make:model

If you want artisan to provide a migration file related to our newly created model, you can just add “-m” to the command. Which gives us something like this:

php artisan make:model -m

Creating a Migration file

We’re also able to create our own migration file, for example is we want to add field to an existing table or create a pivot table, or …

php artisan make:migration the_name_of_your_migration

Just like the migration file that artisan provided for us when we used -m on the creation of a model, the migration file will be added to the /database/migrations folder.

Deploy the migration file(s) to the database

In order to get our migration file(s) migrated into the database, we need to tell artisan to migrate them. Like so:

php artisan migrate

Be aware that once a migration file has been migrated to the database, all changes to the file afterwards will be discarded. We’ll need to create a new migration file in order to add additional changes / migrations. In the database you can see the hierarchy of the migrations in the table “migrations”.

This year I’ve started working with some new tools, two of them are Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor allowing you to write more powerful css, with the use of variables, mixins/functions and nesting!

Off we go !

First of all you’ll need to install a few things. Ruby to get Sass, and NodeJs to get npm, so we can work with Grunt.

Grunt

Step one: installing Grunt. If you have NodeJs installed properly you simply run:

npm install -g grunt-cli

This will install Grunt globally. So you can use it wherever you want.

Now we need to create the “package.json” file there are several ways to do this. But I prefer to create a new file and input this.

{
  "name": "Project Name",
  "version": "0.0.1",
  "devDependencies": {
     //installed packages 
  }
}

And then save it as “package.json” in the root of my project.

After that we need to install our Dependencies. This can be done by running the following command. npm install <package> --save-dev

I want to use Grunt to compile my Sass when I save my project. To do this I need to install 2 dependencies.

grunt-contrib-sass: It is used to actually compile your scss files to css.

grunt-contrib-watch: It watches our folders for file changes.

Example npm install grunt-contrib-sass --save-dev

Now my “package.json” looks like this:

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4"
}

Next is our “Gruntfile.js”. This file contains the tasks that grunt needs to do for you.

This is how my Gruntfile looks like:

module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		sass: {
			dist: {
				files: {
					'style/style.css' : 'sass/style.scss'
				}
			}
		},
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['sass']
			}
		}
	});
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['watch']);
}

This file starts with a wrapper function and we pass in grunt so that we can access it..

Adding tasks with :  grunt.loadNpmTasks('*Name of the task*').

Register Tasks with :  grunt.registerTask('default',['*tasks to run*']); , the 'default' task is what gets running when you type grunt in the commandline.

The end !

When working on your project, just run the grunt command in your commandline in your project folder.

Hit ctrl+c to quit grunt when you’re done.