Getting Started With Laravel — The Lift Off

My involvement with web development really began when I wanted to create a simple website for my own startup but couldn’t really afford to pay someone to do it for me. I always was a DIY type person, so I didn’t mind the learning curve or getting my hands dirty.

Through my professional career on this field I have seen many people who got involved with web development in similar ways. The start is always hard. We developers, using Laravel on a daily basis, we know how simple it is to work with this framework — but that’s mainly because we know in general how websites work.

We know what routing means, what a session is, we know the details of a request-response cycle, databases, background queues, etc. We have a great official documentation which describes how does things work within the framework — but how good it would be if we did not know what those things were in the first place? Well, this is what I struggled with when I started (long before Laravel) and this is what I’m set out to help with in this article.

The very basics

You will need a few tools readily available on your computer if you decide to come along for the ride. This article is not intended to cover how to get those installed, but I’ll give you a little overview on why these are important.

The terminal (or console) application

This is an application where you can type different commands using your keyboard. You will soon become friends so don’t be afraid of it. There should already be one on your computer, and for now, the basics is all you need.

The editor

There are a ton of editors out there and every developer has their own favourite. My preferred one is PHPStorm because its features are outstanding for PHP development, but many people use Sublime Text or VSCode. As long as it’s giving you some nice syntax highlight out of the box, it doesn’t really matter. I even used Notepad++ for quite a while when I started!

Install PHP

PHP is the engine running your Laravel application. How to install PHP is a very diverse topic across different operating systems and distributions. You have a great chance that you already have what you need on your computer.
http://php.net/manual/en/install.php

When you get a similar response in your terminal, you’re all set.

Install Composer

Composer is a PHP package manager. Using it you will be able to use open-source packages and libraries, just like Laravel, very easily.
https://getcomposer.org/

You are ready to move forward if Composer reports its version.

The Laravel Installer

The simplest way to create new Laravel projects on your computer. Once you have Composer installed, it’s as simple as it gets to whip up a new project.
https://laravel.com/docs/5.6/installation#installing-laravel

The same is true for the Laravel installer.

Install NPM

NPM (Node Package Manager) is a part of Node. It manages front-end packages (CSS, JS) and Laravel Mix uses it to compile those assets down to files that your browser can understand.
https://nodejs.org/

Just as for the Node Package Manager.

Getting your hands dirty

Start your project

Go to your terminal, change the directory to where you would like to store your project(s) and create a new Laravel project.
(Note: your terminal/console application might look slightly different.)

Starting a new project named “my-project” in the Code directory.

When it’s ready, cd my-project and open it up in your favourite editor. You should see something like this.

A new project opened up in PHPStorm.

Now go back to your terminal for a second, type php artisan serve and hit enter. This command will start serving your application. (You need to keep this terminal window open. Once closed, the application will no longer be available through the browser.)

The server is now exposing the website on the given URL.

If you open the URL in your browser, you should see the default Laravel site.

The Laravel site, as it appears out of the box.

Congratulations, you have successfully started your first Laravel project, and you are now ready to begin!

Let’s dive in!

Where is this page coming from?

The available pages or entry points to your application are called routes. There are multiple route files in a default Laravel application, but what you will need for this project is the routes/web.php — and that’s exactly where this view is coming from.

It says if you GET the root domain, just return the welcome view.

What is a view?

You can think of a view as the output for the request. In the above example, the request is GET /, in other words directly accessing the root domain from your browser’s address bar. (A GET request, simply put, is what you can type in to the address bar of your browser.)

Views can be composed of one or more templates. Laravel uses its own, so called Blade templates to do just that. The welcome view lives in resources/views/welcome.blade.php. It is just a simple HTML file.

The default view of a new Laravel app.

Simple static pages

Every site has some pages that are not really driven by changing data. Most startups only need such pages — like the homepage, about us, services, contact, etc. Let’s create a couple of those now!

First, let’s change the current welcome page and turn it into our homepage! Note that the filename has changed and I removed all the boilerplate code from the actual template.

A barebones HTML file containing only a title in its body.

We have to change the route as well to point to our homepage.blade.php instead. There is an even simpler method just to return a view, which is equivalent to what we had before but more readable.

A simple one-liner to return the homepage view for root access.

Let’s add the about us, services and contact us pages now! The routes are self-explanatory really, but notice that most of our homepage.blade.php will be repeated across all files! Here is where a templating engine comes handy…

The power of Blade

Using Laravel’s own template engine we can avoid such duplication of code — which is something we should always aim for. There is a ton of useful features you can learn about here, but for now, we will stick with the basics.

Let’s rename our homepage.blade.php to layout.blade.php and give the name content to the part of the page that’s changing. For some extra kudos, we also give our pages a dynamic title.

Creating a simple, re-usable layout file.

Next, let’s bring our homepage back to life with some tweaking here and there. To keep everything neat and tidy, we collect all our static pages into a distinct folder. The contents of homepage.blade.php changes slightly to use the previously created layout file and remove all duplication.

Note the different ways of yielding content for the two pre-defined sections title and content.

Let’s create the rest of our pages the same way.

This is an example of the service listing page.

We will need to amend our routes to reflect the new folder structure.

Note the dot notation following the folder structure.

Now we can visit any of those routes in the browser and see what we’ve achieved in just a few minutes!

Note that we managed to dynamically change the page title as well.

Digging in a little deeper

Yes, I know. What we have above is very basic and we are barely touching the surface. We don’t even have a navigation… OK, let’s start there.

A header shared across all pages

We can simply add the navigation to our layout file and that will get shared across all pages. We can even create it as a Blade partial. Let’s do that.

Created the header partial and added the project name alongside with links to each page we have.

Now we need to include this in our layout file.

Now we have a header that is shared across all pages.

Still ugly though… Let’s make it look nicer then!

Laravel Mix

When creating a new Laravel project it comes with a bunch of boilerplate for both CSS and JS files. There is a handy method though how you can replace those with your preferred setup. I personally prefer TailwindCSS which allows rapid UI development for those who already know CSS, so that’s what I’m going to use in the example.

To get started quickly, I’m going to use a preset that can be installed via Composer. Open a new terminal window, type composer require laravel-frontend-presets/tailwindcss and hit enter. When that finishes, you can type and run php artisan preset tailwindcss and the boilerplates will be replaced with a basic Tailwind configuration for Laravel Mix.

To compile all the boilerplate to files the browsers can understand, first install the front-end dependencies by running npm install in the terminal (it may take a while) and then type npm run dev and hit enter. You should end up with something like this.

Compilation was successful and it generated two assets as shown on the left hand side.

This command will generate two files in the public directory: public/css/app.css and public/js/app.js with this setup. These files we will need to add to the main layout to have effect.

Although we won’t use JavaScript for now, I have added that to our layout as an example — you don’t need to.

If you refresh the page in the browser, you will see slight changes confirming that the new files are being loaded as we expected.

There are no margins for example — it’s called a CSS reset.

OK, let’s make it a bit more pretty!

Beauty is in simplicity designers say, which I totally agree with. So let’s just keep things very very simple for our fictive start-up company.

First, let’s add some base level CSS to our design. Create a _base.css file in resources/assets/css folder and import it from our app.css. This will hold our generic styles.

Note that the import happens where the Tailwind defaults say so.

For now, let’s make sure the body always fills the screen and that no links are blue or underlined by default. You will have to run npm run dev again to have these styles take effect. (When constantly changing, you can run npm run watch instead to monitor changes and compile automatically.)

Note that I have added a background image to the public folder of the application. (Image credit: Daniel Peters, Unsplash)

Now let’s use some Tailwind magic to style the header section!

Added flexible spacing, colours, sizes and weights to make the heading pop.

Now let’s improve on the main content part…

Note the classes on the body itself as well. Also that we have included our new footer.

Let’s now create our footer partial.

We are using the PHP date function to output the current year.

And finally add some dummy content to the pages to showcase our work in a bit more realistic context.

Our final homepage.

The about us page.

The service listing page.

Simple contact information.

Conclusion

In less than an hour we have built a simple but neat little business startup website using Laravel and TailwindCSS. In its simplicity it is sufficient to put the word out and help a small low-budget startup lift off the ground.