Building a news app from scratch: Part 1 (Setup)

Published in

Building a news app using Laravel

2 min readNov 26, 2015

We’re going to be getting ideas for our website from the Washington Post, Wall Street Journal, and New York Times. Go ahead and explore those websites for a little bit to get acquainted with the styles, layouts, and page architecture that they use. You’ll find them all to be very similar.

Let’s get started! Go into your console, cd into your Projects directory, and type

laravel new news-app

This will create a brand new Laravel app inside a folder called “news-app”. Enter it by typing

cd news-app

Time to set up a few things. Type in the following commands, one line at a time

php artisan key:generate
php artisan app:name News
npm install

If one of the programs required isn’t installed, leave a comment and I’ll be sure to help you install it.

Next let’s install stylus, lost, and poststylus:

npm install --save-dev laravel-elixir-stylus lost poststylus

Go into your gulpfile.js and replace it with:

var elixir = require(‘laravel-elixir’);var postStylus = require(‘poststylus’); // npm install — save-dev poststylusrequire(‘laravel-elixir-stylus’);elixir(function(mix) {
 mix.stylus(‘app.styl’, null, {
   use: [postStylus([‘lost’])]
 }).browserSync({
   proxy: “ltimes.dev”,
 })
})

Edit your resources/views/welcome.blade.php file to this:

<!DOCTYPE html>
<html>
 <head>
 <title>Laravel</title>  <link href=”https://fonts.googleapis.com/css?family=Lato:100" rel=”stylesheet” type=”text/css”>
  <link href="css/app.css" rel="stylesheet" type="text/css"> </head><body>
 <div class=”container”>
   <div class=”content”>
    <div class=”title”>Laravel Times</div>
    </div>
   </div>
 </body>
</html>

Next, create a file at resources/assets/stylus/app.styl and put this in it:

html, body 
 height: 100%body 
 margin: 0
 padding: 0
 width: 100%
 display: table
 font-weight: 100
 font-family: ‘Lato’.container 
 text-align: center
 display: table-cell
 vertical-align: middle.content 
 text-align: center
 display: inline-block.title
 font-size: 96px

Add this to your hosts file

192.168.10.10 ltimes.dev

Run this:

gulp
homestead up
homestead ssh
serve ltimes.dev /home/vagrant/Projects/news-app/public

In your browser go to ltimes.dev

Building a news app from scratch: Part 1 (Setup)

Written by Russ Weas