Learning Laravel 6 and VueJS (4 Part Series)
One of the first full-stack web frameworks I worked with was Ruby on Rails. I still think to this day that it is a fantastic framework to work with as a developer. It extracts away a lot of pain for you. Do you need to add something to the database? No problem. You need to write a simple migration. Need an auth system? No problem, it is just one CLI command away. You don't know how to set up your project structure? No need to think about this. The framework already has the best practices for you!
Lately, in the web dev community, you can hear more and more about Laravel. People call it sometimes the Ruby on Rails of PHP. So in this series, we will together explore Laravel 6, and as our frontend framework, we will use VueJS.
Laravel is written in PHP and needs PHP plus some extra extensions.
Here are the requirements for laravel 6.0
- PHP >= 7.2.
- BCMath PHP Extension
- Ctype PHP Extension
- JSON PHP Extension
- Mbstring PHP Extension
- OpenSSL PHP Extension
- PDO PHP Extension
- Tokenizer PHP Extension
- XML PHP Extension
In this tutorial, I will use
Ubuntu since it is one of the favorite Linux distros, and you can easily install Ubuntu with
First lets add an
ppa(of course we need a ppa it is Ubuntu ;) ).
sudo add-apt-repository ppa:ondrej/php ; sudo apt update ; sudo apt upgrade
Now that we have everything up to date let's install all the dependencies
sudo apt install php7.3-common php7.3-cli php7.3-bcmath php7.3-zip php7.3-gd php7.3-mysql php7.3-curl php7.3-mbstring php7.3-imap php7.3-xml php7.3-intl php7.3-mysql
You can either provide a Database in the cloud, or you can install one locally. We will install MariaDB on our Ubuntu system. For that, we need the following package.
sudo apt install mariadb-server mariadb-client
After that, we need to set up the database
Please follow the instructions and remember all the logo credentials we will need them later
Now you need to start mariadb.
sudo service mysql start
Composer is a package manager for PHP, and it is used for creating new laravel projects and then managing PHP dependencies. So let's install it:
sudo apt install composer
Now that we have
composer running, we need to install the global laravel installer. This will help us to create new projects with just one simple command line.
composer global require laravel/installer
We need to add the following line at the end of your
Open the file with any editor you like and add the following line to it:
Now you either need to close and reopen your terminal or run this command
Now you should have the
laravel command at your fingertips.
laravel new Laragram
This will now take some time to download and install all the dependencies.
In the meantime, I will tell you what we will build here. So maybe you already have seen
LaraGram in the
composer command. If you now think we will create an Instagram clone, then you are right! The goal of this series is to have an Instagram like app with all the most essential features. Like sharing posts with picture uploads, following people, commenting under posts, and some more features. Okay, the command now should have finished, and you should have a new folder called LaraGram.
Now let's run our newly created application. Please make sure that your terminal is in the LaraGram folder and then run the following command:
php artisan serv
This should now start a server, and you should see the following message in your terminal:
Laravel development server started: http://127.0.0.1:8000
This means that you now can go to your favorite browser (It should be firefox ;) ) and enter the URL
http://127.0.0.1:800 into the address bar. You should see now the default laravel page.
First, we need to edit one file in our laravel project. You need to find the file
app->Providers->AppServiceProvider.php and add the following lines:
use Schema; Schema::defaultStringLength(191);
Now we can connect to mariadb:
sudo mysql -u <root or a user that can access the db> -p
And we can create the table
CREATE DATABASE laragram CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE laragram; CREATE USER 'larauser'@'localhost' IDENTIFIED BY 'larapw'; GRANT ALL PRIVILEGES ON laragram.* To 'larauser'@'localhost' IDENTIFIED BY 'larapw'; EXIT;
This will create a database called 'laragram' with a user called 'larauser' and the password 'larapw'.
Let's see if laravel can now talk to our database. First, stop the server with
CTRL+c and then run the following command:
php artisan migrate
This command tells laravel to run the migrations that the framework creates by default for us.
If everything is okay, it should like in the image above.
First, we need to tell laravel to use vuejs
php artisan preset vue
Now we only need two more steps to get our frontend running.
This will install the npm dependencies. If everything is fine, we can now run our frontend.
npm run dev
npm run watch
The first command will build the frontend once, and the second will run forever and rebuild the frontend when you save a file.
Now we have everything set up and ready to work on our Instagram clone!
We will start with this in part 2! So don't forget to follow to get an alert when the next part is released!