Create Instagram Clone with Laravel (Part 3): Setting Up Front-End with Node and NPM, Setting Up Database Using SQLite

In this post, I covered from minute 11:00 until 26:00 of this video.

I understand now why Laravel is so popular. My mind just blown after knowing that you can create an authentication system that allow us to register user and log in user very easily! In Laravel < 6 like the one the instructor is using, he created it by using the command make:auth. But in my version of Laravel, first, we need to install laravel/ui package by running composer require laravel/ui. After it has been installed, when you run php artisan, you will now see some new command are added to the list. Run php artisan ui:auth. When you refresh your app in the browser, the page changed and a link to Login and Register page appear at the top right side. For now, we can't do anything just yet because we still don't have database to create and store user information. We will get to that later in this post. Even if you click on those 2 links, somehow, it doesn't look too pretty...

You should already know by now that in this development, there's a front-end and a back-end. Front-end is consisting of HTML, a little bit of JavaScript and view. For back-end, we have PHP and Laravel running on top of it.

For the front end, we will be using Bootstrap and Vue.js. I am familiar with Bootstrap but not Vue.js. As the instructor described, Vue.js is a JavaScript framework. In Laravel, you can use any JavaScript framework you like but for the purpose of learning the course, I will also be using Vue. I've never use any framework besides jQuery before so this is also something new to me.

The Laravel version he use has Bootstrap and Vue.js installed automatically once a new Laravel project is created. But in my version, I have to install it individually. At first, I don't know about this but I noticed there's a little difference between his files and my files. Like, in his resources folder, there's a sass folder that has some files containing the word 'bootstrap' somewhere in the code. I don't have those files. I figured I have to install it manually and it turned out to be true.

In the beginning, we've already install the laravel/ui package. This package provides the UI scaffoldings for Bootstrap, Vue and React alongside with the auth scaffold for login and registration. Because we already have that package, we can run command php artisan ui bootstrap and php artisan ui vue to install Bootstrap and Vue. For some reason, when installing those two, my console doesn't show any installation progress so if you're facing the same thing as me, it's not an error. You just need to wait a few minutes until it says the installation is successful. After the installation, you will notice that it ask you to run command npm install and npm run dev to compile it. The instructor explained a bit about this.

If you already installed Node.js, you should be able to run npm -v and node -v. Just like Composer, NPM is also a package manager, except that it is for JavaScript. With NPM, there are some commands that we can run but to do that, first we need to install dependencies in our project and that's the purpose of why we need to run npm install.

For NPM and front-end development, everything needs to be compiled before it can be use. There's a couple of different options to run a compilation but for now, we only need to know npm run dev. What this will do is, it takes everything that comes with Laravel, compile it to a file that we can actually use. The reason we do this through webpack is because it able to compile quite significant amount of code into the smallest minified file.

Now that we have compiled all our front-end assets, the compiled file becomes app.css and app.js which are located inside the public/css and public/js folder respectively. We will never touch these files. For any modifications, we do it in app.css and app.js that are located in the resources folder.

We don't use Vue.js functionality yet but you can now see the changes it made after Bootstrap has been installed and compiled. Your Login and Register page should look a lot better now!

For this part 3, we kinda have finished with the front-end bit. Let's move on to the back-end bit. First, take a look at home.blade.php in resources folder. This file existed right after we run  the auth command at the beginning of this post. Home is what gets loaded when user logs into our application. But right now, no one can login because we haven't created any users. This is where we need to use database.

If you look at the list of php artisan command again, there's this concept of migrate/migration. For the most of this part, I don't quite understand so I will just write what the instructor said: just think of migration as a file that holds all the instructions that you need to tell your database to create itself. Throughout the course we're going to modify the database through the migration, not directly into the database. We do this because migration describes each change in a very systematic way. But before you can run this migrate command, first you need to set up some sort of database with Laravel. In the course, the instructor is using SQLite because it's easy to set it up. Although I'm more tempted to use MySQL, for now, I'll follow the instructor, using the SQLite. Maybe after I've completed this course, I'll create the same project again but with using MySQL.

Let's create an empty database file named database.sqlite inside the database directory with command vim database/database.sqlite. At first, I received an error like this: vim is not recognized blabla.... To solve this error, I install Vim by downloading the self-installing executable file (.exe) from the official site.  After running that command, just exit out by writing :wq and then hit enter.

Next, we will explore the .env file that's located in the root. This file holds all the configurations that are specific to your environment like localhost, staging or production environment setup. If you look at the file, you should have a localhost environment setup. However, my file is a bit different from the instructor. In the video, the instructor has APP_URL=http://localhost but what I have is APP_URL=http://mysite.test. I don't know why my file is different from him but I will leave it at that for now. The more important thing we should do first is take a look at the database setup section.

Because we're going to use SQLite, we can go ahead and delete all the db lines except for DB_CONNECTION. By default, the db connection is set to mysql so we need to change this to sqlite and then save the file. When we make any changes to the .env file, we need to restart our development server or else we will came across errors later. In the Laravel version that the instructor is using, he has to restart it manually. To restart the server, you need to stop it by pressing CTRL+C first, and then run serve command again. But in the version I am using, whenever changes is made in .env file, the server will restart itself. Just for your information.

Let's go back to the migration thing. So how we actually get the database migrating? Or in other words, how do we get it to the latest state possible? With that, of course we're going to use php artisan command. Just run php artisan migrate and you'll see that it created some tables. There's a difference between my version and the instructor's version again. The command create 2 tables for the instructor, but I have 3 tables. I have a table named users, password_resets which are the same as the instructor and also one extra table named failed_jobs. The table name is pretty self-explanatory. For table users, of course it will store users' data, table password_reset for holding any password resets and failed_jobs for storing any failed job attempts.

Now that we have database and tables, we can now register users in our app! Weehoo! For the Name field, you can insert more than one sentence or include special characters. It's just your display name, not your username that supposed to be unique. This register process uses the email address as the unique key so if you use the same email to register another user, it will show an error. You should also be able to logout, and login now. If you logged out and enter http://127.0.0.1:8000/home page, which is the page that logged in users will be redirected to, you won't be able to access it but instead, you will be redirected to the login page. All of these has been set up for us because we run the ui:auth command. SUPERB!

That is all for part 3! I think this part contained more useful information than the previous part. In the next part, we will be doing my most favorite thing to do - designing the user interface!

---

Highlights ⚡

• Install laravel/ui package with composer require laravel/ui
• Install Bootstrap with php artisan ui bootstrap
• Install Vue with php artisan ui vue
• Create authentication and session with php artisan ui:auth
• Install NPM dependencies with npm install
• Compile assets with npm run dev
• Create new SQLite database file with vim database/databasename.sqlite
• Create tables for authentication with php artisan migrate
• All of the front-end assets should be compile
• Development environment configuration is in .env file
• You can close development server either by closing the console, or pressing the CTRL+C

Helpful Links 🔗

1. https://stackoverflow.com/questions/34545641/php-artisan-makeauth-command-is-not-defined
2. https://www.itsolutionstuff.com/post/laravel-8-install-bootstrap-example-tutorialexample.html
3. https://www.techiediaries.com/laravel/how-to-install-vuejs-in-laravel-6-7-by-example/

Special Section 🧠

Before I figured I need to install Bootstrap, I gone a bit off track from the course by making some changes to my app.css in resources and welcome.blade.php. Because my app.css is empty, I'm curious to see what will happen if I moved all the CSS in the view to my app.css. So I cut the code within <style></style> tag in the view and paste it in app.css. After that, I replace the style tag with <link href="{{ asset('css/app.css') }}" rel="stylesheet"> before compiling it. When I refresh my app in the browser, it look just the same as before, which is a good thing because it doesn't break despite the changes I made. So I guess, if you don't use Bootstrap, you can write your own CSS in app.css like this too.