DEV Community

Cover image for Setting up Laravel and React in WSL
tyler-wel
tyler-wel

Posted on

Setting up Laravel and React in WSL

#tutorial #react #laravel #beginners

Recently I was given an assignment to build a simple web app using Laravel. Having never used PHP before, this was an interesting challenge! Because setting up environments is never fun, I decided to write this post to summarize my notes and hopefully help out anyone else looking to get Laravel up and running. I setup my environment using WSL, but this guide should work for any Unix system.

Prerequisite

If you're a Windows user, first you're going to want to get WSL setup and running. For more information please see: Windows Subsystem for Linux Installation Guide for Windows 10.

Getting Started

From a fresh WSL install, we'll want to install the following packages:

  • Apache 2.4.29
  • PHP 7.2.24
  • Node 8.10.0

Step 1 - Node, Apache, PHP

The following commands will get the above packages, and other dependencies installed.

sudo apt update && sudo apt upgrade
sudo apt install apache2 curl openssl zip unzip git libonig-dev nodejs npm
Enter fullscreen mode Exit fullscreen mode

Check nodejs and npm were installed correctly with:

$ node --version
v8.10.0
$ npm --version
3.5.2
Enter fullscreen mode Exit fullscreen mode

After confirming nodejs and npm are ok, confirm apache is ok, and if not, get it running

$ apache2 -v
Server version: Apache/2.4.29 (Ubuntu)
Server built:   2019-09-16T12:58:48
$ sudo service apache2 status
Enter fullscreen mode Exit fullscreen mode

You can confirm the server is running and restart/start/stop it with the following commands when needed

sudo service apache2 status
sudo service apache2 restart
sudo service apache2 start
sudo service apache2 stop
Enter fullscreen mode Exit fullscreen mode

Now that apache2 is up and running, it's time to get all the required php packages installed! In this tutorial, we're going to go with PHP 7.2.

sudo apt install php7.2 libapache2-mod-php php-cli php-cgi php-mbstring php-zip php7.2-gd php-xml php7.2-sqlite
Enter fullscreen mode Exit fullscreen mode

You can visit PHP Function Reference for more info on some of the above packages.

Step 2 - Composer and Laravel

The composer installation guide comes with an SHA-384 installer check, so I recommend visiting the installation guide for more information. If the second step of the following commands fail, please see the guide.
Download Composer

Summarized Composer Installation (Feb 2020) 

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php --install-dir=~/.composer/vendor/bin/ --filename=composer
php -r "unlink('composer-setup.php');"
Enter fullscreen mode Exit fullscreen mode

If the composer-setup.php command fails, please create the directory yourself and re-run.

mkdir -p ~/.composer/vendor/bin
Enter fullscreen mode Exit fullscreen mode

Make sure composer is added to your .bashrc

echo 'PATH=$PATH:$HOME/.composer/vendor/bin/' >> ~/.bashrc
source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

Finally, confirm composer installed correctly

$ composer --version
Composer version 1.9.3 2020-02-04 12:58:49
Enter fullscreen mode Exit fullscreen mode

Laravel install is much simpler! Just run the following commands and you're good to go

composer global require laravel/installer
Enter fullscreen mode Exit fullscreen mode 
$ laravel --version
Laravel Installer 3.0.1
Enter fullscreen mode Exit fullscreen mode

Step 3 - React Framework

Laravel comes with VueJS scaffolding as default, but I personally prefer working with React. Luckily, switching over to React is very simple! Just run the following commands in the directory of your choice and you'll be good to go.

laravel new project_name
cd project_name
php artisan preset react
npm install
Enter fullscreen mode Exit fullscreen mode

The above commands will create a new Laravel project named project_name in a directory of the same name. It will set the preset scaffolding to React and install all the required node modules.

Step 4 - Build and Go!

We're almost there! To get your new Laravel app running, run the following commands

composer install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Once those are finished, you will want to duplicate the provided env.example and rename it to .env and setup you're preferred database.

If you want something lightweight and simple, you can just set

DB_CONNECTION=sqlite
Enter fullscreen mode Exit fullscreen mode

and delete the other DB_ lines. This will use the database file in the default directory database/database.sqlite (make sure to create this file yourself!)

Lastly, get our API_KEY filled in with:

php artisan key:generate
Enter fullscreen mode Exit fullscreen mode

And that should be it!! If everything went smoothly, you can run

php serve artisan --port=8181
Enter fullscreen mode Exit fullscreen mode

and you're good to go! Open up the basic site at localhost:8181 and have fun working with Laravel and React!

Final Comments

If you have any questions, advice, or found something wrong in this explanation, please let me know down below!

Top comments (0)

Read next

maulikpaghdal profile image

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal -

04anilr profile image

What is new feature of React version19

Anil -

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

dev_girl profile image

Best Memes of Anime Girls Holding Programming Books

Dev Girl -