Learning Laravel 6 and VueJS for Javascript/NodeJS developer part 2 - Directory Structure explained
Tags: vue, laravel, php, javascript
Published: 2019-10-20 08:19:39


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](https://thepracticaldev.s3.amazonaws.com/i/tagpdhwz8izcf2yta6x6.png)


| 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 https://styleci.io/ |
| 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. |