Quick Guide on how to set up and code your first web app - Laravel Framework Part 1

Hello everyone, I've just joined recently and been considering what type of content I would like to bring to the Steemit community. I always wanted to bring good programming content as a way of spreading knowledge and reinforcing my own. I love making apps. I published my first app on the Apple app store about 5 years ago and made another 4 apps after that. From there I began to wonder how I could write server code and made the server communicate with my app, which is where my journey of using Laravel began.

Laravel is awesome. Other than an awesome community there are an abundant amount of resources you can use at your disposal as well as the author of Laravel providing video tutorials of major features with step by step code through Laracasts.

In this post, this is a quick guide for those not too familiar with setting up their first web app. We'll learn how to set up Laravel and spin up a website quickly. This guide is for mainly OSX users as it is my chosen development platform.

Required knowledge

You should have a basic understanding of the following

• CLI
• PHP
• HTML
• Composer - PHP dependency manager
• A text editor - I can recommend Atom download it at https://atom.io/

Prep

If you have the latest version of OSX installed, most if not all of the required tools that are needed to use Laravel should come preinstalled. Otherwise make sure you have the following installed

• PHP >= 7.0.0
• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension

Step 1 - Laravel Installer

composer global require "laravel/installer"

This installs laravel for us and allows us to use the laravel command globally.

Step 2 - Create out project

After the installation is completed, we can now use the new option to create a new web app. Navigate to your directory, I use directory called Sites to store all my projects. The new option accepts an argument, which is the name of our web app.

laravel new helloworld

Step 3 - Directory overview

Navigate to your project directory cd helloworld. A lot of directories may be unfamiliar. Let's go through the purpose of each directory

app

The purpose of this directory is where we store our Models, Events, Listeners, Controllers, Exceptions and able to run scheduled jobs (cron jobs) in Console/Kernel.php. The http directory contains the controllers, Providers for custom code and bootstrapping custom packages to your web app, and Exceptions for custom exception classes.

database

Where we manage our database data. Any seed, factory or migrations files go here

public

The public directory stores, media and other assets compiled by yarn or npm. This directory is public accessible via the URL.

routes

The URL and API routes are defined here

resources

This stores our raw javascript and css (SASS) files before yar or npm compiles them. Don't get confused and begin editing the public/js, public/css files. All of the blade template files for our web pages are also contained here.

If you chose to include VueJS in your project, it can also be found under the assets/js subdirectory.

storage

I usually venture here to read log files. When Laravel spits out an error, it usually creates a new log file for record. Any errors, this is probably the first place you'll want to go.

Step 4 - Run our server

Now that we're familiar with our directory structure. We can try spin up a local server which is very simple. The artisan is our very bestest friend when viewing our web app. Typing php artisan will lay out various commands we can use to build our app. To spin up a local server we'll type in our root project directory

php artisan serve

By default, artisan will use 8000 as default. Remember you cannot have two local servers running on the same port. You can use --port 8080 to change the port and start a second server.

Step 5 - Oops something went wrong!

You'll notice something isn't quite right. We're missing our .env file. Each project comes with an example file .env file .env.example. This is where we copy the template from the command line and generate a key for our app.

Copy the file
cp .env.example .env

Generate key
php artisan key:generate

Start the local server again and you should see our default Laravel start up page.

Step 5 - Finding the home page blade template

We can find this under the directory

resources\views\welcome.blade.php

That's it! Get building and change the welcome.blade template to start your first website!