Linkeeper - Lesson 01 - Installation
Tags: laravel, filament, php, tutorial
Published: 2024-04-10 15:00:00


In this little serie, we will learn the basics about Laravel through a little application **LinKeeper**.

It goal is to keep your links and share them to the world.

So, what we need ?

We have to bring solutions to these definitions : 

- an user can signin, login, logout and manage his account
- a user can see a list of their links
- an user can add, edit or delete a link
- an user can have a shareable link to share his links with the world
- a link has a name, a status (published or not) and obviously a link. May be we will add some options later.

The purpose here is to discover the basic concepts of Laravel and FilamentPHP. 

In this serie, I will use Laravel 11 and FilamentPHP 3.

Let's go and beginning with the very basic : the install

{%- # TOC start (generated with https://github.com/derlin/bitdowntoc) -%}

- [Installing Laravel](#installing-laravel)
   * [Launch install with Laravel Installer](#launch-install-with-laravel-installer)
   * [Laravel is installed 🎉](#laravel-is-installed)
   * [Check the install](#check-the-install)
- [FilamentPHP install](#filamentphp-install)
   * [Create a first user](#create-a-first-user)
   * [Check the install](#check-the-install-1)
- [Change the name of application](#change-the-name-of-application)

{%- # TOC end -%}

## Installing Laravel

As every Laravel project, we have to launch the laravel install.

If you have the laravel installer it's as easy as type `laravel new linkeeper` in your favorite terminal.

If you prefer **composer**, just use this command instead `composer create-project laravel/laravel linkeeper`

Follow theses steps, which consisting to keep default choices and click enter three times 😉.

### Launch install with Laravel Installer

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0wdg2axdm0ap58rswe1.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h60of4shtatfn6h0aujf.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3igfo4q2x30ux4lf6fgu.png)

### Laravel is installed 🎉
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g93yt41em82iuzjl1izq.png)

As we have choose sqlite as database there is no more configuration needed, except `APP_NAME`, `APP_TIMEZONE` if you want.

For more simplicity, I let the language setting with default value. Feel free to change it if you need.

### Check the install

Personnaly, I work on Mac with Herd. I can check http://linkeeper.test on my browser.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y24tx1r07a3l0a9jrpt6.png)

Everything seems ok !

If you need to work with `https`, it's perfectly possible with Herd in a single click.

Go to Herd settings, choose 'Sites' tab and search for your current url. Here : `linkeeper.test`.

Look for the lock and click on it to activate https.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pljg79uxsrb2dsrrogw2.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43h6inu9d35bkg0zf3eo.png)

Easy, peasy ! No ?

## FilamentPHP install

Now, we have to install FilamentPHP. Sincerely, you don't need me for these steps, you just have to look at the incredible documentation of Laravel and Filament.

But, if you are already here, let's keep forwarding together 🤣

So, just copy / paste the 'Get Started' tutorial : 

```bash
composer require filament/filament:"^3.2" -W
 
php artisan filament:install --panels
```
Let the default choice when Filament ask for id : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhril0xcfyidi8cv4mto.png)

And voilà! Filament is installed.

### Create a first user

We need an user to start play with Filament.

```bash
php artisan make:filament-user
```

Here too, answer questions for your name, email and password.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh4lt53gw9ofkfks4fly.png)

### Check the install

Let's go to the link provided to ensure that everything is ok.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g016xqdeekj4ftm047s0.png)

Enter your credentials and if everything is ok, you will see something like that : 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5je5w47q1pz7k283mjwg.png)

## Change the name of application

As you can see in the top left corner the name of the app is "Laravel", let's change this for "LinKeeper".

Open your project in your favorite IDE or if you prefer for this minor change, type `nano .env`in your terminal.

You just have to change the `APP_NAME` key : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvas4lbahg6qgmun6nbr.png)

If your name has spaces, you have to use the quote for your name.

ctrl + x to exit, say 'yes' when nano asked you if you want to save your file and confirm the name of the file (.env) by pressing return key.

Your `.env` file is now saved, you can reload your page and you will see the name of the app changed in the top left corner.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aitesaoxaatn0qu60sm8.png)

This is the end of this first part. In the next episode, we'll see how to start playing with Filament and models.


Don't hesitate to comment if you have question or if you see a mistake.