markc's avatar
Level 4

Total noob, index page won't load

I want to get started with Laravel, so I am following the initial Laravel Bootcamp tutorial for Blade (keep it simple) but when I add the most elementary "return 'Hello, World!';" line to ChirpController.php and a Route::resource (from the tutorial) to routes/web.php I'm getting a 404 when I go to /chirps. I have registered as a user and the /dashboard URL says I am logged in, so something is working.

What is confusing is that the tutorial says to kick things off with "npm run dev" which gets me some default page at localhost:5173 compared to better results for "php artisan serve" on localhost:8000.

First question: is the references to "npm run dev" incorrect in the tutorial, should it be "php artisan server" instead?

0 likes
12 replies
Ben Taylor's avatar

Welcome to Laravel. Can you please share your web.php file?

2 likes
markc's avatar
Level 4

routes/web.php

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::resource('chirps', ChirpController::class)
    ->only(['index', 'store'])
    ->middleware(['auth', 'verified']);

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

require __DIR__.'/auth.php';
derekwilliams's avatar

@markc

I had the same issue, the bootcamp is not clear. You need to run php artisan serve which provides the web interface at localhost:8000. Chirps can then be found at localhost:8000/chirps. The command npm run dev appears to be just for keeping the Javascript bits updating (e.g. Vite, React). The documentation is not the best IMHO.

Also, apparently I can't post links on my first day on this site, so localhost is the normal url pattern http...

alexanderTheGreat's avatar

@markc Maybe is too late for you, but the problem is that the Laravel Bootcamp is designed to follow a Laravel Breeze installation. The main problem and why you see the 404 error, is because it can't find the element Tags provided by Breeze: anything that starts with \<x its not a default HTML tag, thus, it shows that problem. If you have time try to upgrade your current project to use Breeze:

php artisan breeze:install

Or just follow the interactive shell, and select the following:

  • Would you like to install a starter kit? Laravel Breeze
Tray2's avatar

I would suggest using php artisan serve since it does what you need. If you really want to get into Laravel, I suggest using SAIL or a LEMP/LAMP stack.

Now this line of code doesn't really tell us much.

Route::resource('chirps', ChirpController::class)
    ->only(['index', 'store'])
    ->middleware(['auth', 'verified']);

it should allow you to hit http(s)://localhost:8000/chirps, and then the ChirpController's index method, but only if you are logged in and verified.

I suggest that you don't use resource routes if you only want to use a couple of the actions.

Route::get('/chirps', [ChirpController::class, 'index'])
->middleware(['auth', 'verified'])
->name('chirps.index');

Would be a better option in my book.

Now one of the most important things is learning to debug.

  1. Remove the middlewares.
  2. Try to access the route again.
  3. Did that work?

Also share the code in your ChirpController.

Oh, and make sure that you have the same case on the names.

This is a good place to start.

https://laracasts.com/series/laravel-8-from-scratch

1 like
markc's avatar
Level 4

@Tray2 I am halfway through the laravel-8-from-scratch tutorial and it's excellent. I have bumped into it before when googling around but the laravel-8 part put me off. I was looking for something more uptodate but it's close enough and really well done. By the time I get to the end of the tutorial and start paying around with Jeffreys github repo I should be able to upgrade it to laravel 9.38+ and then start adding a Quasar frontend. A WIP blog application will be handy to have on tap anyway.

markc's avatar
Level 4

Thanks Tray2. As far as know, I am simply following the Laravel Bootcamp tutorial verbatim, but it's not clear to me that's it has been recently vetted or tested...

https://bootcamp.laravel.com/blade/creating-chirps

For instance, that page refers to app/Http/Controller/ChirpController.php after running php artisan make:model -mrc Chirp that command created a app/Http/Controllers/ folder. Then in the previous Installation section it says to npm run dev whereas I am sure that is meant to be php artisan server so I'm still confused as to which one does what.

These issues would be obvious to anyone else, and I'm sure if I get to the end of the Build Chirper with Blade tutorial, I'll even know what "middleware" is, but atm I'm looking at a pile of...

I refuse to use docker, so I have just set up a Proxmox VM as a LEMP server to see if that helps. I really just want to get into Quasar with a Laravel API backend, so I suspect I'm in for a long, long journey.

Tray2's avatar

@markc Then I really recommend the free Laravel from scratch course I linked in my previous reply.

1 like
Sinnbeck's avatar

@markc Just to clear up a bit of the confusion.

Laravel is php, and requires a php server to run. This is what we use php artisan serve for. You can also use apache2 or nginx which both support php :)

Now the npm run dev is for compiling css and javascript. So in theory you only need to run this when working with either of those. So it isnt needed for running laravel as such, but before laravel will stop complaining over missing files, you might need to run npm run build

  • php artisan serve = run php server for laravel
  • npm run dev = run dev server for js and css assets
  • npm run build = compile js and css assets for production
1 like
alexanderTheGreat's avatar

The problem is that the Laravel Bootcamp is designed to follow a Laravel Breeze installation. The main problem and why you see the 404 error, is because it can't find the element Tags provided by Breeze: anything that starts with <x its not a default HTML tag, thus, it shows that problem. If you have time try to upgrade your current project to use Breeze:

php artisan breeze:install

Or just follow the interactive shell, and select the following:

Would you like to install a starter kit? Laravel Breeze

markc's avatar
Level 4

Heh, here I am back again one year later with exactly the same problem (and in this same thread from a Google search). I have been testing a lot of projects, especially FilamentPHP, but I keep bumping into "things that don't work" so I thought I would step back a bit and go through the 3 bootcamp chirps examples while RTFM. ATM, I am following along with the "Build Chirper with Blade" tutorial EXACTLY (so not much point pasting my edited files) and on https://bootcamp.laravel.com/blade/creating-chirps I get down to "If you are still logged in from earlier, you should see your message when navigating to http://localhost:8000/chirps" but I still get a 404 as per a year ago.

Breeze is installed as per https://bootcamp.laravel.com/blade/installation

"php artisan route:list" does not show any "chirps" paths. What on earth could I be doing wrong at this point with such an absolutely super simple example?

markc's avatar
markc
OP
Best Answer
Level 4

After initial difficulties, I successfully completed the first two sections of the Chirps Blade tutorial on my third attempt. The expected "Hello World!" output now appears at http://127.0.0.1:8000/chirps. While I can proceed with the tutorial, I'm uncertain about what caused the issues in my previous attempts, both recently and a year ago.

However, when I moved on to the next "03. Creating Chirps" section I got another error that $chirps was unknown. Either I am really dumb (quite likely) or the bootcamp tutorials are not well tested. Even Cline could not help me. Rather than totally give up, yet again, I searched through GitHub for completed Chirper projects and after cloning and testing a dozen broken repositories, I found one by m0ohannad that has all FOUR examples, all working and recently updated. Many thanks to you m0ohannad!

So to help any future Laravel noobs that land on this thread from Google, go to these GitHub repositories and check them out and give them a star...

https://github.com/m0ohannad/Build-Chirper-with-Blade

https://github.com/m0ohannad/Build-Chirper-with-Livewire

https://github.com/m0ohannad/Build-Chirper-with-Vue

https://github.com/m0ohannad/Build-Chirper-with-React

# Example usage for the Blade repository
git clone https://github.com/m0ohannad/Build-Chirper-with-Blade
cd Build-Chirper-with-Blade
cp .env.example .env
touch database/database.sqlite
composer install
npm install
php artisan key:generate
php artisan storage:link
php artisan migrate
npm run build # or 'dev' in another shell
php artisan serve

Please or to participate in this conversation.