Learning Laravel 6 and VueJS for Javascript/NodeJS developer part 1 - getting Laravel running
Tags: laravel, php, vue, javascript
Published: 2019-10-13 18:37:40

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.

### Getting Laravel to run

#### Requierments
##### PHP
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 `WSL`.

First lets add an `ppa`(of course we need a ppa it is Ubuntu ;) ).
```bash
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
```bash
 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
```

##### MySql/MariaDB

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.
```bash
sudo apt install mariadb-server mariadb-client
```

After that, we need to set up the database
```bash
sudo mysql_secure_installation
```
Please follow the instructions and remember all the logo credentials we will need them later

Now you need to start mariadb.
```bash
sudo service mysql start
```
##### Composer

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:
```bash
sudo apt install composer
```

#### Creating our first laravel application

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.
```bash
composer global require laravel/installer
```
We need to add the following line at the end of your `~/.bashrc`.
Open the file with any editor you like and add the following line to it:
```bash
$HOME/.config/composer/vendor/bin
```
Now you either need to close and reopen your terminal or run this command
```bash
source .bashrc
```
Now you should have the `laravel` command at your fingertips.
```bash
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.

#### Starting our first laravel application

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:

```bash
php artisan serv
```

This should now start a server, and you should see the following message in your terminal:

```bash
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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6oakyry8ct54qq47x6cj.png)

#### Creating a database for laravel

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:

```php
use Schema;

Schema::defaultStringLength(191);
```
Here is a picture of how it should look:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ytpjebztndnn8v8gg2ab.png)

Now we can connect to mariadb:
```bash
sudo mysql -u <root or a user that can access the db> -p
```
And we can create the table
```sql
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:

```bash
php artisan migrate
```

This command tells laravel to run the migrations that the framework creates by default for us.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jbrd0s0zf5imm9ngk0hl.png)

If everything is okay, it should like in the image above.


#### Setting up vue.js

First, we need to tell laravel to use vuejs
```bash
php artisan preset vue
```

Now we only need two more steps to get our frontend running.

```bash
npm install
```

This will install the npm dependencies. If everything is fine, we can now run our frontend.

```bash
npm run dev
```

or 

```bash
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!

**👋Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)