Antonin Hérault
Antonin Hérault

Antonin Hérault

Your first Laravel website using tailwindcss and its deployment on the web

This tutorial will help you to introduce what's Laravel and create your first online website with PHP and the Laravel framework using tailwindcss

Antonin Hérault's photo
Antonin Hérault
·Jun 7, 2022·

6 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Let's start
  • Routing
  • First start on localhost
  • Views and templates
  • Routage, again
  • Local hosting for our pretty website
  • Style it for me!
  • The fabulous world of Internet
  • Apache configuration
  • This was just the beginning
  • Notes
  • Tools used

Let's start

You can check tools we use for this project here.

In your command shell, in your projects' directory :

composer create-project laravel/laravel laravel_project
cd laravel_project
git init

Where laravel_project is your project name (use whatever name you want). This command creates a new folder with the laravel website inside it.

Now we have our website, with a local git repository initialized. Create a repository on Github (or another platform) and set "origin" to it. Then, make your first commit, see my example.

Open the created folder in your favorite editor.

Routing

Laravel includes a simple way to make web routes. The only file you have to change is "routes/web.php". It looks like this :

<?php

use Illuminate\Support\Facades\Route;

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

By this way, you know there is a "welcome" view in "resources/views/". In fact, it's a Blade PHP file called "welcome.blade.php".

We will update some things later.

First start on localhost

To locally test your website on "localhost:8000", run :

php artisan serve

Something like that will be showed : Laravel welcome page.png Nice ! We have our first website.

Views and templates

Blade is an awesome tool to easily make your web pages, and generate web pages from the templates you made. All Blade files have the ".blade.php" extension.

Create a folder named "layouts" in "resources/views/" and create a file named "base.blade.php" in it.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>@yield('title') - Laravel project</title>

        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        @yield('content')
    </body>
</html>

Yes, it looks like an HTML file, but you probably saw @yield(...). Each yield is a part that have to be overridden by the inherited Blade file.

Create a new file in "resources/views/" called "index.blade.php", and remove the "welcome.blade.php" file that we will never use again.

Put that content in the index file :

@extends('layouts.base')

@section('title', 'Home')

@section('content')
    <p>Welcome on my website !</p>
@stop

As you can see, the index file is an inherited Blade file from the template we just made. It overrides the different yield thanks to @section.

Blade permits to auto-generate HTML files from templates, with some overrides. Then you save a lot of time.

Routage, again

Remember the "routes/web.php" file ? Else, go back here.

We only have to change the returned view to "index" and not "welcome". Simple.

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

For each view you will add, you have to make route rule for it, example :

Route::get('/about', function () {
    return view('about'); // for "resources/views/about.blade.php"
});

Local hosting for our pretty website

If you don't have stopped the run command php artisan serve, refresh the page in your navigator. Else, run the command again.

You will see that, as what we written in the index file : Website screenshot.png

Ok, ok this website needs more CSS...

Style it for me!

Tailwindcss is an incredible tool to have a beautiful website just using classes in HTML, you will never write CSS code again.

To install it on our project, run :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init # generates a config file for tailwind

It has generated "tailwind.config.js", we will use it to set our constants like colors or padding default sizes. See more here (tailwindcss' documentation page)

You have at least one thing to modify, the watched sources :

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Don't forget to modify "webpack.mix.js" to indicates tailwind is required :

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"), // added line
    ]);

Here we are using "mix", and you probably have to install it by running npm install laravel-mix.

Add this following CSS code into "resources/css/app.css" :

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the content section in "resources/views/index.blade.php" to test the tailwind's installation.

@section('content')
    <h1 class="text-3xl font-bold underline">
        I'm a title using tailwindcss
    </h1>
    <p>Welcome on my website !</p>
@stop

Now, enter the following commands in your terminal :

npm install axios
npm run dev
php artisan serve

You will see that, if the title isn't stylized, you probably did the tailwindcss installation wrongly : Tailwind title.png

Save this link, it's the tailwindcss website, you will find everything you want for styles.

The fabulous world of Internet

Ok, we have a pretty local website, but we would like to see it on the web. I guess you already have a VPS (Virtual Private Server).

Connect by ssh to your VPS. shh my_username@laravel-project.com

Create a folder in "/var/www/" called like you want, here I'm using the same name that the project : "laravel_project". Then run : cd /var/www/laravel_project.

Init a git repository by running git init, and set the origin as the same origin to your Github repository (I hope you pushed everything, that means your local version is up-to-date with the online repository).

Now, run git pull. Wow ! Your website source code is here. Everything is going well.

Something you should not forget, creating the environment file :

cp .env.example .env
nano .env

Change the APP_NAME's value and exit.

Build the website for prod :

composer install
npm install
npm run prod
chown www-data:www-data storage/ bootstrap/cache -R
php artisan queue:restart

I've made an update script to place in the folder's parent that could be used each time you want to update your website and build it. Find this gist here

Run php artisan key:generate to generate the website key, without that one you will always see errors 500.

Apache configuration

Create a new config file in "/etc/apache2/sites-available/" with the ".conf" extension.

Put the following content in it, with modifying some things according to your own values :

<VirtualHost *:80>
    ServerName laravel-project.com
    ServerAlias www.laravel-project.com
    DocumentRoot /var/www/laravel_project/public

    <Directory /var/www/laravel_project>
        AllowOverride All
    </Directory>

    ServerAdmin awesomewebadmin@mail.com

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =laravel-project.com [OR]
RewriteCond %{SERVER_NAME} =www.laravel-project.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

Now we can enable the config file and restart Apache :

a2ensite <config_name>.conf
sudo service apache2 restart

This was just the beginning

Your website is now working but you have a lot of still remaining to learn about Laravel !

Personnally, I did my website as very simple, I don't use a lot of Laravel possibilities, but it was a simple secure solution. Check the code from its repository.

If you have any question, don't hesitate to post a comment.

Notes

I've updated the base .gitignore to avoid pushing generated files like "public/js/app.js", you should do the same (+ "public/css/app.css" but it's a smaller file).

Tools used

We are using the current latest version of Laravel (9.x), with PHP 8.1

Check your current PHP version by running php -v and be sure you have made your PHP installation properly.

If you encounter any problems about PHP, remove all the PHP packages from your computer and only install the PHP 8.1.

Install "composer" from here (link to the composer's installation guide)

"npm" is also required, and a probably some other things but we don't need a tutorial to install them.