Development environment for Laravel with Vue-JS

Install apache2, php 7.4, mariadb, phpmyadmin, composer, Laravel and VueJS on Linux Mint

1. Apache2

1.1 Installation

As the Apache-webserver is part of the most distributions repositories install it with:

sudo apt install apache2

1.2 Check successful installation

sudo systemctl status apache2

2. PHP 7.4

2.1 PHP PPA

For that we will use a PPA (Private Public Archive). It is not recommended because of possible security reasons, but at the moment PHP 7.4 is not available through the distributions repositories.

The newest PHP versions as by now (August 2020) can be found at the PPA from Ondřej Surý.

So lets add that:

sudo add-apt-repository ppa:ondrej/php

sudo apt update

2.2 Install PHP 7.4

sudo apt install php7.4

To check it enter

php -v

It should show version 7.4

3. MariaDB

3.1 Install MariaDB server

For the installation see also the repository configuration page of MariaDB at:

https://downloads.mariadb.org/mariadb/repositories/

sudo apt-get install software-properties-common

sudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc'

sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el] http://ftp.nluug.nl/db/mariadb/repo/10.5/ubuntu bionic main'

Once this is ready get the MariaDB-server installed with:

sudo apt update

sudo apt install mariadb-server

Note!: In my case the mirrorserver is at ftp.nluug.nl. In your case it may vary. So check the commands with the repository configuration page of MariaDB. See link above.

3.2 Securing MariaDB

The secure (harden) your MariaDB installation use the following command:

sudo mysql_secure_installation

and follow the instructions.

3.3 Add user with admin privileges

Don’t use the root user at all. Via the command above remote access for root is prohibited. So you need another user with admin rights to allow remote login and administer your MariaDB installation.

3.3.1 Log in MariaDB a last time as root with:

mysql -u root -p

Enter the above in part 3.2 created password.

3.3.2 Add a user with:

CREATE USER IF NOT EXISTS 'username' IDENTIFIED BY 'password';

3.3.3 Give all necessary rights / permissions to this user:

GRANT ALL PRIVILEGES ON *.* TO 'username' IDENTIFIED BY 'password' with grant option;

3.3.4 Make it active with:

FLUSH PRIVILEGES;

3.3.5 Verify all is correct with:

SHOW GRANTS FOR 'username'@localhost;

4. PHPMyAdmin

4.1 Install dependencies with:

sudo apt install php7.4-mysql php7.4-mbstring php7.4-zip unzip

4.2 Activate the modules

sudo phpenmod mysqlisudo phpenmod mbstringsudo phpenmod zip

4.3 Download the latest stable version with

wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-languages.zip

unzip it:

unzip phpMyAdmin-latest-all-languages.zip

4.4 Make directory for PHPMyAdmin

sudo mkdir /var/www/phpmyadmin

4.5 Copy files in place:

sudo cp -r phpMyAdmin-*/* /var/www/phpmyadmin/

4.6 Allow access to apache

sudo chown -R www-data:www-data /var/www/phpmyadmin

sudo chmod -R 755 /var/www/phpmyadmin

4.7 Tell Apache hat phpmyadmin exists

To access PHPMyAdmin at www.domain.com/phpmyadmin you have to tell apache to do so by adding a configuration.

So create one with:

sudo vi /etc/apache2/conf-available/phpmyadmin.conf

With this content:

Alias /phpmyadmin /var/www/phpmyadmin/

<Directory /var/www/phpmyadmin/>

AllowOverride all 

</Directory>

4.8 Activate the configuration

sudo a2enconf phpmyadmin

sudo systemctl reload apache2

4.9 Securing PHPMyAdmin

For security reasons and in a production environment it is recommended to harden access to the phpmyadmin directory with an .htaccess file and password

4.9.1 Create an .htaccess file with

sudo vi /var/www/phpmyadmin/.htaccess

with the following content:

AuthType Basic

AuthName "Restricted Files"

AuthUserFile /var/www/phpmyadmin/.htpasswd

Require valid-user

4.9.2 Create the .htpasswd file

sudo htpasswd -c /var/www/phpmyadmin/.htpasswd USERNAME

Choose a password different then the passwords you use in MariaDB for extra security.

When ready you should be prompted for a password when attempting to open phpmyadmin.

4.10 Secret passphrase for cookie-authentication

After the installation you’ll see this error when you log in to PHPMYAdmin.

Open config.inc.php ( or rename config.sample.inc.php to config.inc.php if you haven’t done so yet ) and change the line with

$cfg['blowfish_secret'] = ; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

to

$cfg['blowfish_secret'] = '<verysecretpassword>'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

where <verysecretpassword> must be 32 characters long.

You don’t have to remember this password, so I can be a happy mix of chars, numbers and special characters you like.

Never use a password you use in production.

5. Composer

Install composer on your system following the instructions on their website to get the latest:

Install composer

Beware that this commands may change on new releases. Below is only an example.

For the actual installation instructions look at the composer website.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php --install-dir=bin --filename=composer

php -r "unlink('composer-setup.php');"

6. NodeJS and NPM

6.1 Official install instructions per version:

Install NodeJS instructions

6.2 tl;dr

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

7. Laravel

7.1 Laravel installer

Install it via composer.

composer global require laravel/installer

7.1.1 Add the path to the executable to your PATH environment-variable:

Edit $HOME/.profile and add

$HOME/.config/composer/vendor/bin

or

$HOME/.composer/vendor/bin

to your PATH-variable.

The exact location can be found by the following command:

composer global about

7.2 Create a new Laravel project

7.2.1 PHP-dependencies

The installer requires the php-xml dependency. So install it with:

sudo apt install php-xml

7.2.2 Create new project

Go to the location where your project should live and execute:

laravel new <projectsname>

After that cd into the new project directory.

7.2.4 Get some ui to work with

As this is for Vue-JS use the next command:

composer require laravel/ui

php artisan ui vue

You will see a notice on the terminalwindow to use npm to install everything needed.

npm install && npm run dev

7.2.5 File and directory permissions

I assume that these settings are correct after the installation, but if not set them as follows:

7.2.5.1 Files

sudo find <laravel-rootdirectory> -type f -exec chmod 644 {} \;

7.2.5.2 Directories

sudo find <laravel-rootdirectory> -type d -exec chmod 755 {} \;

7.2.6 Set user and group to your project directory.

sudo chown -R <your-username>:www-data <projects-rootdirectory>

Why <your-username>? It makes things easier. Write to the files for instance aka developing your project.

7.2.7 Give apache the right to write to storage (upload, logs…) and cache

Go to your projects root directory and execute the following commands:

sudo chgrp -R www-data storage bootstrap/cache

sudo chmod -R ug+rwx storage bootstrap/cache

7.3 Create webconfiguration for this project

7.3.1 Create a new config file with:

sudo vi /etc/apache2/sites-available/www.my-website.localhost.conf

and insert this content:

<VirtualHost *:80>

ServerAdmin webmaster@localhost

ServerName my-website.localhost

ServerAlias www.my-website.localhost

DocumentRoot /path/to/your/project/public/

LogLevel debug

ErrorLog ${APACHE_LOG_DIR}/error.log

CustomLog ${APACHE_LOG_DIR}/access.log combined

<Directory /path/to/your/project/public/>

Options Indexes FollowSymLinks MultiViews

AllowOverride All

Order allow,deny

allow from all

Require all granted

</Directory>

</VirtualHost>

Where my-website.localhost should be your website name / address and the ServerAdmin email should be your actual email address for that website admin.

DocumentRoot should be the path to your website files.

If you decide to keep the logfiles apart for each website, for instance at

${APACHE_LOG_DIR}/my-website/error.log

don’t forget to add a subdirectory to /var/log/apache.

sudo mkdir /var/log/apache/my-website

7.3.2 Activate the new website and deactivate the default one

sudo a2ensite www.my-website.localhost.conf

sudo a2dissite 000-default.conf

sudo systemctl restart apache2

7.3.3 Alias the website in your /etc/hosts for easy access vie your browser

Open the file with:

sudo vi /etc/hosts

and add

127.0.0.1www.my-website.localhost

8. Vue-JS

With adding the vue ui above Vue-JS is already installed into Laravel. So no extra work to do.