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!
Congratulations @markwong! You have received a personal award!
Click on the badge to view your Board of Honor.
Do not miss the last post from @steemitboard: