Let's talk

Level 102

That just means the server is running. Note that this server is for js and css only. Not php. So if for instance you are running php artisan serve then open that page :)

Level 1

@Sinnbeck yes sir, the page is open, i want the css codes to show in the page.

Level 102

@gilan_codes You mean you want to see the contents of the css ? Or just to have your main page pick up the css styling?

Level 1

@Sinnbeck I want to have my main page pick up the css styling

Level 102

@gilan_codes Ok. So open your dev tools with F12 and select the Console tab. Are there any errors ?

Level 102

@gilan_codes Can you show how you included the css in the page ? It isnt looks at the correct path

Level 1

@Sinnbeck

Chat-App

<link rel="stylesheet" href="./css/app.css" />

Let's talk

    <div id="message"></div>

    <form id="message-form">
        <input type="text" name="messaage" id="message_input" placeholder="write a message..."/>
        <button type="submit" id="message_send">Send Message</button>
    </form>
</div>

<script src="./js/app.js"></script>
{{-- The above script comes from the public folder containing the app.js in it --}}

The above is my index.blade.php page

https://laravel.com/docs/9.x/vite#loading-your-scripts-and-styles

Level 102

@gilan_codes These lines is wrong :)

<link rel="stylesheet" href="./css/app.css" />
//and
<script src="./js/app.js"></script>

You need to use the vite helper

@vite(['resources/css/app.css'])
//and
@vite(['resources/js/app.js'])
//or just
@vite(['resources/js/app.js', 'resources/css/app.css'])

Level 1

@Sinnbeck sir, I have corrected it but i do not know why it is still showing the same thing. Here is what I did.

Chat-App

@vite(['resources/js/app.js', 'resources/css/app.css'])

Let's talk

    <div id="message"></div>

    <form id="message-form">
        <input type="text" name="messaage" id="message_input" placeholder="write a message..."/>
        <button type="submit" id="message_send">Send Message</button>
    </form>
</div>

{{-- The above script comes from the public folder containing the app.js in it --}}

Level 102

@gilan_codes In the public folder? So this script isn't in laravel at all ? Why not use laravel and put it in a view ?

Shivamyadav

Level 20

@Sinnbeck That means we have to put our css and js inside the resources folder? Then run npm run dev to compile it ,after compiling the css did it takes to the public directory ,like mix web pack do?

Level 1

@Sinnbeck It is in the view , the comment is for a line of code directly above it, which i deleted. I just forgot to delete the comment.

Level 102

@gilan_codes Ok so it is in a view but the error is exactly the same? Try clearing cache php artisan view:clear. Or check if you are referencing it wrong in other files.

Level 1

@Sinnbeck I have cleared the cache but the errors are still thesame.

Level 102

@gilan_codes Then you must have a reference to those scripts some other place. Are you sure the error is exactly the same ?

Level 102

@gilan_codes You wrote path/to instead of the real path.. Check my example where I wrote the normal paths..

Level 1

@Sinnbeck sir , here it is

@vite([ './path/to/app.css', './path/to/app.js', ]) Chat-App

{{-- <link rel="stylesheet" href="./css/app.css" /> --}}
@vite(['resources/js/app.js', 'resources/css/app.css'])

Let's talk

    <div id="message"></div>

    <form id="message-form">
        <input type="text" name="messaage" id="message_input" placeholder="write a message..."/>
        <button type="submit" id="message_send">Send Message</button>
    </form>
</div>

Level 102

@gilan_codes Remove this

@vite([ './path/to/app.css', './path/to/app.js', ])

You only need

@vite(['resources/js/app.js', 'resources/css/app.css'])

Level 102

@gilan_codes You just posted that ?

Level 102

@gilan_codes Great so css is working now I assume? That other error has nothing to do with vite or laravel. I think that error you have now is a browser extension that cannot read the page. Maybe disable it for now :)

Level 102

@Shivamyadav If you want to use vite then yes. Feel free to make a thread if you want to discuss how it works

Level 1

@Sinnbeck yes sir , it is working but not as it is suppose to . Here is the link to the youtube video i am watching https://www.youtube.com/watch?v=VdlQJ7zHQK0.

From my GUI , the write message and send message appears directly below the input field( which says , please enter your name) meanwhile it is not suppose to appear that way, It should instead be at the bottom as shown in the video.

Level 102

@gilan_codes That sounds more like a styling question that how to get vite working? And be aware that I cannot see your screen, so I dont really know how you expect me to help from just watching a video?

Also be aware that when you need to use the process.env.MIX_ they are now import.meta.env.VITE_. The tutorial seems to be using laravel mix, while you are using vite, so some things might be a bit different.

Level 1

@Sinnbeck Thank you so much sir for your help, It's now working well.

Level 102

@gilan_codes Awesome :) Please close the thread by marking a best answer

Level 1

@Sinnbeck okay sir, i have a question Is there another way of installing this npm i --save laravel-echo pusher-js in laravel 9? Because this cmd is for laravel 5

Level 102

@gilan_codes I think the command is the same https://laravel.com/docs/9.x/broadcasting#client-pusher-channels

Level 102

@gilan_codes As I as said the error has nothing to do with laravel. My guess it that its some browser plugin that you have installed. Ciuvo seems to be a price checker of some sort.

Level 1

@Sinnbeck Okay sir, I am still looking forward on how it could be solved

Level 102

@gilan_codes uninstall the plugin? Or disable it? I don't know that browser plugin so I cannot say. Again it has nothing to do with laravel. You can also just ignore the error?

xeno

Level 1

add

@vite([
    './path/to/app.css',
    './path/to/app.js',
])

above your <title></title>