DEV Community

Michael "lampe" Lazarski
Michael "lampe" Lazarski

Posted on

Learning Laravel 6 and VueJS for Javascript/NodeJS developer part 2 - Directory Structure explained

In part one, we installed laravel, its dependencies, and then run our app. In this part, we will talk about the structure of your project. At first, it can be overwhelming because laravel creates a lot of directories and files. After this blog post, it should be more clear to you where to find things and how to navigate around your project.

The root directory structure

Alt Text

Directory Description
app The main PHP code of your application. We will go deeper into this folder in the next chapter
bootstrap This is where your app.php is, which is the start of your application. It also contains a folder called cache. This folder has some generate files by laravel to optimize the speed of your app
config What do you think is in this directory? Yes, it has a lot of configuration files. Some of them are hardcoded in these files, and some are loaded from the .env file in the root directory
database Here are all the files you need for your database. We will also talk about this in a later chapter
public This directory exposes your app to the world. Everything here is publicly accessible by everybody. Every request goes through the index.php
resources This is another essential directory. Here you will add all your raw javascript, assets, and CSS files. This is where the most of the frontend magic will happen
routes The routes directory hold all your routs. The web.php file is where you will usually work the most with. We will talk about this more in another chapter.
storage Here are all the files that are generated by laravel. Usually, you don't have to touch this directory.
tests Here you should write your PHPUnit tests. We will talk about this in another chapter.
vendor This is the node_modules folder of composer. You should not touch this folder and let composer handle all of it for you.

Now let's have a look at the root directory files.

Files Description
.editorconfig This file has some information for your code editor. For example, what charset to use and if the editor should use tabs or spaces and so on.
.env, .env.example The .env file contains all your environment variables. It has general information about the app and also the database connection information and much more important information
.gitattributes This is a git specific file. It helps git to better understand your file structure. Please comment down below if you want to know more about this file.
.gitignore This file tells git what paths or files it should ignore.
.styleci.yml A PHP coding style continuous integration service
artisan the artisan command you run in the command line.
composer.json If you are coming from nodejs then you can think of this file like the package.json. It has your dependencies and extra information needed for composer
composer.lock This file is generated by composer and has the dependency tree of your application. You should not touch this file directly.
package.json Your javascript dependencies file. It is like the composer.json file but for your javascript dependencies
phpunit.xml Here, you can find your PHPUnit configuration.
server.php This file is your development server and should only be used for this purpose. It is run when you type php artisan serv
webpack.mix.js This is your webpack configuration, but it uses Laravel Mix. We will talk about Laravel Mix in a later chapter.

Top comments (2)

messerli90 profile image
Michael Messerli

Welcome to the dark side JS devs 😆

iamndeleva profile image

How do you link laravel with phpstorm