RastcodeS

     An introduction to a Laravel application folder structure, styling a Laravel app with Sass and compiling styles and JavaScript files using NPM commands. This guide will also help you start a new Git repository and upload it to GitHub.

     This article is a continuation of a previous one, where we initialized our Laravel application and set up our local environment for easier development.

     Check out the first one:

Laravel Starter App - How I made this app Part I

 

Step 1 - get familiar with your surroundings

 

     Our app is initialized and now it's time to get to know it. To start of open your project folder in a text editor. You'll see something similar to the picture below.

 

     The top folder, named app is where most of our back-end code will go. We won't go into detail on every single sub directory or file and will concentrate on the ones we'll mostly use, through development of this app.

 

     The App folder holds, most importantly, Exceptions, Http and Providers sub directories.

     The Exceptions has a Handler.php file, where we'll handle our, well exceptions, most notably unauthorized access to our application.

     Then we have Http, which includes the Controllers folder where, at least in the begging most of our back-end code will go. The controllers are a big part in the MVC frameworks ( M is for Model and V is for View ). To put it simply, the users send them requests, and controllers reply with responses.

     The Providers folder is where we'll create our 'special services', but more on those later.

    

     The Config directory is a great continuation on the Providers. We'll mostly be working with the first file - app.php, where we'll register those 'special services'.

 

     Databases are hopefully self-explanatory, it deals with databases. Migrations sub directory helps us create new tables, or edit existing ones. It already includes a couple of useful migrations, which we'll use when we get to Laravel security.

     There's also the seeds directory, where we'll create files to populate our databases. It is particularly useful for testing.

 

     We won't really be touching the public folder, but this is a very important part of our application. That's where all our assets get compiled to and if you look at the app.css or app.js files, you'll find countless lines of minified code, that's being served to our users.

 

     Resources include assets and views, most importantly. In the assets folder, which we'll be editing in this guide, you'll find JavaScript and Sass files, where we'll place our scripts and styles. The views, again on of the letters of the MVC acronym,  house our blade files. Blade is a PHP templating framework, that will let us write plane HTML code and serve dynamic content. There's already one blade file included and if you look closely, it's the Laravel welcome page we see in our browsers.

 

     The Routes folder and specifically the web.php file is where we'll register all of our website routes. That sounds like a lot of work, but as you'll see in the next lectures, Laravel helps us do this dynamically and it won't be a hassle.

 

     The ENV file is where we'll set up our environment variables, mainly those needed to connect to the database. You also have composer.json and package.json file, which include all of your PHP and Node dependencies.

 

Step 2 - Install the Node Modules

 

     That was a lot for an introduction, but I believe it is good to get to know your app before you start working on it.

     Now for some real work. As I previously stated it is advisable that you have Node installed as it will help us compile our assets. This guide will assume you've installed Node and we can proceed.

     Anyone who is at least a bit familiar with Node will see something strange. We have a package.json file, but no node_modules folder.

     Let's fix that. Open up your command line interface and navigate too the root of your application. For me it looks like this.

/c/xampp/htdocs/yourappname

 

     Now we'll run a npm (Node Package Manager) command, to install all packages from the package.json file.

npm install

     Note - it will take some time, and if you get any errors at the end, try running the same command as administrator ( Windows - right click - Run as administrator )

     You may need to refresh your project, but now we have the node_modules directory.

 

     Let's set up our styling and JavaScript capabilities. Go to the assets folder inside resources. Here you have js and sass. We'll create a couple of new file here. In the js folder, we'll make a custom.js file. Now include it in the app.js by adding this line after bootstrap import:

require('./custom');

 

     Similarly, in the sass folder create a file called _custom.scss and add it to the app.scss at the bottom:

@import 'custom';

     You can add a style rule or two to the _custom.scss file, just to make sure the command we are about to run take effect. Also, you need to include the app.css file to your blade template in the views folder.

     Add this line:

<link href="{{asset('css/app.css')}}" rel="stylesheet">

     We'll talk later about the asset function, but it will behave like any other stylesheet you've included on an HTML page.

 

     In your command line interface run:

npm run dev

     This will compile your js and scss files into those in the public folder.

 

     When you're styling your website or testing JavaScript code, it can become tedious to constantly run the npm run dev command. Luckily, we have an alternative:

npm run watch

     After running this line, you'll see that that the process doesn't really end. It's actually waiting for you to make a change. It will than automatically compile your code on save.

 

     That's it for this part. We'll come back to styling our app later on, but you can certainly play around. Note - Laravel comes with Bootstrap included. If you want to disable it, remove or comment out the line in your app.scss file:

// Bootstrap
// @import '~bootstrap/scss/bootstrap';

 

 

Step 3 - Create a Git Repository

 

     Let's create a new Git repository and upload it to GitHub. If you don't have a GitHub account, make sure you get one before we start.

     Ok, log in to your GitHub account and in the top right corner click the plus icon - New Repository.

     Add the name for your repo, description is optional, and click Create Repository.

     To initialize a new Git repository, in a command line run:

git init

 

     To check the status of your repository and see which files have been run:

git status

 

     You'll see that all is red, meaning we have to add everything. We'll do this by running:

git add *

     Alternatively, if you wish to only add a certain file, you would run git add filename.

     Run git status again and you'll see that most files are now green. Those that are still red, you can ignore for now.

 

     Now, we make our first commit:

git commit -m "initial commit"

     The -m flag stands for message and it is required, although you can put anything you want in the message.

 

     Now let's push our repo to GitHub, we'll run the next two lines:

git remote add origin git@github.com:YourGitHubName/your-github-repo-name.git

     Make sure, you put your own credentials.

 

     And finally, for the first push:

git push -u origin master

     On later commits, we'll just run git push:

 

     That's it, if you refresh your GitHub window, you'll find tour new repo.

 

      This was a long one, but I hope it has helped you get a first look at a Laravel project structure. We've also enabled our styling and JavaScript capabilities and learned how to create new Git repositories and push them to GitHub. Stay tuned, as they say, this is only the start. In the next one, we'll start coding.